安卓工具栏和用户头像动画类似于Twitter

Question

安卓工具栏和用户头像动画类似于Twitter

androidandroid-animationandroid-toolbarandroid-coordinatorlayoutandroid-twitter

18

我正在尝试实现类似于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对用户个人资料活动的影响。

- JpCrow

你制作了这个效果吗？ - mio4kon

@mio4kon 不，实现了类似的效果但不是这个 :( - JpCrow

你实现了滚动效果吗？首先，带有标题图像的工具栏会折叠，然后用户信息也会折叠，选项卡布局固定在工具栏下方。 - Ralph

很抱歉，@Ralph，没有。 - JpCrow

我已经搜索了一整天，但仍然无法实现它 :( 感谢您的回复！ - Ralph

2个回答

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

同时使用调色板为可折叠工具栏添加视差颜色。

如需更多详细信息，请参考链接。

- Mehta

谢谢，但那不是我想要实现的。那只是一个普通而漂亮的例子。:D - JpCrow

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Budius · Accepted Answer

我认为你正在比必要的更加努力。

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）。此外，当你滚动视图时，可能会发现蒙版仍在移动，那么你可能需要创建一个自定义可绘制对象，以允许你偏移绘制位置，使其看起来正确。但这都是“可能”的和“但是”的事情。主要思想已经表达清楚了。