Android工具栏和用户图像animation像Twitter一样

我试图实现工具栏和用户图像animation,就像在Twitter的用户configuration文件中使用的那样。

我尝试了很多东西,但是我无法使用扩展后的某些背景快速locking屏幕顶部的折叠工具栏,并使用户图像位于工具栏上方,然后缩小并移动到下方滚动时的工具栏。

Twitter如何在用户个人资料图片中产生平滑的效果? 他们如何首先在工具栏的前面放置这个图像,然后在滚动的同时在工具栏下面实现这种平滑的效果?

我尝试了以下所有情况:

  • 带有视差效果的工具栏,带有CollapseParallaxMultiplier。
  • Pin工具栏设置高度100dp和minHeight?attr / actionBarSize。
  • 2个工具栏,一个带图像背景,另一个带透明背景色。
  • 缩小UserImage,然后移动Y位置(无法达到滚动时发送工具栏下的用户图像的效果)。

以前的这些scheme都不适合我。

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效果。

在这里输入图像说明

Solutions Collecting From Web of "Android工具栏和用户图像animation像Twitter一样"

我相信你正在尝试比应该更困难的事情

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布局开始吧:
协调员 – >应用程序栏 – > CollapsingToolbar – >工具栏

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

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

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

此外,可能是在您滚动视图时,网格布保持移动,那么您可能需要创build一个自定义的可绘制对象,以便您可以偏移绘图位置,使其看起来合适。 但这就是“maybes”和“buts”。 主要的想法是在那里。

你可以试试下面的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

有关更多详细信息,请参阅此链接 。