粘性/悬浮头部,效果如图
a.gif
可使用一个开源的框架完成:
配置
1.在 (项目) 的build.gradle中导入
allprojects {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}
2.依赖
implementation 'com.android.support:design:27.1.1'
implementation 'com.github.qdxxxx:StickyHeaderDecoration:1.0.1'
3.使用场景
这个自定义的数据显示的效果
mCars = new ArrayList<>();
mCars.add(new Car("奥迪", "A"));
mCars.add(new Car("阿尔法罗密欧", "A"));
mCars.add(new Car("阿斯顿马丁", "A"));
mCars.add(new Car("ALPINA", "A"));
mCars.add(new Car("安凯客车", "A"));
mCars.add(new Car("本田", "B"));
mCars.add(new Car("别克", "B"));
mCars.add(new Car("奔驰", "B"));
mCars.add(new Car("宝马", "B"));
mCars.add(new Car("保时捷", "B"));
mCars.add(new Car("比亚迪", "B"));
mCars.add(new Car("北京", "B"));
mCars.add(new Car("宾利", "B"));
mCars.add(new Car("巴博斯", "B"));
mCars.add(new Car("布加迪威龙", "B"));
mCars.add(new Car("长安", "C"));
mCars.add(new Car("长城", "C"));
mCars.add(new Car("大众", "D"));
mCars.add(new Car("东南", "D"));
mCars.add(new Car("东风", "D"));
mCars.add(new Car("DS", "D"));
mCars.add(new Car("道奇", "D"));
mCars.add(new Car("东风小康", "D"));
}
private void initView() {
final LayoutInflater inflater = LayoutInflater.from(this);
mRlv = (RecyclerView) findViewById(R.id.rlv);
mRlv.setLayoutManager(new LinearLayoutManager(this));
RlvAdapter rlvAdapter = new RlvAdapter(mCars);
//返回头布局的内容
final NormalDecoration decoration = new NormalDecoration() {
@Override
public String getHeaderName(int i) {
return mCars.get(i).headerName;
}
};
//自定义头布局,可不设置
decoration.setOnDecorationHeadDraw(new NormalDecoration.OnDecorationHeadDraw() {
@Override
public View getHeaderView(final int i) {
View inflate = inflater.inflate(R.layout.item_header, null);
TextView tv = inflate.findViewById(R.id.tv);
tv.setText(mCars.get(i).headerName);
return inflate;
}
});
mRlv.addItemDecoration(decoration);
//头布局的点击事件
decoration.setOnHeaderClickListener(new NormalDecoration.OnHeaderClickListener() {
@Override
public void headerClick(int i) {
Toast.makeText(MainActivity.this, mCars.get(i).headerName, Toast.LENGTH_SHORT).show();
startActivity(new Intent(MainActivity.this,FlowActivity.class));
}
});
mRlv.setAdapter(rlvAdapter);
}
这个在网络网络请求是MVP获取到集合后
@Override
public void getData(TiXi base) {
Log.e("zhuzhu", "getData: "+base.toString() );
//就是只获取到请求数据里的对象name
final List<TiXi.DataBean> data = base.getData();
final NormalDecoration decoration = new NormalDecoration() {
@Override
public String getHeaderName(int i) {
return data.get(i).getName();
}
};
mRe.addItemDecoration(decoration);
adapter.setData(data); //这个是添加数据
}
二:实战使用
以下是对粘性头部的工具使用,因为上面的在实际情况下使用会有一些问题,(如果在网络请求的数据中,每个对象是会返回一个要悬浮的属性,如果用上面的,会把这个对象的那个属性中的内容全都显示,而造成啦错乱的问题,所以,在项目实际开发中,使用工具类比较实用)
1:使用方式其实就一行代码,在自己要加悬浮头的 RecyclerView 中添加:
添加的list集合,上下文对象
rv.addItemDecoration(new SuspensionDecoration(getContext(), mList));
2:工具类中的设置
public class SuspensionDecoration extends RecyclerView.ItemDecoration {
private static final String TAG = SuspensionDecoration.class.getSimpleName();
// private int mTitleHeight;//title的高
private static int COLOR_TITLE_BG = Color.parseColor("#EDEAEA");
private static int COLOR_TITLE_FONT = Color.parseColor("#000000");
private static int mTitleFontSize;//title字体大小
ArrayList<ReMenBean.ContentsBean> classifies;
private Paint mPaint;
private Rect mBounds;//用于存放测量文字Rect
private int mHeaderViewCount = 0;
private int mTitleHeight = 0;
private int paddingLeft;
public SuspensionDecoration(Context context, ArrayList<ReMenBean.ContentsBean> classifies) {
super();
this.classifies = classifies;
mPaint = new Paint();
mBounds = new Rect();
//dp转px
mTitleHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, context.getResources().getDisplayMetrics());
paddingLeft = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 120, context.getResources().getDisplayMetrics());
mTitleFontSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 13, context.getResources().getDisplayMetrics());
mPaint.setTextSize(mTitleFontSize);
mPaint.setAntiAlias(true);
}
public int getHeaderViewCount() {
return mHeaderViewCount;
}
public SuspensionDecoration setHeaderViewCount(int headerViewCount) {
mHeaderViewCount = headerViewCount;
return this;
}
@Override
public void onDrawOver(Canvas c, final RecyclerView parent, RecyclerView.State state) {//最后调用 绘制在最上层
Log.d(TAG, "onDrawOver");
int pos = ((LinearLayoutManager) (parent.getLayoutManager())).findFirstVisibleItemPosition();
//这里的position不算ondraw里面添加的view
pos -= getHeaderViewCount();
//pos为1，size为1，1>0? true
if (classifies == null || classifies.isEmpty() || pos > classifies.size() - 1 || pos < 0) {
Log.d(TAG, "越界----");
return;//越界
}
String tag = classifies.get(pos).getDay() + DateUtils.dateToWeek(classifies.get(pos).getDay());
;
View child = parent.findViewHolderForLayoutPosition(pos + getHeaderViewCount()).itemView;//出现一个奇怪的bug，有时候child为空，所以将 child = parent.getChildAt(i)。-》 parent.findViewHolderForLayoutPosition(pos).itemView
boolean flag = false;//定义一个flag，Canvas是否位移过的标志
if ((pos + 1) < classifies.size()) {//防止数组越界（一般情况不会出现）
if (null != tag && !tag.equals(classifies.get(pos + 1).getDay())) {//当前第一个可见的Item的tag，不等于其后一个item的tag，说明悬浮的View要切换了
Log.d("zxt", "onDrawOver() called with: c = [" + child.getTop());//当getTop开始变负，它的绝对值，是第一个可见的Item移出屏幕的距离，
//这里计算第一个可见的item的剩余高度是自己的顶部的坐标+item自身的高度，剩下的就是留下来可见的部分，这里的child.getTop()是一个负值
if (child.getHeight() + child.getTop() < mTitleHeight) {//当第一个可见的item在屏幕中还剩的高度小于title区域的高度时，我们也该开始做悬浮Title的“交换动画”
c.save();//每次绘制前 保存当前Canvas状态，
flag = true;
//一种头部折叠起来的视效，个人觉得也还不错~，由于child.getHeight() + child.getTop()是在不断地变小，因此这里有种渐变的裁剪矩形的感觉
//可与193行 c.drawRect 比较，只有bottom参数不一样，由于 child.getHeight() + child.getTop() < mTitleHeight，所以绘制区域是在不断的减小，有种折叠起来的感觉
// c.clipRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), parent.getPaddingTop() + child.getHeight() + child.getTop());
//类似饿了么点餐时,商品列表的悬停头部切换“动画效果”
//上滑时，将canvas上移 （y为负数） ,所以后面canvas 画出来的Rect和Text都上移了，有种切换的“动画”感觉
//这里是将下面画的悬浮的部分往上移动mTitleHeight的距离,这里平移是下面画的悬浮title部分，
//这里是从0到-mTitleHeight的过程，直至整个悬浮的title消失
c.translate(0, child.getHeight() + child.getTop() - mTitleHeight);//其实这里移动的是
}
}
}
/**
* 实际上这里是绘制悬浮的title部分，永远在顶部显示
*/
mPaint.setColor(COLOR_TITLE_BG);
//这里实际上是在一个固定的位置添加一个矩形的title罢了
c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), parent.getPaddingTop() + mTitleHeight, mPaint);
mPaint.setColor(COLOR_TITLE_FONT);
//将文本通过画笔来算出它占据的空间
mPaint.getTextBounds(tag, 0, tag.length(), mBounds);
//这里也是算的左下角的坐标啊，到底是什么回事啊
c.drawText(tag, child.getPaddingLeft() + paddingLeft,
parent.getPaddingTop() + mTitleHeight - (mTitleHeight / 2 - mBounds.height() / 2),
mPaint);
//只有在做了切换悬浮title动画的时候才会有该操作
if (flag)
c.restore();//恢复画布到之前保存的状态
}
}
