美文网首页Android
在Android中使用RecyclerView - Part1

在Android中使用RecyclerView - Part1

作者: 伤口不该结疤 | 来源:发表于2021-03-19 23:21 被阅读0次

    概述

    RecyclerView可以高效地显示大量数据,并且可以自定义每个列表项的外观。接下来,我们会使用RecyclerView来创建一个列表,用作展示一个商品的序列号、名称和价格。运行效果如下图:

    运行效果

    实现步骤

    定义Product类

    列表中需要展示商品的名称、价格。首先,我们需要定义一个Product类,用作UI的数据呈现。
    新创建一个名为data的packge(如果新增了和数据相关的类,都放到这个packge下面),再创建一个Product类。

    创建Product类

    布局文件修改

    加入RecyclerView控件

    在activity_main.xml中加入RecyclerView控件,将id设置为recyclerView,代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    
    activity_main.xml中加入RecyclerView控件

    为列表中每个元素的外观

    1、创建一个名为cell.xml的布局文件

    创建cell.xml

    2、在cell布局文件中,加入3个TextView控件,分别用作展示序号、产品名称、产品价格,对应id为:indexnameprice

    cell布局
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.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:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <TextView
            android:id="@+id/index"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:textSize="24sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/guideline2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="产品名称"
            android:textSize="24sp"
            app:layout_constraintBottom_toTopOf="@+id/price"
            app:layout_constraintStart_toStartOf="@+id/guideline2"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:text="价格"
            android:textSize="18sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/name"
            app:layout_constraintTop_toBottomOf="@+id/name" />
    
        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.15085158" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    打开ViewBinding

    打开ViewBinding

    ViewBinding的使用可以参考:在Android中使用ViewBinding

    Java代码实现

    自定义Adapter和ViewHolder类

    ViewHolder是列表项布局(即cell.xml)的 View容器。Adapter会根据需要创建ViewHolder 对象,还会为这些视图设置数据。将视图与其数据相关联的过程称为“绑定”。

    新创建一个名为ui的packge(如果新增了和UI相关的类,都放到这个packge下面),再创建一个MyAdapter类和内部MyViewHolder类。


    自定义MyAdapter和MyViewHolder类
    package com.example.recyclerviewdemo.ui;
    
    import android.view.View;
    import android.view.ViewGroup;
    
    import androidx.annotation.NonNull;
    import androidx.recyclerview.widget.RecyclerView;
    
    public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    
        @NonNull
        @Override
        public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            return null;
        }
    
        @Override
        public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
    
        }
    
        @Override
        public int getItemCount() {
            return 0;
        }
    
        static class MyViewHolder extends RecyclerView.ViewHolder {
    
            public MyViewHolder(@NonNull View itemView) {
                super(itemView);
            }
        }
    }
    

    修改MyViewHolder类

    将MyViewHolder和cell布局文件关联起来

    static class MyViewHolder extends RecyclerView.ViewHolder {
        private CellBinding binding;
        
        public MyViewHolder(@NonNull CellBinding itemView) {
            super(itemView.getRoot());
            binding = itemView;
        }
    }
    

    修改MyAdapter

    1、 修改onCreateViewHolder
    每当RecyclerView需要创建新的ViewHolder 时,它都会调用onCreateViewHolder。此方法会创建并初始化ViewHolder及其关联的View,但不会填充视图的内容,因为ViewHolder此时尚未绑定到具体数据。

    在onCreateViewHolder将的cell布局文件的视图加载起来

    public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
        private CellBinding binding;
    
        @NonNull
        @Override
        public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            binding = CellBinding.inflate(LayoutInflater.from(parent.getContext()));
            return new MyViewHolder(binding);
        }
        ... ...
    }
    

    2、修改onBindViewHolder
    RecyclerView调用此方法将ViewHolder与数据相关联。onBindViewHolder会提取适当的数据,并使用该数据填充ViewHolder的布局。

    onBindViewHolder中给cell布局文件中的3个控件赋值。为了方便演示,直接在这个方法中创建了一个Product对象,实际项目中不能这样编写代码,在后续文章中会介绍如何使用ViewModel管理Product的数据。

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        // TODO: Add for test
        Product product = new Product();
        product.setName("哇哈哈AD钙奶");
        product.setPrice(2);
        binding.name.setText(product.getName());
        binding.price.setText(product.getPrice() + "¥");
        binding.index.setText(String.valueOf(position + 1));
    }
    

    3、修改getItemCount
    RecyclerView调用getItemCount来获取数据集的大小
    为了方便演示,直接返回item的个数为1

    @Override
    public int getItemCount() {
        // TODO: Add for test
        return 1;
    }
    

    设置LayoutManagerAdpater

    最后,在MainActivity中设置RecyclerViewLayoutManagerAdapter,就完成了所有代码的编写

    public class MainActivity extends AppCompatActivity {
        private ActivityMainBinding binding;
        private MyAdapter adapter;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            binding = ActivityMainBinding.inflate(getLayoutInflater());
            setContentView(binding.getRoot());
    
            binding.recyclerView.setLayoutManager(new LinearLayoutManager(this));
            adapter = new MyAdapter();
            binding.recyclerView.setAdapter(adapter);
        }
    }
    

    运行

    运行效果如下:


    运行效果

    我们可以尝试把count改成10

    @Override
    public int getItemCount() {
        // TODO: Add for test
        return 10;
    }
    

    运行效果如下:

    运行效果

    参考

    使用 RecyclerView 创建动态列表

    完整代码

    https://github.com/zhanghuamao/RecyclerViewDemo

    相关文章

      网友评论

        本文标题:在Android中使用RecyclerView - Part1

        本文链接:https://www.haomeiwen.com/subject/ijwbcltx.html