web-dev-qa-db-ja.com

Android Twitterのようなツールバーとユーザー画像アニメーション

ツールバーとTwitterのユーザープロファイルで使用されているようなユーザー画像アニメーションを実現しようとしています。

多くのことを試しましたが、画面上部の折りたたまれたツールバーを、展開したときの背景ですばやく固定し、ユーザー画像を最初にツールバーの上に配置してから、縮小して下に移動することはできません。スクロール中のツールバー。

Twitterはどのようにしてユーザープロフィール画像にスムーズな効果をもたらしますか？最初にこの画像をツールバーの前に置き、次にスクロール中に後ろに移動して、ツールバーの下に行くスムーズな効果を実現するにはどうすればよいでしょうか。

次のすべてのシナリオを試しました。

  • CollapseParallaxMultiplierを使用した視差効果のあるツールバー。
  • ピンツールバー設定の高さ100dpおよびminHeight？attr/actionBarSize。
  • 2つのツールバー。1つは画像の背景を使用し、もう1つは透明な背景色で固定します。
  • UserImageを呼び出してから、Y位置をスムーズに移動します（スクロール時にツールバーの下にUser Imageを送信する効果は得られません）。

前のシナリオはどれも私にとってうまくいきませんでした。

XML階層：

<Android.support.design.widget.CoordinatorLayout>
    <Android.support.design.widget.AppBarLayout>
       <Android.support.design.widget.CollapsingToolbarLayout>
             <LinearLayout>
                   <!--Some TextViews and ImageViews-->
             </LinearLayout>
             <ImageView src="My User profile Img"/> <!--Image first above toolbar and when toolbar is collapsing scale down and then go below toolbar-->
             <ImageView src="My background"  app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8"/> 
             <Android.support.v7.widget.Toolbar app:layout_collapseMode="pin"/>
       </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>

  <!--Second Part, where the ViewPager should be pinned below the Toolbar-->
  <NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <LinearLayout> 
      <Android.support.design.widget.TabLayout/>
      <Android.support.v4.view.ViewPager/>
     </LinearLayout>
     </NestedScrollView>
</Android.support.design.widget.CoordinatorLayout>

添付すると、ユーザープロファイルアクティビティに対するTwitterの影響を確認できます。

enter image description here

androidandroid-animationandroid-toolbarandroid-coordinatorlayoutandroid-twitter
17
JpCrow

あなたは本来よりももっと難しいことを試みていると思います

CollapsingToolbarLayoutにはこのcontentScrim要素があり、通常は色で使用されますが、実際には任意のDrawableにすることができます。

ソースコードから、Toolbarのすぐ後ろに描かれていることがわかります。

//これは少し奇妙です。スクリムはツールバーの後ろにある必要があります（ツールバーが存在する場合）。
//しかし、その後ろにいる他の子供たちの前。これを行うために、インターセプトします
// drawChild（）を呼び出し、ツールバーを描画するときに最初にスクリムを描画します

https://Android.googlesource.com/platform/frameworks/support/+/refs/heads/master/design/src/Android/support/design/widget/CollapsingToolbarLayout.Java#271

したがって、「標準」のXMLレイアウトを実行することから始めると思います。
`コーディネーター-> AppBar-> CollapsingToolbar->ツールバー

次に、BitmapDrawableを指定してsetContentScrimを呼び出し、何が起こるかを確認します。

collapsingToolbar.setContentScrim(
                   context.getResources()
                     .getDrawable(R.drawable.something);

その後、正確に配置されているように見せるためにいくつかのジオメトリが必要になりますが、それは私の答えの範囲ではありません。 Twitterでも画像が少しぼやけているようですが、それは別の質問です（RenderScriptを使用してください）。

また、ビューをスクロールしている間、スクリムが動き続ける可能性があります。その場合は、描画位置をオフセットして適切に見えるようにするカスタム描画可能オブジェクトを作成する必要があります。しかし、それはすべて「たぶん」と「しかし」です。主なアイデアはそこにあります。

5
Budius