一个简单随着滚动控件滚动,不断改变颜色透明度的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