当前位置:代码狗 > 开发教程 > Android开发教程 > 正文

Android中listView与recyclerView的吸顶动画

仿ios微信通讯录的动画,分栏具有吸顶效果。因为ios的list控件自带分组效果,所以就要求Android开发也要做,做就做吧,到也不是很难。

Android

Android中listView与recyclerView的吸顶动画

实现方式

  1. 原来用过的,使用listView进行分栏显示,在跟布局的顶部添加一个与分栏一致的控件,对listView进行滑动监听,判断是否顶部分栏显示哪一组的分栏。
  2. 使用recyelerView的ItemDecoration,recyclerView使用起来需要自定义很多东西,但功能很强大的

代码如下

public class UserListItemDecoration extends RecyclerView.ItemDecoration {

private int mHeightCommon;
private int mHeightClassify;
private Paint mPaint;
private GroupListening mGroupListening;
private final Paint mTextPaint;

public UserListItemDecoration(GroupListening groupListening) {
super();
mHeightCommon = (int) ScreenUtil.dip2px(2);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.parseColor("#f2f2f2"));
mGroupListening = groupListening;
mHeightClassify = (int) ScreenUtil.dip2px(20);

mTextPaint = new Paint();
mTextPaint.setTextSize(ScreenUtil.dip2px(12));
mTextPaint.setColor(Color.parseColor("#505050"));
mTextPaint.setAntiAlias(true);
}

/**
* 计算偏移量
*
* @param outRect 包裹item的矩形,默认为0
* @param view item
* @param parent recyclerView
* @param state recyclerView的状态
*/
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
int position = parent.getChildAdapterPosition(view);
boolean newGroup = isNewGroup(position);
if (newGroup) {
outRect.top = mHeightClassify;
} else {
outRect.top = mHeightCommon;
}
}

/**
* 绘制分割线
*
* @param c
* @param parent
* @param state
*/
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
int left = parent.getLeft();
int right = parent.getRight();
for (int i = 0; i < parent.getChildCount(); i++) {
View childAt = parent.getChildAt(i);
int bottom = childAt.getTop();
int top = bottom - mHeightCommon;
c.drawLine(left, top, right, bottom, mPaint);
}
}

/**
* 绘制最上层动画
*
* @param c
* @param parent
* @param state
*/
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
int childCount = parent.getChildCount();
int left = parent.getLeft();
int right = parent.getRight();
String curGroupName = null;
String preGroupNam;
for (int i = 0; i < childCount; i++) {
View childView = parent.getChildAt(i);
//position与i不一致,因为当前集合只有现在屏幕中显示的个数,i是集合在屏幕中的索引,索引要转为position
int position = parent.getChildAdapterPosition(childView); 
preGroupNam = curGroupName;
curGroupName = mGroupListening.getNameGroup(position);

//和上一个条目在同一组就不处理,不用isNewGroup()去判断是因为滑动之后该函数重新调用,preGroupNam默认为null,不会continue,(集合是显示在屏幕中的条目,recyclerView的回收复用机制)
// 可是如果使用isNewGroup,可以得到上一条条目,可能会continue,顶部的吸顶动画就没有了
//即显示的第一条应该没有上一条数据,才能显示吸顶的item
if (TextUtils.isEmpty(curGroupName) || curGroupName.equals(preGroupNam)) {
continue;
}
int bottom = childView.getBottom();
//使item吸顶的核心方法
int top = Math.max(mHeightClassify, childView.getTop());
if (position + 1 < state.getItemCount()) { //必须判断,防止角标越界
String nextNameGroup = mGroupListening.getNameGroup(position + 1);
if (!curGroupName.equals(nextNameGroup) && bottom < top) {
top = bottom;
}
}
Rect rect = new Rect(left, top - mHeightClassify, right, top);
c.drawRect(rect, mPaint);
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
float baseLine = top - (mHeightClassify - (fontMetrics.bottom - fontMetrics.top)) / 2 - fontMetrics.bottom;
c.drawText(curGroupName, left + ScreenUtil.px2dip(20), baseLine, mTextPaint);
}
}

private boolean isNewGroup(int position) {
if (position == 0) {
return true;
}
String newName = mGroupListening.getNameGroup(position);
String oldName = mGroupListening.getNameGroup(position - 1);
return !newName.equals(oldName);
}
}

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 2

  1. #2

    文章不错非常喜欢

    新闻头条11个月前 (06-19)回复
  2. #1

    沙发

    路人甲11个月前 (06-19)回复
×

请作者吃根烤肠!

支付宝