RecyclerView的初步使用(1)----代替ListView实现图片列表

最新推荐文章于 2021-07-30 22:15:34 发布

阿光ontheway

最新推荐文章于 2021-07-30 22:15:34 发布

阅读量816

点赞数 1

分类专栏： android 文章标签： android

本文链接：https://blog.csdn.net/lusciousstrawberry/article/details/51941277

版权

android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

概述

最近一直在看RecyclerView,小有心得。写下来，一者理清自己的思路，二者供没有接触过的同学参考。
内容较为简单易懂。

一、准备工作

在manifests文件中添加网络权限

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

在Modoule.gradle中的dependencies加入RecyclerView的依赖声明

compile 'com.android.support:recyclerview-v7:24.0.0'

加入picasso的依赖声明，用于加载网络图片

compile 'com.squareup.picasso:picasso:2.5.2'

添加ButterKnife的依赖声明，用于简化代码

compile 'com.jakewharton:butterknife:7.0.1'

二、开始正式写代码

1.为了简单，从郭霖大神的博客中拷了一个图片数组类，里面存放的全是图片地址。原地址：http://blog.csdn.net/guolin_blog/article/details/34093441

public class Images {  

    public final static String[] imageThumbUrls = new String[] {  
        "https://img-my.csdn.net/uploads/201407/26/1406383299_1976.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383291_6518.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383291_8239.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383290_9329.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383290_1042.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383275_3977.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383265_8550.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383264_3954.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383264_4787.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383264_8243.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383248_3693.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383243_5120.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383242_3127.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383242_9576.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383242_1721.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383219_5806.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383214_7794.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383213_4418.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383213_3557.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383210_8779.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383172_4577.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383166_3407.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383166_2224.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383166_7301.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383165_7197.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383150_8410.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383131_3736.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383130_5094.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383130_7393.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383129_8813.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383100_3554.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383093_7894.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383092_2432.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383092_3071.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383091_3119.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383059_6589.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383059_8814.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383059_2237.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383058_4330.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406383038_3602.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382942_3079.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382942_8125.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382942_4881.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382941_4559.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382941_3845.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382924_8955.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382923_2141.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382923_8437.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382922_6166.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382922_4843.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382905_5804.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382904_3362.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382904_2312.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382904_4960.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382900_2418.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382881_4490.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382881_5935.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382880_3865.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382880_4662.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382879_2553.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382862_5375.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382862_1748.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382861_7618.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382861_8606.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382861_8949.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382841_9821.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382840_6603.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382840_2405.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382840_6354.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382839_5779.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382810_7578.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382810_2436.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382809_3883.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382809_6269.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382808_4179.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382790_8326.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382789_7174.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382789_5170.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382789_4118.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382788_9532.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382767_3184.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382767_4772.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382766_4924.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382766_5762.jpg",  
        "https://img-my.csdn.net/uploads/201407/26/1406382765_7341.jpg"  
    };  
}

2.创建一个Activity

public class MyListActivity extends AppCompatActivity {

    @Bind(R.id.myList_recyclerview)
    RecyclerView myListRecyclerview;
    private List<String> mDatas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_list);
        ButterKnife.bind(this);
        initData();
        initRecyclerView();
    }

    private void initData() {
        mDatas = new ArrayList<String>();
        mDatas.addAll(Arrays.asList(Images.imageThumbUrls));
    }

    private void initRecyclerView() {
        //设置布局管理器
        LinearLayoutManager linearLayoutManager=new LinearLayoutManager(this);
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        myListRecyclerview.setLayoutManager(linearLayoutManager);
        //设置adapter
        myListRecyclerview.setAdapter(new MyListAdapter(this,mDatas));
    }
}

很简单吧，只需两步，1设置布局管理器 2 设置adapter即可。
也可是设置横向的列表，只要linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);的
VERTICAL更换为HORIZONTAL 就行了。

3 创建Adapter

public class MyListAdapter extends RecyclerView.Adapter<MyListAdapter.MyViewHolder> {

    private Context mContext;
    private List<String> mDatas;

    public MyListAdapter(Context context, List<String> data) {
        this.mContext = context;
        this.mDatas = data;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyViewHolder holder = new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.list_item, parent, false));
        return holder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        Picasso.with(mContext)
                .load(mDatas.get(position))
                .placeholder(R.mipmap.ic_brows_refresh)
                .error(R.mipmap.ic_brows_refresh)
                .into(holder.myListImage);
    }

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

    public class MyViewHolder extends RecyclerView.ViewHolder {
        @Bind(R.id.myList_image)
        ImageView myListImage;

        public MyViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

}

注意这里的adapter就不是继承BaseAdapter了，而是继承RecyclerView.Adapter了。重写里面的三个方法即可。
4 创建布局
activity的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_my_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.aguang.recyclerpro.ui.MyListActivity"
    android:padding="2dp">
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/myList_recyclerview"/>
</android.support.constraint.ConstraintLayout>

条目的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/myList_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"/>
</LinearLayout>

运行一下吧

这里写图片描述

阿光ontheway

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RecyclerView的初步使用(1)----代替ListView实现图片列表

概述最近一直在看RecyclerView,小有心得。写下来，一者理清自己的思路，二者供没有接触过的同学参考。内容较为简单易懂。一、准备工作在manifests文件中添加网络权限 <uses-permission android:name="android.permission.INTERNET" />在Modoule.gradle中的dependencies加入RecyclerView的依
复制链接

扫一扫