自定义ViewGroup_标题栏的悬浮吸顶渐变效果

之前帮朋友写了这样的一个效果：标题栏中的元素随着屏幕的滑动发生渐变的效果，有文字大小的渐变也有透明度和距离的渐变等，后面没有及时更新上来，今天补一下。效果图如下：

思路 + 原理

OK，先来说下思路，很容易就能想到图中渐变的效果是根据滑动监听一点点动态变化的，这里我们就可以监听NestedScrollView的滚动(or其他，我这里主页用的是NestedScrollView)。
原理：在FrameLayout中放一个LinearLayout，置于底部，然后设置LinearLayout距离顶部一段距离，假设marginTop是50dp，只要在监听滚动的时候动态改变这个marginTop的值就好了，这是整体LinearLayout上移的效果实现，至于文字的大小和透明度的改变，也是同样的原理，根据滚动距离做出同步修改即可。为了容易理解，我画了一张示意草图，看了即可一目了然。

OK，接下来放出xml的布局代码：

布局：

    

                ********//省略

    

    

        

            

            

                

                

            

            

                

                

            

        

    

接下来就是自定义最外层的FrameLayout了，前戏不多说了，直接上主要代码：

1、获取子控件，初始化相关变量

---

/**
 * 获取第一个childView转化为NestedScrollView
 */
NestedScrollView mSestedScrollView = (NestedScrollView) getChildAt(0);
/**
 * 获取第二个childView,也就是我们的Toolbar部分
 */
final ViewGroup mViewToolbarRoot = (ViewGroup) getChildAt(1);
final ViewGroup mViewChildRoot = (ViewGroup) mViewToolbarRoot.getChildAt(0);
final TextView mTvTitle = mViewChildRoot.findViewById(R.id.tv_title);
final TextView mTvScan = mViewChildRoot.findViewById(R.id.tv_scan);
final TextView mTvInvitation = mViewChildRoot.findViewById(R.id.tv_invitation);
/**
 * 获取整个状态栏的高度，用来控制一些其他变量
 */
final int mHeaderHeight = mViewToolbarRoot.getMeasuredHeight();
/**
 * 设置NestedScrollView的paddingTop值防止被mViewToolbarRoot遮盖
 */
mSestedScrollView.setPadding(getPaddingLeft(), getPaddingTop() + mHeaderHeight, getPaddingRight(), getPaddingBottom());
final FrameLayout.LayoutParams paramsChildRoot = (FrameLayout.LayoutParams) mViewChildRoot.getLayoutParams();
final LinearLayout.LayoutParams paramsChildTv = (LinearLayout.LayoutParams) mTvInvitation.getLayoutParams();

2、根据scrollY动态更新LayoutParams、透明度、文字大小等值

---

还记得我们那个50dp的topMaginHeight吧，这里就根据它的大小和scrollY作比较判断滚动距离，来确定是否需要渐变。
如果滑动距离大于topMaginHeight，状态固定，不做改变。

mTvScan.setAlpha(0);
mTvInvitation.setAlpha(0);
mTvTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize / 2);
paramsChildRoot.topMargin = 0;
mViewChildRoot.setLayoutParams(paramsChildRoot);
/**
 * 控制右边文字的移动
 */
paramsChildTv.topMargin = -mHeaderHeight;
mTvScan.setLayoutParams(paramsChildTv);
mTvInvitation.setLayoutParams(paramsChildTv);

当scrollY <= topMaginHeight时：

float scale = (float) scrollY / topMaginHeight;
/**
 * 控制右边文字的透明度
 */
mTvScan.setAlpha(1 - offset * scale);
mTvInvitation.setAlpha(1 - offset * scale);
/**
 * 控制标题文字的大小
 */
scale = (1 - scale) > 0.5f ? (1 - scale) : 0.5f;
mTvTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize * scale);
/**
 * 控制整个头布局的高度
 */
paramsChildRoot.topMargin = topMaginHeight - scrollY;
mViewChildRoot.setLayoutParams(paramsChildRoot);
/**
 * 控制右边文字的移动
 */
paramsChildTv.topMargin = (int) (-scrollY * offset + textMaginTop);
mTvScan.setLayoutParams(paramsChildTv);
mTvInvitation.setLayoutParams(paramsChildTv);

源码

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.widget.NestedScrollView;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;


/**
 * 自定义FrameLayout实现自定义伸缩及悬浮效果
 * 作者：zhuyong on 2019/3/31 20:21
 * 邮箱：[email protected]
 * 希望每天叫醒你的不是闹钟而是梦想
 */
public class CustomFrameLayout extends FrameLayout {

    private Context mContext;

    public CustomFrameLayout(@NonNull Context context) {
        this(context, null);
    }

    public CustomFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
    }

    private void initView() {

        /**
         * 获取第一个childView转化为NestedScrollView
         */
        NestedScrollView mSestedScrollView = (NestedScrollView) getChildAt(0);
        /**
         * 获取第二个childView,也就是我们的Toolbar部分
         */
        final ViewGroup mViewToolbarRoot = (ViewGroup) getChildAt(1);
        final ViewGroup mViewChildRoot = (ViewGroup) mViewToolbarRoot.getChildAt(0);
        final TextView mTvTitle = mViewChildRoot.findViewById(R.id.tv_title);
        final TextView mTvScan = mViewChildRoot.findViewById(R.id.tv_scan);
        final TextView mTvInvitation = mViewChildRoot.findViewById(R.id.tv_invitation);

        /**
         * 获取整个状态栏的高度，用来控制一些其他变量
         */
        final int mHeaderHeight = mViewToolbarRoot.getMeasuredHeight();

        /**
         * 设置NestedScrollView的paddingTop值防止被mViewToolbarRoot遮盖
         */
        mSestedScrollView.setPadding(getPaddingLeft(), getPaddingTop() + mHeaderHeight, getPaddingRight(), getPaddingBottom());

        final FrameLayout.LayoutParams paramsChildRoot = (FrameLayout.LayoutParams) mViewChildRoot.getLayoutParams();
        final LinearLayout.LayoutParams paramsChildTv = (LinearLayout.LayoutParams) mTvInvitation.getLayoutParams();

        final int textMaginTop = (int) mContext.getResources().getDimension(R.dimen.text_right_marginTop);//文字距离图标的距离
        final int topMaginHeight = (int) mContext.getResources().getDimension(R.dimen.child_root_marginTop);//标题距离顶部距离
        final float textSize = (int) mContext.getResources().getDimension(R.dimen.text_size_30sp);//标题文字大小

        if (topMaginHeight <= 0) {
            return;
        }

        //梯度值，用来调整相关的速度
        final float offset = 1.7f;

        mSestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView nestedScrollView, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {

                if (scrollY <= topMaginHeight) {

                    float scale = (float) scrollY / topMaginHeight;

                    /**
                     * 控制右边文字的透明度
                     */
                    mTvScan.setAlpha(1 - offset * scale);
                    mTvInvitation.setAlpha(1 - offset * scale);

                    /**
                     * 控制标题文字的大小
                     */
                    scale = (1 - scale) > 0.5f ? (1 - scale) : 0.5f;
                    mTvTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize * scale);

                    /**
                     * 控制整个头布局的高度
                     */
                    paramsChildRoot.topMargin = topMaginHeight - scrollY;
                    mViewChildRoot.setLayoutParams(paramsChildRoot);


                    /**
                     * 控制右边文字的移动
                     */
                    paramsChildTv.topMargin = (int) (-scrollY * offset + textMaginTop);
                    mTvScan.setLayoutParams(paramsChildTv);
                    mTvInvitation.setLayoutParams(paramsChildTv);

                } else {
                    /**
                     * 当滑动距离大于topMaginHeight，状态固定
                     */
                    mTvScan.setAlpha(0);
                    mTvInvitation.setAlpha(0);

                    mTvTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize / 2);

                    paramsChildRoot.topMargin = 0;
                    mViewChildRoot.setLayoutParams(paramsChildRoot);

                    /**
                     * 控制右边文字的移动
                     */
                    paramsChildTv.topMargin = -mHeaderHeight;
                    mTvScan.setLayoutParams(paramsChildTv);
                    mTvInvitation.setLayoutParams(paramsChildTv);

                }
            }
        });
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        /**
         * 在ViewGroup位置摆放完成之后，开始处理
         */
        initView();
    }
}