17

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

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

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

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

  • CollapseParallaxMultiplier を使用した視差効果のあるツールバー。
  • ピン ツールバー設定の高さ 100dp および minHeight ?attr/actionBarSize。
  • 2 つのツールバー。1 つはイメージの背景を持ち、もう 1 つは透明な背景色でピン留めします。
  • UserImage のスケーリングと Y 位置の移動 (スクロール時にツールバーの下にユーザー イメージを送信する効果を実現できません) がスムーズに行われます。

以前のシナリオはどれもうまくいきませんでした。

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 の影響を確認できます。

ここに画像の説明を入力

4

2 に答える 2

5

あなたは必要以上に頑張っていると思います

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 レイアウトを実行することから始めると思います:
`Coordinator -> AppBar -> CollapsingToolbar -> Toolbar

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

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

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

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

于 2016-05-04T21:39:29.950 に答える
-1

以下のxmlファイルを試すことができます：

<android.support.design.widget.CoordinatorLayout >
     <android.support.design.widget.AppBarLayout>
         <android.support.design.widget.CollapsingToolbarLayout
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">
             <ImageView
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin" />
         </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

      <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>

また、Palleteを使用してCollapsingToolbarに視差カラーを追加します。

詳細については、このリンクを参照してください。

于 2016-05-11T05:24:37.043 に答える