Android工具栏和用户图像动画就像Twitter一样

Question

我正在尝试实现工具栏和用户图像动画,就像在Twitter的用户配置文件中使用的那样.

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

twitter如何在用户个人资料图片中产生流畅的效果？他们如何首先在工具栏前面放置这个图像,然后滚动后面并在工具栏下方实现平滑效果？

我尝试了以下所有方案:

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

Answer 1

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

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

从源代码中你可以看到它直接在后面绘制 Toolbar

//这有点奇怪 我们的稀松布需要在工具栏后面(如果它存在),
//但是在其后面的任何其他孩子面前.为此,我们拦截
// drawChild()调用,并在绘制工具栏时首先绘制我们的scrim

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

所以我猜你从做"标准"XML布局开始:
`Coordinator - > AppBar - > CollapsingToolbar - >工具栏

然后调用setContentScrim一些BitmapDrawable只是为了看看会发生什么.

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

在那之后你需要一些几何图形来使它看起来完全到位,但这不是我的答案的范围.似乎twitter也使图像有点模糊,但这是一个不同的问题(使用RenderScript).

此外,当你滚动视图时,可能是稀松布一直在移动,然后你可能需要创建一个自定义drawable,它允许你偏移绘图位置使它看起来正确.但那都是"maybes"和"buts".主要的想法是那里.