使用自定义视图CollapsingToolbarLayout

我正在尝试使用自定义视图实现CollapsingToolbarLayout,但我无法执行此操作:

我想做什么(对不起,我不能发布图片所以它是imgur):

展开后,标题是带有图像和标题的配置文件屏幕

在此处输入图像描述

未展开(滚动),图像和标题将在工具栏

在此处输入图像描述

但是我看到的一切都没有按照我的预期运作

我是新手和棒棒糖animation,所以如果有人能帮助我,我将非常感激!

(我不发布示例代码,因为我没有与post相关的内容)

我的解决方案

我有相同的场景要实现,所以我从狗的例子开始,并做了一些改变,使它像你描述的那样工作。 我的代码可以作为该项目的分支find,请参阅https://github.com/hanscappelle/CoordinatorBehaviorExample

在此处输入图像描述 在此处输入图像描述

最重要的变化在于布局:

                      

并且在我优化的AvatarImageBehaviour类中,仅将头像从原始位置移动到属性中配置的位置。 因此,如果您希望图像从其他位置移动,只需在布局中移动它即可。 当你这样做时,确保AppBarLayout仍然是它的兄弟,否则它将无法在代码中find。

 package saulmm.myapplication; import android.content.Context; import android.content.res.TypedArray; import android.support.design.widget.AppBarLayout; import android.support.design.widget.CoordinatorLayout; import android.util.AttributeSet; import android.view.View; import de.hdodenhof.circleimageview.CircleImageView; public class AvatarImageBehavior extends CoordinatorLayout.Behavior { // calculated from given layout private int startXPositionImage; private int startYPositionImage; private int startHeight; private int startToolbarHeight; private boolean initialised = false; private float amountOfToolbarToMove; private float amountOfImageToReduce; private float amountToMoveXPosition; private float amountToMoveYPosition; // user configured params private float finalToolbarHeight, finalXPosition, finalYPosition, finalHeight; public AvatarImageBehavior( final Context context, final AttributeSet attrs) { if (attrs != null) { TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AvatarImageBehavior); finalXPosition = a.getDimension(R.styleable.AvatarImageBehavior_finalXPosition, 0); finalYPosition = a.getDimension(R.styleable.AvatarImageBehavior_finalYPosition, 0); finalHeight = a.getDimension(R.styleable.AvatarImageBehavior_finalHeight, 0); finalToolbarHeight = a.getDimension(R.styleable.AvatarImageBehavior_finalToolbarHeight, 0); a.recycle(); } } @Override public boolean layoutDependsOn( final CoordinatorLayout parent, final CircleImageView child, final View dependency) { return dependency instanceof AppBarLayout; // change if you want another sibling to depend on } @Override public boolean onDependentViewChanged( final CoordinatorLayout parent, final CircleImageView child, final View dependency) { // make child (avatar) change in relation to dependency (toolbar) in both size and position, init with properties from layout initProperties(child, dependency); // calculate progress of movement of dependency float currentToolbarHeight = startToolbarHeight + dependency.getY(); // current expanded height of toolbar // don't go below configured min height for calculations (it does go passed the toolbar) currentToolbarHeight = currentToolbarHeight < finalToolbarHeight ? finalToolbarHeight : currentToolbarHeight; final float amountAlreadyMoved = startToolbarHeight - currentToolbarHeight; final float progress = 100 * amountAlreadyMoved / amountOfToolbarToMove; // how much % of expand we reached // update image size final float heightToSubtract = progress * amountOfImageToReduce / 100; CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams(); lp.width = (int) (startHeight - heightToSubtract); lp.height = (int) (startHeight - heightToSubtract); child.setLayoutParams(lp); // update image position final float distanceXToSubtract = progress * amountToMoveXPosition / 100; final float distanceYToSubtract = progress * amountToMoveYPosition / 100; float newXPosition = startXPositionImage - distanceXToSubtract; //newXPosition = newXPosition < endXPosition ? endXPosition : newXPosition; // don't go passed end position child.setX(newXPosition); child.setY(startYPositionImage - distanceYToSubtract); return true; } private void initProperties( final CircleImageView child, final View dependency) { if (!initialised) { // form initial layout startHeight = child.getHeight(); startXPositionImage = (int) child.getX(); startYPositionImage = (int) child.getY(); startToolbarHeight = dependency.getHeight(); // some calculated fields amountOfToolbarToMove = startToolbarHeight - finalToolbarHeight; amountOfImageToReduce = startHeight - finalHeight; amountToMoveXPosition = startXPositionImage - finalXPosition; amountToMoveYPosition = startYPositionImage - finalYPosition; initialised = true; } } } 

来源

最常见的例子是在https://github.com/saulmm/CoordinatorBehaviorExample上列出的狗。 这是一个很好的例子,但实际上工具栏位于展开视图的中间,背景图像也会移动。 在我的例子中删除了所有内容。

另一种解释可以在http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html上find,但由于参考的云/海背景图像也可以在狗示例中find,因此显然可以在另一个的顶部。

我也发现了这个SO问题并获得了赏金,但无法真正find最终解决方案是什么在CollapsingToolbarLayout中添加带标题的图标

最后,这应该是一个完成工作的工作库。 我已经检查过了,但是初始图像并没有居中,我宁愿研究之前看过的狗的例子。 请参阅https://github.com/datalink747/CollapsingAvatarToolbar

更多阅读

http://saulmm.github.io/mastering-coordinator http://www.androidauthority.com/using-coordinatorlayout-android-apps-703720/ https://developer.android.com/reference/android/support/design /widget/CoordinatorLayout.html https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout

您可以使用Saul MM的此代码示例https://github.com/saulmm/CoordinatorBehaviorExample来实现此效果。 代码太大而无法粘贴到此处,因此不会粘贴任何代码。 希望这对你有所帮助。

您可以使用此库 ,它非常灵活,您可以在其页面上获得说明。