红橙Darren视频笔记 RecyclerView基本使用

最新推荐文章于 2021-12-01 19:51:38 发布

洌冰

最新推荐文章于 2021-12-01 19:51:38 发布

阅读量188

点赞数

分类专栏： Android 自定义view

本文链接：https://blog.csdn.net/u011109881/article/details/116948921

版权

Android 同时被 2 个专栏收录

119 篇文章 6 订阅

订阅专栏

自定义view

25 篇文章 1 订阅

订阅专栏

1.基本使用

1.1 先准备一个model

public class User {
    public User(String userName, int age, String address) {
        this.userName = userName;
        this.age = age;
        this.imageUrl = address;
    }

    String userName;
    int age;
    String imageUrl;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }
}

1.2 定义每个item的布局

<?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="150dp"
    android:layout_height="match_parent"
    android:background="#ccc"
    android:padding="10dp">

    <TextView
        android:id="@+id/leftTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/rightTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        tools:ignore="RelativeOverlap" />

    <ImageView
        android:id="@+id/image"
        android:layout_below="@id/leftTv"
        android:scaleType="fitCenter"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


</RelativeLayout>

1.3 写好给RecyclerView使用的Adapter

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

    private final List<User> mList;
    private final Context mContext;
    private final LayoutInflater mInflater;

    // constructor
    public RecyclerViewAdapter(List<User> list, Context context, LayoutInflater inflater) {
        this.mList = list;
        this.mContext = context;
        this.mInflater = inflater;
    }

    /**
     * 创建条目ViewHolder
     *
     * @param parent   RecyclerView
     * @param viewType view的类型可以用来显示多种列表布局
     * @return recyclerview中单个的item
     */
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // 创建item
        View itemView = mInflater.inflate(R.layout.recycler_view_item, parent, false);
        // 创建ViewHolder
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        // 将数据填充到ViewHolder
        User user = mList.get(position);
        holder.mLeftTv.setText(user.getUserName());
        holder.mRightTv.setText(String.valueOf(user.getAge()));
    }

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

    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView mLeftTv;
        public TextView mRightTv;
        public ImageView mImage;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            mLeftTv = itemView.findViewById(R.id.leftTv);
            mRightTv = itemView.findViewById(R.id.rightTv);
            mImage = itemView.findViewById(R.id.image);
        }
    }
}

1.4 使用RecyclerView
在测试Activity中添加如下代码

		RecyclerView recyclerView = findViewById(R.id.recycler);
        List<User> users = new ArrayList<>();
        for (int i = 0; i < 100; i++) {
            users.add(new User("hjcai" + i, i, "http://goo.gl/gEgYUd"));
        }
        RecyclerViewAdapter adapter = new RecyclerViewAdapter(users, this, this.getLayoutInflater());
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
		// 必须指定LayoutManager
        recyclerView.setLayoutManager(layoutManager);
//        recyclerView.setLayoutManager(new GridLayoutManager(this,2));
        recyclerView.setAdapter(adapter);

2.使用Glide加载图片

2.1 添加权限

<uses-permission android:name="android.permission.INTERNET" />

如果是7.0以上需要动态添加权限
2.2 添加gradle依赖

    implementation 'com.github.bumptech.glide:glide:4.12.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'

2.3 显示图片
在Adapter onBindViewHolder中添加如下代码

        // 加载图片
        Glide.with(mContext).load(user.getImageUrl())
                .placeholder(R.mipmap.ic_launcher)
                .centerCrop()
                .into(holder.mImage);

3.使用自定义分割线

3.1 自定义分割线
首先需要创建自定义分割线注意这里的分割线只给LinearLayoutManager的Recycler View使用如果要用在GridLayoutManager上可以参考并写出另外的自定义分割线该自定义分割线适用于横着的和竖着的分割线，支持纯色的分割线和使用Drawable资源的分割线
如果使用Drawable类型的分割线并且横着的和竖着的分割线差异较大则需要分别定义drawable

/**
 * Created by hjcai on 2021/5/14.
 * 注意：该分割线不算在recycler view item总高度中
 * 如 假设Recycler View为横向
 * 我们设置每个item宽度100dp 如果ItemDecoration的宽度2dp
 * 那么Recycler View item总宽度其实为102dp
 */
public class RecyclerViewItemDecoration extends RecyclerView.ItemDecoration {
    private final Paint mPaint;
    private final int mDividerHeightOrWidth;
    private final int mOrientation;
    private Drawable mDividerDrawable;

    public RecyclerViewItemDecoration(Drawable dividerDrawable, int orientation) {
        mOrientation = orientation;
        mDividerDrawable = dividerDrawable;
        mDividerHeightOrWidth = mOrientation == RecyclerView.VERTICAL ? dividerDrawable.getIntrinsicHeight() : dividerDrawable.getIntrinsicWidth();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
    }

    public RecyclerViewItemDecoration(int color, int dividerHeightOrWidth, int orientation) {
        mOrientation = orientation;
        mDividerHeightOrWidth = dividerHeightOrWidth;
        mPaint = new Paint();
        mPaint.setColor(color);
        mPaint.setAntiAlias(true);
    }

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
        if (mDividerDrawable != null) {
            drawDividerByDrawable(c, parent);
        } else {
            drawDividerByColor(c, parent);
        }
    }

    private void drawDividerByColor(Canvas c, RecyclerView parent) {
        int childCount = parent.getChildCount();
        // 获取需要绘制的区域
        Rect rect = new Rect();
        if (mOrientation == RecyclerView.VERTICAL) {
            // left right取自recycler view
            rect.left = parent.getPaddingLeft();
            rect.right = parent.getMeasuredWidth() - parent.getPaddingRight();
            for (int i = 0; i < childCount; i++) {
                View childView = parent.getChildAt(i);
                rect.top = childView.getBottom();
                rect.bottom = rect.top + mDividerHeightOrWidth;
                // 直接利用Canvas去绘制一个矩形 在留出来的地方
                c.drawRect(rect, mPaint);
            }
        } else {
            // top bottom取自recycler view
            rect.top = parent.getPaddingTop();
            rect.bottom = parent.getMeasuredHeight() - parent.getPaddingBottom();
            for (int i = 0; i < childCount; i++) {
                View childView = parent.getChildAt(i);
                rect.left = childView.getRight();
                rect.right = rect.left + mDividerHeightOrWidth;
                // 直接利用Canvas去绘制一个矩形 在留出来的地方
                c.drawRect(rect, mPaint);
            }
        }
    }

    private void drawDividerByDrawable(Canvas c, RecyclerView parent) {
        int childCount = parent.getChildCount();
        // 获取需要绘制的区域
        Rect rect = new Rect();
        if (mOrientation == RecyclerView.VERTICAL) {
            // left right取自recycler view
            rect.left = parent.getPaddingLeft();
            rect.right = parent.getMeasuredWidth() - parent.getPaddingRight();
            for (int i = 0; i < childCount; i++) {
                View childView = parent.getChildAt(i);
                rect.top = childView.getBottom();
                rect.bottom = rect.top + mDividerHeightOrWidth;
                // 直接利用Canvas去绘制一个矩形 在留出来的地方
                mDividerDrawable.setBounds(rect);
                mDividerDrawable.draw(c);
            }
        } else {
            // top bottom取自recycler view
            rect.top = parent.getPaddingTop();
            rect.bottom = parent.getMeasuredHeight() - parent.getPaddingBottom();
            for (int i = 0; i < childCount; i++) {
                View childView = parent.getChildAt(i);
                rect.left = childView.getRight();
                rect.right = rect.left + mDividerHeightOrWidth;
                // 直接利用Canvas去绘制一个矩形 在留出来的地方
                mDividerDrawable.setBounds(rect);
                mDividerDrawable.draw(c);
            }
        }
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        if (mOrientation == RecyclerView.VERTICAL) {
            outRect.bottom += mDividerHeightOrWidth;
        } else {
            outRect.right += mDividerHeightOrWidth;
        }
    }
}

3.2 使用drawable的分割线
如横着的分割线

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:height="5dp"
        android:gravity="bottom|right">
        <shape android:shape="rectangle">
            <solid android:color="#678" />
        </shape>
    </item>
</layer-list>

竖着的分割线

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="5dp" />
    <gradient
        android:angle="90"
        android:startColor="@color/black"
        android:centerColor="#f00"
        android:endColor="#fff"
        />
</shape>

3.3 应用到RecyclerView上
在setAdapter附近添加如下代码

recyclerView.addItemDecoration(new RecyclerViewItemDecoration(ContextCompat.getDrawable(this, R.drawable.recycler_view_divider), layoutManager.getOrientation()));

4.自己添加点击事件

recyclerView本身不直接支持点击事件因此我们需要利用Adapter给出回调
需要在Adapter下给出如下定义

    public void setItemClickListener(OnItemClickListener itemClickListener) {
        this.mItemClickListener = itemClickListener;
    }

    public interface OnItemClickListener {
        public void onItemClick(int position,ViewHolder holder);
    }
	public OnItemClickListener mItemClickListener;

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        // 将数据填充到ViewHolder
        User user = mList.get(position);
        holder.mLeftTv.setText(user.getUserName());
        holder.mRightTv.setText(String.valueOf(user.getAge()));

        // 添加点击事件
        if(mItemClickListener != null){
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mItemClickListener.onItemClick(position,holder);
                }
            });
        }
        // 加载图片
        Glide.with(mContext).load(user.getImageUrl())
                .placeholder(R.mipmap.ic_launcher)
                .centerCrop()
                .into(holder.mImage);
    }

最后在adapter中设置点击事件

adapter.setItemClickListener((position, holder) -> Toast.makeText(MainActivity.this, holder.mLeftTv.getText().toString() + " " + position, Toast.LENGTH_SHORT).show());

最后给出Activity和Adapter的完整代码

/**
 * Created by hjcai on 2021/5/13.
 */
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

    private final List<User> mList;
    private final Context mContext;
    private final LayoutInflater mInflater;
    public OnItemClickListener mItemClickListener;

    // constructor
    public RecyclerViewAdapter(List<User> list, Context context, LayoutInflater inflater) {
        this.mList = list;
        this.mContext = context;
        this.mInflater = inflater;
    }

    /**
     * 创建条目ViewHolder
     *
     * @param parent   RecyclerView
     * @param viewType view的类型可以用来显示多种列表布局
     * @return recyclerview中单个的item
     */
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // 创建item
        View itemView = mInflater.inflate(R.layout.recycler_view_item, parent, false);
        // 创建ViewHolder
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        // 将数据填充到ViewHolder
        User user = mList.get(position);
        holder.mLeftTv.setText(user.getUserName());
        holder.mRightTv.setText(String.valueOf(user.getAge()));

        if(mItemClickListener != null){
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mItemClickListener.onItemClick(position,holder);
                }
            });
        }
        // 加载图片
        Glide.with(mContext).load(user.getImageUrl())
                .placeholder(R.mipmap.ic_launcher)
                .centerCrop()
                .into(holder.mImage);
    }

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

    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView mLeftTv;
        public TextView mRightTv;
        public ImageView mImage;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            mLeftTv = itemView.findViewById(R.id.leftTv);
            mRightTv = itemView.findViewById(R.id.rightTv);
            mImage = itemView.findViewById(R.id.image);
        }
    }

    public void setItemClickListener(OnItemClickListener itemClickListener) {
        this.mItemClickListener = itemClickListener;
    }

    public interface OnItemClickListener {
        public void onItemClick(int position,ViewHolder holder);
    }
}

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = findViewById(R.id.recycler);
        List<User> users = new ArrayList<>();
        for (int i = 0; i < 100; i++) {
            users.add(new User("hjcai" + i, i, "http://goo.gl/gEgYUd"));
        }
        RecyclerViewAdapter adapter = new RecyclerViewAdapter(users, this, this.getLayoutInflater());
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
//        recyclerView.setLayoutManager(new GridLayoutManager(this,2));
        recyclerView.addItemDecoration(new RecyclerViewItemDecoration(ContextCompat.getDrawable(this, R.drawable.recycler_view_divider), layoutManager.getOrientation()));
        adapter.setItemClickListener((position, holder) -> Toast.makeText(MainActivity.this, holder.mLeftTv.getText().toString() + " " + position, Toast.LENGTH_SHORT).show());
        recyclerView.setAdapter(adapter);
    }
}

洌冰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
红橙Darren视频笔记 RecyclerView基本使用

1.基本使用1.1 先准备一个modelpublic class User { public User(String userName, int age, String address) { this.userName = userName; this.age = age; this.imageUrl = address; } String userName; int age; String imageUrl;
复制链接

扫一扫