この記事は、回転してジャンプする翼によって寄稿されています。
向きを変えてジャンプして消えるウィングのブログアドレス：
昨日は楽しいイベントがありました。誰もが知っていると思います~~わからない場合は、次のURLを入力して入手してください。
夜にテイクアウェイを注文しました。開けました。お腹が空いていますか？バージョンがプッシュされているのを見つけました。更新後、チキンドラムスティックをクリックしました。インタラクティブショーが揚げられました。
しかし、まだポイントがあります。誤って左右にスワイプできることに気づきました。この。。。あなたは私に言わない、私が左右にスライドできることをどうやって知るのか
https://github.com/githubwing/ZoomHeader
写真に直接：
とても面白いですよね？だから私はそれを真似したかったのです。これが私が作った効果です：
量。。しかし、絵は長くはありません。それはおそらく同じことを意味します。次に、この効果がどのように達成されるかをあなたと共有します。遭遇したアイデアや問題について話します。ただし、詳細については説明しません。具体的な詳細については、ソースコードを参照してください。
彼は1つのアクティビティですか、それとも2つのアクティビティですか？
私はあなたがそのような質問をしなければならないと信じています、そして答えは一つです。
表示されている中央のimageviewはビューページャーです。ビューページャーの上には透明なビューがあります。もちろん、このアクティビティの背景も透過的です。
1実装のアイデア
CoordinatorLayout + Behaviorを使用して達成します。正直なところ、行動は本当に強力です。。
viewpager + head
全体の実現のアイデアはこれです。上から下への全体的なレイアウトは次のとおりです。
-
透明なビュー
-
ビューページャー
- RecyclerView
透明なビューとビューページャーは、カスタムヘッダーに結合されます。ヘッダーが上に移動すると、画像がズームインし、RecyclerViewが上部をリンクして透明から不透明に変更します。
したがって、最初に透過的で移動可能なHeaderViewをカスタマイズする必要があります。
onTouchEventでジェスチャを処理します。。
ヘッダーを3つの状態に分割します。
-
上に移動します。詳細ページに展開されます。
-
下に移動して、viewpagerに復元します。
- もう一度下に移動して、アクティビティを終了します。
上に移動する過程で、私は小さな課題に遭遇しました。ここでそれを共有してください。
上向きの動きの間に、絵は拡大される必要があります。ただし、その過程でLayoutParamsを使用することはできません。アニメーションの詳細を次に示します。
LayoutParamsを使用したアニメーションはタブーです。それはノンストップのrequestLayoutを引き起こし、それによってUIのパフォーマンスに影響を与えます。
したがって、ここでの解決策の1つは、ImageViewのサイズを実際に変更するのではなく、画像を拡大することです。画像を拡大縮小します。大きく見えても、ビューの実際のサイズは変わりません。
ですから、真は偽、偽も真ということわざがありますが、なぜ真剣に受け止めなければならないのでしょうか。アニメーション効果がこの文に続く限り、基本的にそれは達成することができます。あなたが見る効果はすべて間違っています。それらはすべて目隠しです。大きく表示することは実際には大きくありません。ビューの一時停止は実際の一時停止ではありません（明示的または非表示の場合があります）。それは魔法のようなものです。。それは実際には本当に簡単です。
その後、再び問題が発生しました。写真が拡大されていますが、テキストをどのように揃えますか？もちろん、テキストの位置を実際に変更することはできません。したがって、ここではTranslationXを使用して実装されます。画像拡大のプロセスでは、スケール係数を使用して、2つのエンドポイント値による線形変化を計算します。主なテキスト配置コードは次のとおりです。
2点目。つまり、画像の拡大処理中に、ボタンの下部のテキストとボタンの左右のパディングを変更することはできません。これは、すぐに使用できるビューにカプセル化しなかった理由でもあります（実際、まだ十分なレベルではありません）。これらのスペースは、上記の方法に従って動的に計算する必要があるためです。。ですから、それはかなり不正行為です。。
2 ViewPager
オンラインギャラリーの効果を活用してください。直接
setPageTransformer(true, new ZoomOutPageTransformer());
ここで、現在のビューがトップレベルで最後に描画されるようにするには、ビューの描画順序を変更する必要があることに注意してください。
3 RecyclerView
RecyclerViewは最初は完全に透過的です。そして、HeaderViewに従って上下に移動し、上に移動する過程で徐々に表示されます。RecyclerViewが一番上にスクロールするときに、RecyclerViewのスクロールをリッスンする必要があります。元の状態に戻すときが来たことをヘッダーに通知します。
4行動
ヘッダーをRecyclerViewに関連付ける動作が動作です。Behaviorは以前にいくつかの紹介を書いたので、ここで長居することはありません。
denpendcyはHeaderViewです。そして、RecyclerViewのスライドを監視します。
具体的な詳細はソースコードをご覧ください〜
悪くないと思うなら、スターへようこそ
オリジナルを読む