我正在尝试实现类似于Twitter用户个人资料中使用的工具栏和用户图像动画。
我尝试了很多方法,但无法快速将折叠的工具栏固定在屏幕顶部,并使其在展开时具有与之前相同的背景,同时使用户图像首先位于工具栏上方,然后在滚动时缩小并移动到工具栏下方。
Twitter如何使用户个人资料图像出现平滑效果?他们如何先让这个图像在工具栏前面,然后在滚动时移到后面并实现在工具栏下方的平滑效果?
我尝试了以下所有情况:
- 带有CollapseParallaxMultiplier的视差效果的工具栏。
- 将工具栏设置为高度100dp并将minHeight设置为?attr/actionBarSize。
- 两个工具栏,一个带有图像背景,另一个用透明背景颜色固定它。
- 缩放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对用户个人资料活动的影响。