Android工具栏和类似Twitter的用户图像动画 [英] Android Toolbar and User Image Animation Like Twitter

问题描述

我正在尝试实现工具栏和用户图片动画，就像Twitter用户个人资料中使用的那样.

I'm trying to achieve the toolbar and User image animation like the one that is used in Twitter's user profile.

我做了很多尝试，但无法快速将折叠的工具栏固定在屏幕顶部，并且具有展开时的背景，并且先将用户图像放在工具栏上方，然后进行了缩小并在滚动时移动到工具栏下方.

I tried a lot of things but I cannot achieve pinning the collapsed toolbar at the top of the screen quickly with the some background it had when it was expanded and making the User Image be first above the toolbar and then make a scale down and move below the toolbar while scrolling.

twitter如何在用户个人资料"图像中产生平滑效果?他们如何首先在工具栏前放置此图像，然后在滚动时又向后移，并在工具栏下方获得平滑的效果?

How does twitter make the smooth effect in the User Profile image? How they first have this image in front of the toolbar and then while scrolling goes behind and achieve that smooth effect going below the toolbar?

我尝试了以下所有情况:

I tried all the following scenarios:

• 具有CollapseParallaxMultiplier的视差效果的工具栏.
• 将工具栏设置为高度100dp和minHeight?attr/actionBarSize.
• 2个工具栏，一个带有图像背景，另一个带有透明背景色.
• 先调用UserImage，然后再移动Y位置(滚动时无法达到在工具栏下方发送User Image的效果).

以前的情况对我来说都不行.

None of the previous scenarios worked well for me.

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对用户个人资料活动的影响.

Attached you can see the Twitter effect on the user profile activity.

推荐答案

我相信您正在尝试的难度比

I believe you're trying more difficult than it should be

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

CollapsingToolbarLayout have this contentScrim element that is normally used with a color, but in reality it can be any Drawable.

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

From the source code you can see that it's drawn directly behind the Toolbar

//这有点奇怪.我们的稀松布需要放在工具栏的后面(如果有)，
//，但在其后面的任何其他子项之前.为此，我们拦截了
//drawChild()调用，并在绘制工具栏时先绘制稀松布

// This is a little weird. Our scrim needs to be behind the Toolbar (if it is present),
// but in front of any other children which are behind it. To do this we intercept the
// drawChild() call, and draw our scrim first when drawing the toolbar

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

所以我想您首先进行标准" XML布局:
`Coordinator-> AppBar-> CollapsingToolbar-> Toolbar

So I guess you start by doing the "standard" XML layout:
`Coordinator -> AppBar -> CollapsingToolbar -> Toolbar

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

and then call setContentScrim with some BitmapDrawable just to see what happens.

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

之后，您将需要一些几何形状以使其看起来完全正确，但这不是我的答案的范围.似乎Twitter也使图像有些模糊，但这是一个不同的问题(使用RenderScript).

After that you'll need some geometry to make it look like exactly in place, but it's not scope of my answer. It seems that twitter also makes the image a bit blurred, but then it's a different question (use RenderScript).

此外，滚动视图时稀松布可能会一直移动，那么您可能需要创建一个自定义可绘制对象，以允许您偏移绘图位置以使其看起来正确.但这就是所有的也许"和但是".主要思想就在那里.

Also, it might be that the scrim keeps moving while you scroll the view, then you'll might need to create a custom drawable that will allow you to offset the drawing position to make it look proper. But that's all "maybes" and "buts". The main idea is there.

这篇关于Android工具栏和类似Twitter的用户图像动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！