RecyclerView学习笔记（基础篇）

作者: 含笑小基石 | 来源:发表于2017-07-26 10:53 被阅读0次

RecyclerView学习笔记（基础篇）
实战代码（十一）：Springboot集成Hbase
Android学习笔记——Recycler使用详解之基础篇
postgresql学习笔记--基础篇 -psql工具
接口测试基础学习笔记
面向Android的快速学习JavaScript笔记（基础篇中
RecyclerView基础篇-ItemDecoration
Android——AsyncListDiffer
RecyclerView 学习笔记
Flutter 学习笔记-基础篇

RecyclerView学习笔记

一、RecyclerView的定义

在以前的开发中，我们经常使用ListView来实现列表的功能。现在Google为我们提供了一个更强大的滚动控件RecyclerView，他不仅可以实现ListView的功能，还优化了ListView的效率问题。RecyclerView还支持横向滚动和瀑布流，所以现在Google官方更加推荐使用RecyclerView进行开发。

二、RecyclerView的用法

打开Android Studio的project structrue设置，在dependencies的闭包中导入RecyclerView的依赖库。

image.png
在布局文件中添加以下代码加入RecyclerView控件

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

创建数据源Sport

public class Sport {

    private String name;
    private int imageId;

    public Sport(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    // 获取项目名称
    public String getName() {
        return name;
    }

    // 获取项目图片ID
    public int getImageId() {
        return imageId;
    }
}

为RecyclerView准备一个适配器，新建SportAdapter类，继承自RecyclerView.adapter，适配器的泛型指定为内部类SportAdapter.ViewHolder。

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

    private List<Sport> sportList;

    // 静态内部类ViewHolder保存控件
    static class ViewHolder extends RecyclerView.ViewHolder {

        ImageView sportImage;
        TextView sportName;

        // item为RecyclerView子项的外层布局
        public ViewHolder(View itemView) {
            super(itemView);
            sportImage = itemView.findViewById(R.id.sport_image);
            sportName = itemView.findViewById(R.id.sport_name);
        }
    }

    // 传入数据源sportList赋值给全局变量
    public SportAdapter(List<Sport> sportList) {
        this.sportList = sportList;
    }

    // 创建ViewHolder实例,先加载布局，再把布局传入viweHolder的实例中
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.sport_item, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    // 通过position获取当前实例，对于RecyclerView子项的数据进行赋值
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Sport sport = sportList.get(position);
        holder.sportImage.setImageResource(sport.getImageId());
        holder.sportName.setText(sport.getName());
    }

    // RecyclerView的子项个数
    @Override
    public int getItemCount() {
        return sportList.size();
    }

}

修改MainActivity的代码

public class MainActivity extends AppCompatActivity {

    private List<Sport> sportList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 初始化数据
        initSport();
        RecyclerView recyclerView = findViewById(R.id.recycler_view);

        // 为RecyclerView指定线性布局
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);

        // 设置适配器
        SportAdapter adapter = new SportAdapter(sportList);
        recyclerView.setAdapter(adapter);
    }

    private void initSport() {
        for (int i = 0; i < 2; i++) {
            Sport archer = new Sport("archer", R.drawable.archer);
            sportList.add(archer);
            Sport athlete = new Sport("athlete", R.drawable.athlete);
            sportList.add(athlete);
            Sport badminton = new Sport("badminton", R.drawable.badminton);
            sportList.add(badminton);
            Sport bicycle = new Sport("bicycle", R.drawable.bicycle);
            sportList.add(bicycle);
            Sport diving = new Sport("diving", R.drawable.diving);
            sportList.add(diving);
            Sport fisher = new Sport("fisher", R.drawable.fisher);
            sportList.add(fisher);
            Sport pingpong = new Sport("pingpong", R.drawable.pingpong);
            sportList.add(pingpong);
            Sport swimming = new Sport("swimming", R.drawable.swimming);
            sportList.add(swimming);
            Sport volleyball = new Sport("volleyball", R.drawable.volleyball);
            sportList.add(volleyball);

        }
    }
}

这样就实现了RecyclerView的纵向滚动功能，效果图如下：

image.png

三、实现横向滚动和瀑布流

实现横向滚动的效果

修改sport_item布局文件代码,让图片和文字纵向排列,指定宽度让每个item一样大。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:showDividers="middle">

    <ImageView
        android:id="@+id/sport_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:id="@+id/sport_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp" />

</LinearLayout>

修改MainActivity，在layoutManager中传入LinearLayoutManager.HORIZONTAL

public class MainActivity extends AppCompatActivity {

    private List<Sport> sportList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ... ...
        
        // 为RecyclerView指定线性布局
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(layoutManager);

        ... ...
    }

    ... ...
    }
}

这样就实现了RecyclerView的横向滚动功能，效果图如下：

image.png

RecyclerView因为提供了LayoutManager,LayoutManager制定了一套可拓展的布局接口，子类（例如LinearLayoutManager）只要按照接口来实现就可以呈现不同的效果。
除了LinearLayoutManager之外，RecyclerView还提供了GirdLayouManager实现网格布局和StaggeredGridLayoutManager实现瀑布流布局。

实现瀑布流的效果

修改sport_item的代码,让瀑布流的宽度根据布局列数自动适配，让文字居左显示。

<?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"
    android:layout_margin="5dp">

    <ImageView
        android:id="@+id/sport_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:id="@+id/sport_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginTop="10dp" />

</LinearLayout>

修改MainActivity，指定RecyclerView的布局为StaggeredGrildLayout，布局分为4列。设置getRandomLengthName()来使每个item的文字段不一样长，方便看出瀑布流效果。

public class MainActivity extends AppCompatActivity {

    private List<Sport> sportList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 初始化数据
        initSport();
        RecyclerView recyclerView = findViewById(R.id.recycler_view);

        // 为RecyclerView指定线性布局
//        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
//        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        // 为RecyclerView指定4列的瀑布流布局
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(
                4, StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);

        // 设置适配器
        SportAdapter adapter = new SportAdapter(sportList);
        recyclerView.setAdapter(adapter);
    }

    // 写死的本地数据
    private void initSport() {
        for (int i = 0; i < 3; i++) {
            Sport archer = new Sport(getRamdomLengthName("archer"), R.drawable.archer);
            sportList.add(archer);
            
            ... ...
            
            Sport volleyball = new Sport(getRamdomLengthName("volleyball"), R.drawable.volleyball);
            sportList.add(volleyball);

        }
    }

    // 把名称copy随机次形成一段文字，使每个item不一样长
    private String getRamdomLengthName(String sportName) {
        Random random = new Random();
        int length = random.nextInt(15) + 1;
        StringBuilder builder = new StringBuilder();
        for (int i = 0; i < length; i++) {
            builder.append(sportName);
        }
        return builder.toString();
    }
}

这样就实现了RecyclerView的瀑布流布局，效果图如下：

image.png

四、RecyclerView的点击事件

一般来说，无论是ListView还是RecyclerView每个item都应该有点击事件，例如我们的新闻列表，点击进去应该都有新闻内容。RecyclerView没有像ListView一样的API去setOnItemClickListener()，点击事件由View去注册，但也更加灵活了。

修改apapter的代码，在ViewHolder中添加view变量来保存item布局实例，然后在onCreateViewHolder()中为item和image分别注册不同的点击事件，由于image是item布局的子View，所以当我们点击事件的时候，image会拦截并处理点击事件，事件消耗完之后父View item的点击事件就不会响应。

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

    private List<Sport> sportList;

    // 静态内部类ViewHolder保存控件
    static class ViewHolder extends RecyclerView.ViewHolder {

        View sportView;

        public ImageView getSportImage() {
            return sportImage;
        }

        ImageView sportImage;
        TextView sportName;

        // item为RecyclerView子项的外层布局
        public ViewHolder(View itemView) {
            super(itemView);
            sportView = itemView;
            sportImage = itemView.findViewById(R.id.sport_image);
            sportName = itemView.findViewById(R.id.sport_name);
        }
    }

    // 传入数据源sportList赋值给全局变量
    public SportAdapter(List<Sport> sportList) {
        this.sportList = sportList;
    }

    // 创建ViewHolder实例,先加载布局，再把布局传入viweHolder的实例中
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.sport_item, parent, false);
        final ViewHolder holder = new ViewHolder(view);

        // 设置item项的点击事件
        holder.sportView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int position = holder.getAdapterPosition();
                Sport sport = sportList.get(position);
                Toast.makeText(view.getContext(), "you click item " + sport.getName(),Toast.LENGTH_SHORT).show();
            }
        });

        // 设置image的点击事件
        holder.sportImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int position = holder.getAdapterPosition();
                Sport sport = sportList.get(position);
                Toast.makeText(view.getContext(), "you click image " + sport.getName(),Toast.LENGTH_SHORT).show();
            }
        });

        return holder;
    }

    ... ...

}

RecyclerView学习笔记（基础篇）
RecyclerView学习笔记一、RecyclerView的定义在以前的开发中，我们经常使用ListView...
实战代码（十一）：Springboot集成Hbase
一、理论基础 Hbase基础见另一篇笔记《学习笔记 | HBase学习笔记[https://www.jianshu...
Android学习笔记——Recycler使用详解之基础篇
今天来详细的学习RecyclerView的知识，从基础到详细的完全学会使用RecyclerView，首先是基础部分...
postgresql学习笔记--基础篇 -psql工具
【技术学习】postgresql学习笔记--基础篇 -psql工具 --创建用户CREATEROLE pguser...
接口测试基础学习笔记
慕课网接口测试基础视频课学习笔记接口测试基础之入门篇
面向Android的快速学习JavaScript笔记（基础篇中
继上篇面向Android的快速学习JavaScript笔记（基础篇上）之后继续补全JS快速学习笔记，这篇的知识...
RecyclerView基础篇-ItemDecoration
简介 Decoration在英文中的意思是装饰，在RecyclerView中ItemDecoration就是每一个...
Android——AsyncListDiffer
对AsyncListDiffer-RecyclerView最好的伙伴的学习笔记一、作用 DiffUtil.cal...
RecyclerView 学习笔记
RecyclerView version: 26.1.0 GitHub 使用RecyclerView很久了，应该是...
Flutter 学习笔记-基础篇
Flutter 学习笔记-基础篇如果你要获取与该笔记配套的源码，请点击这里[https://github.com...