TransparentToolBar 一个简单随着滚动控件滚动，不断改变颜色透明度的ToolBar

一个简单随着滚动控件滚动，不断改变颜色透明度的ToolBar

Demo下载：我的Github TransparentToolBar

TransparentToolBar它是一个跟随滚动控件：例如ScrollView，RecyclerView这样的控件，跟随滚动不断改变自身背景色的透明度。

既然要跟随变化，就必须获取到滚动控件的top值做为计算参数。

所以，需要设置滚动控件的ScrollChangeListener之类的方法获取到最新top值，或者在自定义View中获取top值。

TransparentToolBar设计起来非常简单，核心就是：根据一个最大偏移量与滚动控件的top值计算出百分比0~1，来改变背景色透明度alpha值，
再合成新的颜色，设置到背景色之中。

下面要说设计思路了。

1，在TransparentToolBar里初始化最大偏移量与背景色，对外提供设置值的方法。

2，写一个方法，需要不断改变背景色透明度，并生成新的color值。

3，写一个方法，利用外面传递进来的top值，计算出透明度变化百分比fraction，合成新的color值设置到背景色之中。

4，写一个接口，对外提供toolbar百分比实时变化的数值，方便拓展与同步。

TransparentToolBar设计思路就是酱子。

---

接下来看代码，详细的分析上述所说的步骤。

1，在TransparentToolBar里初始化最大偏移量与背景色，对外提供设置值的方法。

    public class TransparentToolBar extends RelativeLayout {

        private static final String TRANS_COLOR = "#00000000";//默认透明颜色
        private float mOffset = 0;//ToolBar从透明到有颜色的偏移量
        private int mBackGroundColor = 0;//ToolBar背景色

        /** 初始化ToolBar为透明色 */
        private void init() {
            setBackgroundColor(Color.parseColor(TRANS_COLOR));
        }

        /** 设置ToolBar最大偏移量 */
        public void setOffset(float offset) {
            mOffset = offset;
        }

        /** 设置ToolBar背景色 */
        public void setBgColor(int color) {
            mBackGroundColor = color;
        }

2，写一个方法，需要不断改变背景色透明度，并生成新的color值。

    /** 根据百分比改变颜色透明度 */
    public int changeAlpha(int color, float fraction) {
        int red = Color.red(color);
        int green = Color.green(color);
        int blue = Color.blue(color);
        int alpha = (int) (Color.alpha(color) * fraction);
        return Color.argb(alpha, red, green, blue);
    }

3，写一个方法，利用外面传递进来的top值，计算出透明度变化百分比fraction，合成新的color值设置到背景色之中。

    /** 改变ToolBar颜色透明度 */
    public void setChangeTop(float top) {
        //如果没有设置最大偏移量与背景色。则不会执行
        if (mOffset <= 0 && mBackGroundColor == 0) {
            return;
        }

        //计算出透明度变化百分比 0~1
        float fraction = top / mOffset;

        //百分比最小等于0
        if (fraction < 0) {
            fraction = 0;
        }

        //百分比最大等于1
        if (fraction > 1) {
            fraction = 1;
        }

        //计算出最新的背景色颜色值，设置到toolBar背景色中
        int newColor = changeAlpha(mBackGroundColor, fraction);
        setBackgroundColor(newColor);

        if(mOnScrollStateListener != null) {
            mOnScrollStateListener.updateFraction(fraction);
        }

    }

4，写一个接口，对外提供toolbar百分比实时变化的数值，方便拓展与同步。

    public interface OnScrollStateListener {
        void updateFraction(float fraction);
    }

    public void setOnScrollStateListener(OnScrollStateListener listener) {
        mOnScrollStateListener = listener;
    }

---

现在，可以在外面直接使用了，必须设置最大偏移量offset与背景色

mTransparentToolBar.setBgColor(getResources().getColor(R.color.bar_color));
mMyScrollView.setTitleBar(mTransparentToolBar);


mTransparentToolBar.setOnScrollStateListener(this);
mHeadTv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        mHeadValue = mHeadTv.getMeasuredHeight();

        //必须设置ToolBar最大偏移量，这会影响到0~1透明度变化的范围
        mTransparentToolBar.setOffset(mHeadValue);

        mHeadTv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        Log.i(TAG, "mHeadValue:" + mHeadValue);
    }
});

如果是自定义滚动控件，需要把ToolBar注入进入，获取到top值。

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        //将滚动不断变化的top值传递给ToolBar用于计算透明度
        mTransparentToolBar.setChangeTop(t);
    }

    /** 注入ToolBar */
    public void setTitleBar(TransparentToolBar titleBar) {
        mTransparentToolBar = titleBar;
    }

TransparentToolBar这个自定义View就这样分析完了。

再来看一次效果图：

这的确是一个非常简单的TransparentToolBar，没有之一的既视感…

Demo下载：我的Github TransparentToolBar

2016年7月03日 19:13:20