Android 工具栏和用户图像动画，如 Twitter

Question

我正在尝试实现 工具栏 和用户图像动画，就像在 Twitter 的用户个人资料中使用的那样。

我尝试了很多东西，但我无法将折叠的工具栏快速固定在屏幕顶部，并在它展开时具有一些背景，并使用户图像首先位于工具栏上方，然后缩小并在滚动时移动到工具栏下方。

twitter 是如何在用户头像中做出平滑效果的？他们如何首先将这个图像放在工具栏的前面，然后在滚动到后面并在工具栏下方实现平滑的效果？

我尝试了以下所有场景:

• 具有 CollapseParallaxMultiplier 视差效果的工具栏。
• Pin Toolbar 设置高度 100dp 和 minHeight ?attr/actionBarSize。
• 2 个工具栏，一个带有图像背景，另一个带有透明背景颜色。
• Scalling 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 对用户个人资料 Activity 的影响。

Answer 1

我相信你的尝试比应有的更困难

CollapsingToolbarLayout 有这个通常与颜色一起使用的 contentScrim 元素，但实际上它可以是任何 Drawable。

从源码中可以看到直接绘制在Toolbar

的后面

// This is a little weird. Our scrim needs to be behind the Toolbar (if it is present),
// but in front of any other children which are behind it. To do this we intercept the
// drawChild() call, and draw our scrim first when drawing the toolbar

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

所以我猜你从做“标准”XML 布局开始:
`Coordinator -> AppBar -> CollapsingToolbar -> Toolbar

然后用一些 BitmapDrawable 调用 setContentScrim 来看看会发生什么。

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

之后，您将需要一些几何形状以使其看起来完全到位，但这不是我回答的范围。看来 twitter 也让图像有点模糊，但这是一个不同的问题(使用 RenderScript)。

另外，当您 ScrollView 时，稀松布可能会继续移动，那么您可能需要创建一个自定义可绘制对象，以允许您偏移绘图位置以使其看起来正确。但这都是“也许”和“但是”。主要思想就在那里。