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.连接传送门：

3.联系我

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

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

公众号.jpg

1-VII-RecyclerView基本使用

零、前言

一、代码实现

1.Activity布局

2.准备条目布局

3.创建视图持有者：FirstViewHolder

4.创建适配器类

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

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

两步就搞定了：

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

二、装饰线

1.添加装饰线

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

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

后记、

1.声明：

2.连接传送门：

3.联系我

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

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

1-VII-RecyclerView基本使用

零、前言

一、代码实现

1.Activity布局

2.准备条目布局

3.创建视图持有者：FirstViewHolder

4.创建适配器类

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

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

两步就搞定了：

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

二、装饰线

1.添加装饰线

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

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

后记、

1.声明：

2.连接传送门：

3.联系我

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

热门文章

最新文章

相关电子书