1-VII-RecyclerView基本使用

零、前言

[1].RecyclerView可以说是现在安卓视图的一哥了
[2].加包implementation 'com.android.support:design:26.1.0'
[3].RecyclerView的布局样式、装饰线

---

一、代码实现

1.Activity布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_below="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

</RelativeLayout>

2.准备条目布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="5dp">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@mipmap/head"/>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="@dimen/dp_16"
        android:layout_marginLeft="3dp"
        android:layout_toRightOf="@+id/iv_icon"
        android:text="Content"
        android:textAllCaps="false"
        android:textColor="#000000"/>
</RelativeLayout>

3.创建视图持有者：FirstViewHolder

/**
 * 作者：张风捷特烈
 * 时间：2018/3/19:13:51
 * 邮箱：1981462002@qq.com
 * 说明：ViewHolder
 */
public class FirstViewHolder extends RecyclerView.ViewHolder {

    public final ImageView mIv_icon;
    public final TextView mTv_title;

    /**
     * itemView为MyViewHolder中onCreateViewHolder加载的布局
     * @param itemView 条目
     */
    public FirstViewHolder(View itemView) {
        super(itemView);
        mIv_icon = itemView.findViewById(R.id.iv_icon);
        mTv_title = itemView.findViewById(R.id.tv_title);
    }
}

4.创建适配器类

/**
 * 作者：张风捷特烈<br/>
 * 时间：2018/8/30 0030:10:18<br/>
 * 邮箱：1981462002@qq.com<br/>
 * 说明：RecyclerView适配器
 */
public class FirstRvAdapter extends RecyclerView.Adapter<FirstViewHolder> {
    private Context mCtx;
    private ArrayList<String> data;

    public FirstRvAdapter(Context ctx,ArrayList<String> data) {
        mCtx = ctx;
        this.data = data;
    }

    /**
     * 相当于getView方法中创建View和ViewHolder
     *
     * @param parent   父容器
     * @param viewType 类型
     * @return ViewHolder
     */
    @Override
    public FirstViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //加载布局文件
        View itemView = LayoutInflater.from(mCtx).inflate(R.layout.item_rv, null);

        return new FirstViewHolder(itemView);
    }

    /**
     * 相当于getView 绑定数据部分的代码
     * @param holder  ViewHolder
     * @param position 位置
     */
    @Override
    public void onBindViewHolder(FirstViewHolder holder, int position) {
        String mData = data.get(position);
        holder.mTv_title.setText(mData);
    }

    @Override
    public int getItemCount() {
        return data.size();
    }
}

5.Activity中使用的核心代码：

//初始化数据
mData = DataUtils.getRandomName(30, true);
//2.设置适配器
mRecyclerView.setAdapter(new FirstRvAdapter(this,mData));
//3.!!创建布局管理器
mLlm = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
//4.!!!设置布局管理器
mRecyclerView.setLayoutManager(mLlm);

rv1.png

[1].要设置布局管理器，不然无效果
[2].费了这么大的劲，就搞出一个没有线的不能点击的ListView?
[3].一开始也觉得，这也不比ListView好哪去啊，别急，且往下看

6.网格布局：(上下文，每行(列)条目数，方向，是否倒序排列)

mGLM = new GridLayoutManager(this, 4, GridLayoutManager.VERTICAL, false);
mRecyclerView.setLayoutManager(mGLM);

两步就搞定了：

rv2.png

7.瀑布流：(每行(列)条目数，方向)

mSGM = new StaggeredGridLayoutManager(5, StaggeredGridLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(mSGM);

rv3.png

RecyclerView能对布局的条目进行控制，者也是它强大之处

---

二、装饰线

1.添加装饰线

mRecyclerView.addItemDecoration(//横线
            new RecycleViewDivider(this,LinearLayoutManager.VERTICA));
mRecyclerView.addItemDecoration(//竖线
            new RecycleViewDivider(this,LinearLayoutManager.VERTICAL));

rv4.png

2：可以自定义分割线形状，作为第三参数

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <size android:height="@dimen/dp_4" />
    <size android:width="@dimen/dp_8" />
    <solid android:color="@color/aliceblue" />
</shape>

rv5.png

2.不重复造轮子了，网上找的一款装饰线类

有一点是每一个条目都绘制全RecyclerView长宽，绘制了很多不必要的线
不过在RecycleViewDivider里我暂时得不到给个view的尺寸...加个TODO吧，先凑合着用以后完善

public class RecycleViewDivider extends RecyclerView.ItemDecoration {

    private Paint mPaint;
    private Drawable mDivider;
    private int mDividerHeight = 2;//分割线高度，默认为1px
    private int mOrientation;//列表的方向：LinearLayoutManager.VERTICAL或LinearLayoutManager.HORIZONTAL
    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};

    /**
     * 默认分割线：高度为2px，颜色为灰色
     *
     * @param context     上下文
     * @param orientation 列表方向
     */
    public RecycleViewDivider(Context context, int orientation) {
        if (orientation != LinearLayoutManager.VERTICAL && orientation != LinearLayoutManager.HORIZONTAL) {
            throw new IllegalArgumentException("请输入正确的参数！");
        }
        mOrientation = orientation;
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
    }

    /**
     * 自定义分割线
     *
     * @param context     上下文
     * @param orientation 列表方向
     * @param drawableId  分割线图片
     */
    public RecycleViewDivider(Context context, int orientation, int drawableId) {
        this(context, orientation);
        mDivider = ContextCompat.getDrawable(context, drawableId);
        mDividerHeight = mDivider.getIntrinsicHeight();
    }

    /**
     * 自定义分割线
     *
     * @param context       上下文
     * @param orientation   列表方向
     * @param dividerHeight 分割线高度
     * @param dividerColor  分割线颜色
     */
    public RecycleViewDivider(Context context, int orientation, int dividerHeight, int dividerColor) {
        this(context, orientation);
        mDividerHeight = dividerHeight;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(dividerColor);
        mPaint.setStyle(Paint.Style.FILL);
    }


    /**
     * 获取分割线尺寸
     *
     * @param outRect 线的矩框
     * @param view    线
     * @param parent  RecyclerView
     * @param state   状态
     */
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state){
        super.getItemOffsets(outRect, view, parent, state);
        //TODO
        if (mOrientation == LinearLayoutManager.VERTICAL) {
            outRect.set(0, 0, 0, mDividerHeight);//横线矩框
        } else {
            outRect.set(0, 0, mDividerHeight, 0);//竖线矩框
        }
    }

    /**
     * 绘制分割线
     *
     * @param c      画布
     * @param parent RecyclerView
     * @param state  状态
     */
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        if (mOrientation == LinearLayoutManager.VERTICAL) {
            drawVertical(c, parent);//横线矩框
        } else {
            drawHorizontal(c, parent);//竖线矩框
        }
    }

    /**
     * 绘制纵向列表时的分隔线  这时分隔线是横着的
     * 每次 left相同，top根据child变化，right相同，bottom也变化
     *
     * @param canvas 画布
     * @param parent RecyclerView
     */
    private void drawVertical(Canvas canvas, RecyclerView parent) {
        final int left = parent.getPaddingLeft();
        final int right = parent.getMeasuredWidth() - parent.getPaddingRight();
        final int childSize = parent.getChildCount();
        for (int i = 0; i < childSize; i++) {
            final View child = parent.getChildAt(i);
            RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int top = child.getBottom() + layoutParams.bottomMargin;
            final int bottom = top + mDividerHeight;
            if (mDivider != null) {
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(canvas);
            }
            if (mPaint != null) {
                canvas.drawRect(left, top, right, bottom, mPaint);
            }
        }
    }

    /**
     * 绘制横向列表时的分隔线  这时分隔线是竖着的
     * l、r 变化； t、b 不变
     *
     * @param canvas 画布
     * @param parent RecyclerView
     */
    private void drawHorizontal(Canvas canvas, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getMeasuredHeight() - parent.getPaddingBottom();
        final int childSize = parent.getChildCount();
        for (int i = 0; i < childSize; i++) {
            final View child = parent.getChildAt(i);
            RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int left = child.getRight() + layoutParams.rightMargin;
            final int right = left + mDividerHeight;
            if (mDivider != null) {
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(canvas);
            }
            if (mPaint != null) {
                canvas.drawRect(left, top, right, bottom, mPaint);
            }
        }
    }
}

后记、

1.声明：

[1]本文由张风捷特烈原创,转载请注明
[2]欢迎广大编程爱好者共同交流
[3]个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
[4]你的喜欢与支持将是我最大的动力

2.连接传送门：

更多安卓技术欢迎访问:安卓技术栈
我的github地址：欢迎star
简书首发，腾讯云+社区同步更新
张风捷特烈个人网站，编程笔记请访问：http://www.toly1994.com

3.联系我

QQ:1981462002
邮箱：1981462002@qq.com
微信：zdl1994328

4.欢迎关注我的微信公众号，最新精彩文章，及时送达：

公众号.jpg