一、前言

全部都是通过自定义 behavior 来实现的，比较有局限性，不了解自定义 behavior 的话，无法自定义动画效果和位置。这里暂时收集集中效果还不错的实现。

二、第一种

效果图：
iShot2020-08-2318.47.55.gif
布局：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     xmlns:app="http://schemas.android.com/apk/res-auto"
  6.     android:fitsSystemWindows="true">
  8.     <com.google.android.material.appbar.AppBarLayout
  9.         android:id="@+id/appbar_header_scroll_appbar"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="240dp"
  12.         android:theme="@style/AppTheme.AppBarOverlay"
  13.         android:fitsSystemWindows="true">
  15.         <com.google.android.material.appbar.CollapsingToolbarLayout
  16.             android:id="@+id/ctl_header_scroll_collapsing"
  17.             android:layout_width="match_parent"
  18.             android:layout_height="match_parent"
  19.             app:contentScrim="@color/blue_74D3FF"
  20.             app:layout_scrollFlags="scroll|exitUntilCollapsed"
  21.             android:fitsSystemWindows="true">
  22.             <ImageView
  23.                 android:layout_width="match_parent"
  24.                 android:layout_height="match_parent"
  25.                 android:scaleType="centerCrop"
  26.                 android:src="@drawable/ic_user_center_appbar_iv"
  27.                 app:layout_collapseMode="parallax"
  28.                 android:fitsSystemWindows="true"/>
  29.             <androidx.appcompat.widget.Toolbar
  30.                 android:id="@+id/ctl_header_scroll_toolbar"
  31.                 android:layout_width="match_parent"
  32.                 android:layout_height="?attr/actionBarSize"
  33.                 app:layout_collapseMode="pin"
  34.                 app:navigationIcon="?attr/homeAsUpIndicator"
  35.                 app:popupTheme="@style/AppTheme.PopupOverlay">
  37.                 <RelativeLayout
  38.                     android:layout_width="match_parent"
  39.                     android:layout_height="?attr/actionBarSize">
  41.                     <TextView
  42.                         android:id="@+id/tv_header_scroll_title"
  43.                         style="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"
  44.                         android:layout_width="wrap_content"
  45.                         android:layout_height="wrap_content"
  46.                         android:layout_alignParentLeft="true"
  47.                         android:layout_centerVertical="true"
  48.                         android:text="个人信息"/>
  50.                     <ImageButton
  51.                         android:id="@+id/ibtn_header_scroll_titleico"
  52.                         android:layout_width="32dp"
  53.                         android:layout_height="32dp"
  54.                         android:layout_alignParentRight="true"
  55.                         android:layout_centerVertical="true"
  56.                         android:layout_marginRight="@dimen/activity_horizontal_margin"
  57.                         android:background="@drawable/usercenter_avator_bg"
  58.                         android:padding="2dp"
  59.                         android:scaleType="fitCenter"
  60.                         android:src="@drawable/avator_default"/>
  62.                 </RelativeLayout>
  65.             </androidx.appcompat.widget.Toolbar>
  68.         </com.google.android.material.appbar.CollapsingToolbarLayout>
  72.     </com.google.android.material.appbar.AppBarLayout>
  74.     <ImageButton
  75.         android:id="@+id/ibtn_header_scroll_icon"
  76.         android:layout_width="70dp"
  77.         android:layout_height="70dp"
  78.         android:background="@drawable/usercenter_avator_bg"
  79.         android:padding="2dp"
  80.         android:scaleType="fitCenter"
  81.         android:src="@drawable/avator_default"
  82.         app:layout_behavior=".design.behavior.header.UserInfoImageButtonBehavior"/>
  84.     <TextView
  85.         android:id="@+id/tv_header_scroll_nick"
  86.         android:layout_width="wrap_content"
  87.         android:layout_height="wrap_content"
  88.         android:maxLines="1"
  89.         android:paddingTop="32dp"
  90.         android:text="NickName"
  91.         android:textColor="@android:color/white"
  92.         android:textSize="16sp"
  93.         app:layout_anchor="@id/ibtn_header_scroll_icon"
  94.         app:layout_anchorGravity="bottom|center_horizontal"/>
  96.     <include layout="@layout/content_scrolling"/>
  100. </androidx.coordinatorlayout.widget.CoordinatorLayout>

activity:

  1. class HeaderScrollActivity: AppCompatActivity(R.layout.activity_header_scroll) {
  2.     override fun onCreate(savedInstanceState: Bundle?) {
  3.         super.onCreate(savedInstanceState)
  6.         StatusBarUtils.initStatusBarStyle(this,false)
  7.         appbar_header_scroll_appbar.addOnOffsetChangedListener(object : AppBarStateChangeListener(){
  8.             override fun onStateChanged(appBarLayout: AppBarLayout?, state: State?, verticalOffset: Int) {
  10.             }
  12.             override fun onStateChangedAny(appBarLayout: AppBarLayout?, verticalOffset: Int) {
  13.                 super.onStateChangedAny(appBarLayout, verticalOffset)
  14.                 val total = appBarLayout!!.totalScrollRange * 1.0f
  15.                 //计算出滑动百分比
  16.                 //计算出滑动百分比
  17.                 val p: Float = Math.abs(verticalOffset) / total//折叠时是 1,展开时是 0
  18.                 if (p > 0.5) {
  19.                     tv_header_scroll_title.alpha = 1.0f / 0.5f * (p - 0.5f)
  20.                     tv_header_scroll_nick.alpha = 0f
  21.                 } else {
  22.                     tv_header_scroll_title.alpha = 0f
  23.                     tv_header_scroll_nick.alpha = 1.0f - 1.0f / 0.5f * p
  24.                 }
  25.                 ibtn_header_scroll_titleico.visibility = if (p == 1f) View.VISIBLE else View.INVISIBLE
  27.             }
  28.         })
  30.     }
  31. }

behavior:

  1. public class UserInfoImageButtonBehavior extends CoordinatorLayout.Behavior<ImageButton> {
  2.     private String TAG = getClass().getSimpleName();
  3.     private int maxScrollDistance;
  4.     private float maxChildWidth;
  5.     private float minChildWidth;
  7.     private int toolbarHeight;
  8.     private int statusBarHeight;
  9.     private int appbarStartPoint;
  10.     private int marginRight;
  12.     @SuppressLint("PrivateResource")
  13.     public UserInfoImageButtonBehavior(Context context, AttributeSet attrs) {
  14.         super(context, attrs);
  15.         //计算出头像的最小宽度
  16.         minChildWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, context.getResources()
  17.                 .getDisplayMetrics());
  18.         //计算出toolbar的高度
  19.         toolbarHeight = context.getResources().getDimensionPixelSize(R.dimen
  20.                 .abc_action_bar_default_height_material);
  21.         //计算出状态栏的高度
  22.         statusBarHeight = StatusBarUtils.getStatusBarHeight(context);
  23.         //计算出头像居右的距离
  24.         marginRight = context.getResources().getDimensionPixelSize(R.dimen.activity_horizontal_margin);
  25.         //marginRight = 0;
  26.     }
  28.     @Override
  29.     public boolean layoutDependsOn(CoordinatorLayout parent, ImageButton child, View dependency) {
  30. //        Log.d(TAG, "layoutDependsOn");
  31.         //确定依赖关系，这里我们用作头像的ImageButton相依赖的是AppBarLayout，也就是ImageButton跟着AppBarLayout的变化而变化。
  32.         return dependency instanceof AppBarLayout;
  33.     }
  35.     private int startX;
  36.     private int startY;
  38.     @Override
  39.     public boolean onDependentViewChanged(CoordinatorLayout parent, ImageButton child, View dependency) {
  40.         //这里的dependency就是布局中的AppBarLayout，child即显示的头像
  41.         if (maxScrollDistance == 0) {
  42.             //也就是第一次进来时，计算出AppBarLayout的最大垂直变化距离
  43.             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
  44.                 maxScrollDistance = dependency.getBottom() - toolbarHeight - statusBarHeight - statusBarHeight;
  45.             else
  46.                 maxScrollDistance = dependency.getBottom() - toolbarHeight;
  47.         }
  48.         //计算出appbar的开始的y坐标
  49.         if (appbarStartPoint == 0)
  50.             appbarStartPoint = dependency.getBottom();
  51.         //计算出头像的宽度
  52.         if (maxChildWidth == 0)
  53.             maxChildWidth = Math.min(child.getWidth(), child.getHeight());
  54.         //计算出头像的起始x坐标
  55.         if (startX == 0)
  56.             startX = (int) (dependency.getWidth() / 2 - maxChildWidth / 2);
  57.         //计算出头像的起始y坐标
  58.         if (startY == 0)
  59.             startY = (int) (dependency.getBottom() - maxScrollDistance / 2 - maxChildWidth / 2 - toolbarHeight / 2);
  60.         //计算出appbar已经变化距离的百分比，起始位置y减去当前位置y，然后除以最大距离
  61.         float expandedPercentageFactor = (appbarStartPoint - dependency.getBottom()) * 1.0f /
  62.                 (maxScrollDistance * 1.0f);
  63.         //根据上面计算出的百分比，计算出头像应该移动的y距离,通过百分比乘以最大距离
  64.         float moveY = expandedPercentageFactor * (maxScrollDistance - (appbarStartPoint - startY - toolbarHeight / 2
  65.                 - minChildWidth / 2));
  66.         //根据上面计算出的百分比，计算出头像应该移动的y距离
  67.         float moveX = expandedPercentageFactor * (startX + maxChildWidth - marginRight - minChildWidth);
  68.         //更新头像的位置
  69.         child.setX(startX + moveX);
  70.         child.setY(startY - moveY);
  71.         //计算出当前头像的宽度
  72.         float nowWidth = maxChildWidth - ((maxChildWidth - minChildWidth) * expandedPercentageFactor);
  73.         //更新头像的宽高
  74.         CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
  75.         params.height = params.width = (int) nowWidth;
  76.         child.setLayoutParams(params);
  77.         return true;
  78.     }
  79. }

三、第二种

效果图：
iShot2020-08-2318.52.07.gif
布局：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     xmlns:app="http://schemas.android.com/apk/res-auto">
  7.     <com.google.android.material.appbar.AppBarLayout
  8.         android:id="@+id/appbar_header2_appbar"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  13.         <com.google.android.material.appbar.CollapsingToolbarLayout
  14.             android:id="@+id/ctl_header2_collapsing"
  15.             android:layout_width="match_parent"
  16.             android:layout_height="match_parent"
  17.             app:contentScrim="@color/colorPrimary"
  18.             app:expandedTitleGravity="bottom|center_horizontal"
  19.             app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
  21.             <ImageView
  22.                 android:id="@+id/iv_head"
  23.                 android:layout_width="match_parent"
  24.                 android:layout_height="200dp"
  25.                 android:scaleType="fitXY"
  26.                 android:src="@drawable/ic_user_center_appbar_iv"
  27.                 app:layout_collapseMode="parallax"
  28.                 app:layout_collapseParallaxMultiplier="0.6"/>
  30.             <!-- 设置app:navigationIcon="@android:color/transparent"给头像预留位置 -->
  31.             <androidx.appcompat.widget.Toolbar
  32.                 android:id="@+id/tb_header2_toolbar"
  33.                 android:layout_width="match_parent"
  34.                 android:layout_height="@dimen/toolbar_height"
  35.                 app:layout_collapseMode="pin"
  36.                 app:navigationIcon="@android:color/transparent"
  37.                 app:theme="@style/ThemeOverlay.AppCompat.Dark"
  38.                 app:title="Tom Hardy"/>
  40.         </com.google.android.material.appbar.CollapsingToolbarLayout>
  43.     </com.google.android.material.appbar.AppBarLayout>
  46.     <include layout="@layout/content_scrolling"/>
  49.     <!-- layout_anchor属性5.0以上需要设置为CollapsingToolbarLayout，不然头像最后会被覆盖 -->
  50.     <de.hdodenhof.circleimageview.CircleImageView
  51.         android:layout_width="100dp"
  52.         android:layout_height="100dp"
  53.         android:layout_margin="16dp"
  54.         android:src="@drawable/avator_default"
  55.         app:civ_border_color="@color/white"
  56.         app:civ_border_width="1dp"
  57.         app:layout_anchor="@id/ctl_header2_collapsing"
  58.         app:layout_anchorGravity="bottom|right"
  59.         app:layout_behavior=".design.behavior.header.AvatarBehavior"/>
  64. </androidx.coordinatorlayout.widget.CoordinatorLayout>

activity: 什么都不用做
behavior:

  1. public class AvatarBehavior extends CoordinatorLayout.Behavior<CircleImageView> {
  3.     // 缩放动画变化的支点
  4.     private static final float ANIM_CHANGE_POINT = 0.2f;
  6.     private Context mContext;
  7.     // 整个滚动的范围
  8.     private int mTotalScrollRange;
  9.     // AppBarLayout高度
  10.     private int mAppBarHeight;
  11.     // AppBarLayout宽度
  12.     private int mAppBarWidth;
  13.     // 控件原始大小
  14.     private int mOriginalSize;
  15.     // 控件最终大小
  16.     private int mFinalSize;
  17.     // 控件最终缩放的尺寸,设置坐标值需要算上该值
  18.     private float mScaleSize;
  19.     // 原始x坐标
  20.     private float mOriginalX;
  21.     // 最终x坐标
  22.     private float mFinalX;
  23.     // 起始y坐标
  24.     private float mOriginalY;
  25.     // 最终y坐标
  26.     private float mFinalY;
  27.     // ToolBar高度
  28.     private int mToolBarHeight;
  29.     // AppBar的起始Y坐标
  30.     private float mAppBarStartY;
  31.     // 滚动执行百分比[0~1]
  32.     private float mPercent;
  33.     // Y轴移动插值器
  34.     private DecelerateInterpolator mMoveYInterpolator;
  35.     // X轴移动插值器
  36.     private AccelerateInterpolator mMoveXInterpolator;
  37.     // 最终变换的视图，因为在5.0以上AppBarLayout在收缩到最终状态会覆盖变换后的视图，所以添加一个最终显示的图片
  38.     private CircleImageView mFinalView;
  39.     // 最终变换的视图离底部的大小
  40.     private int mFinalViewMarginBottom;
  43.     public AvatarBehavior(Context context, AttributeSet attrs) {
  44.         super(context, attrs);
  45.         mContext = context;
  46.         mMoveYInterpolator = new DecelerateInterpolator();
  47.         mMoveXInterpolator = new AccelerateInterpolator();
  48.         if (attrs != null) {
  49.             TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.AvatarImageBehavior);
  50.             mFinalSize = (int) a.getDimension(R.styleable.AvatarImageBehavior_finalSize, 0);
  51.             mFinalX = a.getDimension(R.styleable.AvatarImageBehavior_finalX, 0);
  52.             mToolBarHeight = (int) a.getDimension(R.styleable.AvatarImageBehavior_toolBarHeight, 0);
  53.             a.recycle();
  54.         }
  55.     }
  57.     @Override
  58.     public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {
  59.         return dependency instanceof AppBarLayout;
  60.     }
  62.     @Override
  63.     public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
  65.         if (dependency instanceof AppBarLayout) {
  66.             _initVariables(child, dependency);
  68.             mPercent = (mAppBarStartY - dependency.getY()) * 1.0f / mTotalScrollRange;
  70.             float percentY = mMoveYInterpolator.getInterpolation(mPercent);
  71.             AnimHelper.setViewY(child, mOriginalY, mFinalY - mScaleSize, percentY);
  73.             if (mPercent > ANIM_CHANGE_POINT) {
  74.                 float scalePercent = (mPercent - ANIM_CHANGE_POINT) / (1 - ANIM_CHANGE_POINT);
  75.                 float percentX = mMoveXInterpolator.getInterpolation(scalePercent);
  76.                 AnimHelper.scaleView(child, mOriginalSize, mFinalSize, scalePercent);
  77.                 AnimHelper.setViewX(child, mOriginalX, mFinalX - mScaleSize, percentX);
  78.             } else {
  79.                 AnimHelper.scaleView(child, mOriginalSize, mFinalSize, 0);
  80.                 AnimHelper.setViewX(child, mOriginalX, mFinalX - mScaleSize, 0);
  81.             }
  82.             if (mFinalView != null) {
  83.                 if (percentY == 1.0f) {
  84.                     // 滚动到顶时才显示
  85.                     mFinalView.setVisibility(View.VISIBLE);
  86.                 } else {
  87.                     mFinalView.setVisibility(View.GONE);
  88.                 }
  89.             }
  90.         } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && dependency instanceof CollapsingToolbarLayout) {
  91.             // 大于5.0才生成新的最终的头像，因为5.0以上AppBarLayout会覆盖变换后的头像
  92.             if (mFinalView == null && mFinalSize != 0 && mFinalX != 0 && mFinalViewMarginBottom != 0) {
  93.                 mFinalView = new CircleImageView(mContext);
  94.                 mFinalView.setVisibility(View.GONE);
  95.                 // 添加为CollapsingToolbarLayout子视图
  96.                 ((CollapsingToolbarLayout) dependency).addView(mFinalView);
  97.                 FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) mFinalView.getLayoutParams();
  98.                 // 设置大小
  99.                 params.width = mFinalSize;
  100.                 params.height = mFinalSize;
  101.                 // 设置位置，最后显示时相当于变换后的头像位置
  102.                 params.gravity = Gravity.BOTTOM;
  103.                 params.leftMargin = (int) mFinalX;
  104.                 params.bottomMargin = mFinalViewMarginBottom;
  105.                 mFinalView.setLayoutParams(params);
  106.                 mFinalView.setImageDrawable(child.getDrawable());
  107.                 mFinalView.setBorderColor(child.getBorderColor());
  108.                 int borderWidth = (int) ((mFinalSize * 1.0f / mOriginalSize) * child.getBorderWidth());
  109.                 mFinalView.setBorderWidth(borderWidth);
  110.             }
  111.         }
  113.         return true;
  114.     }
  116.     /**
  117.      * 初始化变量
  118.      * @param child
  119.      * @param dependency
  120.      */
  121.     private void _initVariables(CircleImageView child, View dependency) {
  122.         if (mAppBarHeight == 0) {
  123.             mAppBarHeight = dependency.getHeight();
  124.             mAppBarStartY = dependency.getY();
  125.         }
  126.         if (mTotalScrollRange == 0) {
  127.             mTotalScrollRange = ((AppBarLayout) dependency).getTotalScrollRange();
  128.         }
  129.         if (mOriginalSize == 0) {
  130.             mOriginalSize = child.getWidth();
  131.         }
  132.         if (mFinalSize == 0) {
  133.             mFinalSize = mContext.getResources().getDimensionPixelSize(R.dimen.avatar_final_size);
  134.         }
  135.         if (mAppBarWidth == 0) {
  136.             mAppBarWidth = dependency.getWidth();
  137.         }
  138.         if (mOriginalX == 0) {
  139.             mOriginalX = child.getX();
  140.         }
  141.         if (mFinalX == 0) {
  142.             mFinalX = mContext.getResources().getDimensionPixelSize(R.dimen.avatar_final_x);
  143.         }
  144.         if (mOriginalY == 0) {
  145.             mOriginalY = child.getY();
  146.         }
  147.         if (mFinalY == 0) {
  148.             if (mToolBarHeight == 0) {
  149.                 mToolBarHeight = mContext.getResources().getDimensionPixelSize(R.dimen.toolbar_height);
  150.             }
  151.             mFinalY = (mToolBarHeight - mFinalSize) / 2 + mAppBarStartY;
  152.         }
  153.         if (mScaleSize == 0) {
  154.             mScaleSize = (mOriginalSize - mFinalSize) * 1.0f / 2;
  155.         }
  156.         if (mFinalViewMarginBottom == 0) {
  157.             mFinalViewMarginBottom = (mToolBarHeight - mFinalSize) / 2;
  158.         }
  159.     }
  160. }

三、地址和参考

demo
Coordinator Behavior example
CoordinatorLayout自定义Behavior的运用
CoordinatorLayout与Behavior的实际使用(二)