listView与recyclerView的吸顶动画

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

实现方式
  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);
    }
}

itemDecoration详解参考
http://mp.weixin.qq.com/s__biz=MzA5MzI3NjE2MA==&mid=2650239745&idx=1&sn=0dedbb4a243027e935f9afb2e26f6fe2&chksm=8863826ebf140b78c9c257e941b8f7a9c59dfee1af9e12f822b0018eefc8e9af96cba7f9e273&scene=0#rd

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值