17

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

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

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

我尝试了以下所有场景：

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

在此处输入图像描述

4

2 回答 2

5

我相信你尝试的难度超出了应有的程度

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

从源代码中可以看到它是直接画在后面的Toolbar

// 这有点奇怪。我们的 scrim 需要在 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 -> 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 回答