前言
最近在倒腾公司之前的项目,发现之前的界面是个白色标题栏,不是很美观,所以做了些改进。
效果图
思路
整个布局大体上是ScrollView
里面包含了一个ImageView
和RecyclerView
,所以先得到ImageView
的高度,当ScrollView
向上滑动时,设置标题栏的背景色、文字颜色,当超过ImageView
的高度时,设置其背景为白色,字体为黑色。
首先想到的是ScrollView
的setOnScrollChangeListener
方法,但是这是6.0之后才可以用
偶尔发现5.0新增的NestedScrollView
可以设置这个滑动监听,看了看源码
原来如此,我们也仿照着写个,先定义一个接口;
public interface OnScrollChangedListener {
/**
* 滑动监听
*
* @param scrollView ScrollView控件
* @param x x轴坐标
* @param y y轴坐标
* @param oldx 上一个x轴坐标
* @param oldy 上一个y轴坐标
*/
void onScrollChanged(ScrollView scrollView, int x, int y, int oldx, int oldy);
}
复制代码
然后自定义MyScrollView
继承于ScrollView
public class MyScrollView extends ScrollView {
private OnScrollChangedListener mOnScrollChangedListener;
public void setmOnScrollChangedListener(OnScrollChangedListener mOnScrollChangedListener) {
this.mOnScrollChangedListener = mOnScrollChangedListener;
}
public MyScrollView(Context context) {
super(context);
}
public MyScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
}
复制代码
在他的onScrollChanged
方法中调下我们刚写的接口
@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (mOnScrollChangedListener != null) {
mOnScrollChangedListener.onScrollChanged(this, x, y, oldx, oldy);
}
}
复制代码
然后是计算滑动高度,设置颜色
lsv.setmOnScrollChangedListener(new SlideToBottomScrollView.OnScrollChangedListener() {
@Override
public void onScrollChanged(ScrollView scrollView, int x, int y, int oldx, int oldy) {
int minHeight = 50;
int maxHeight = rl_userhome_top.getMeasuredHeight();
if (maxHeight == 0) {
maxHeight = 500;
}
if (scrollView.getScrollY() <= minHeight) {
mAlpha = 0;
} else if (scrollView.getScrollY() > maxHeight) {
mAlpha = 255;
} else {
mAlpha = (scrollView.getScrollY() - minHeight) * 255 / (maxHeight - minHeight);
}
if (mAlpha <= 0) {
tv_title.setTextColor(Color.rgb(255, 255, 255));
iconColorFilter(Color.parseColor("#ffffff"));
rl_userhome_title.setBackgroundColor(Color.argb(0, 255, 255, 255));
} else if (mAlpha >= 255) {
tv_title.setTextColor(Color.rgb(0, 0, 0));
iconColorFilter(Color.parseColor("#000000"));
rl_userhome_title.setBackgroundColor(Color.argb(mAlpha, 255, 255, 255));
} else {
tv_title.setTextColor(Color.rgb(255 - mAlpha, 255 - mAlpha, 255 - mAlpha));
iconColorFilter(Color.rgb(255 - mAlpha, 255 - mAlpha, 255 - mAlpha));
rl_userhome_title.setBackgroundColor(Color.argb(mAlpha, mAlpha, mAlpha, mAlpha));
}
}
});
复制代码
/**
* 标题栏/导航栏icon 颜色改变
*
* @param color
*/
private void iconColorFilter(int color) {
PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);
iv_back.setColorFilter(colorFilter);
}
复制代码
tip: 标题栏中,返回键是个图片,我们可以使用PorterDuffColorFilter
这个类来改变图片的颜色,其他用法可以自行百度。
总结
平时还是应该多学习Android的源码,从中学习,提升自己。