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);
            }
        }
    }
}

本文由张风捷特烈原创,转载请注明 更多安卓技术欢迎访问:https://www.jianshu.com/c/004f3fe34c94 张风捷特烈个人网站,编程笔记请访问:http://www.toly1994.com 你的喜欢与支持将是我最大的动力

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jack的Android之旅

淘宝开源库VLayout实践

最近淘宝出了vlayout,刚开始看淘宝的文档的时候还是有点懵,后来自己也总结规划了一下,写了一个比较好看的demo,顺便在这里总结一下。

2022
来自专栏Android干货

自定义圆形图片

4018
来自专栏Android干货

关于安卓开发实现侧滑菜单效果

1K8
来自专栏分享达人秀

ImageView的属性和方法大全

通过前面几期的学习,TextView控件及其子控件基本学习完成,可以在Android屏幕上显示一些文字或者按钮,那么从本期开始来学习如何进行图片展示,这...

1929
来自专栏androidBlog

Android 圆形头像的两种实现方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

1430
来自专栏移动开发

android 圆角图片的实现和封装

下面为主要源码,实现了 Picasso 中的 Transformation 接口。

2114
来自专栏学海无涯

Android开发之View动画

Android动画主要分为3种 View动画 帧动画 属性动画 何为View动画? View动画主要是对View对象进行变换所达到的动画效果,如平移、缩放、旋转...

2695
来自专栏androidBlog

Android打造不一样的新手引导页面(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

661
来自专栏Android干货园

Android源码解析-仿今日头条PagerSlidingTabStrip滑动页面导航效果

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

4572
来自专栏郭霖

Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现

人人客户端有一个特效还是挺吸引人的,在主界面手指向右滑动,就可以将菜单展示出来,而主界面会被隐藏大部分,但是仍有左侧的一小部分同菜单一起展示。 据说人人客户端的...

26710

扫码关注云+社区

领取腾讯云代金券