使用 RecyclerView 和 GridLayoutManager 的简单 Android 网格示例(如旧的 GridView) [英] Simple Android grid example using RecyclerView with GridLayoutManager (like the old GridView)

查看：20
本文介绍了使用 RecyclerView 和 GridLayoutManager 的简单 Android 网格示例(如旧的 GridView)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道RecyclerView 已经取代了旧的ListView 和GridView 的功能.我正在寻找一个非常基本的示例，该示例显示使用 RecyclerView 的最小网格设置.我不是在寻找长篇教程风格的解释，只是一个最小的例子.我想模仿旧 GridView 的最简单的网格将包含以下功能:

  • 每行多个单元格
  • 每个单元格中的单个视图
  • 响应点击事件

解决方案

简短回答

对于那些已经熟悉

从一个空的活动开始.您将执行以下任务来添加 RecyclerView 网格.您需要做的就是复制并粘贴每个部分中的代码.稍后您可以自定义它以满足您的需求.

  • 向 gradle 添加依赖项
  • 为活动和网格单元添加 xml 布局文件
  • 制作 RecyclerView 适配器
  • 在您的活动中初始化 RecyclerView

更新 Gradle 依赖

确保以下依赖项位于您的应用 gradle.build 文件中:

编译'com.android.support:appcompat-v7:27.1.1'编译'com.android.support:recyclerview-v7:27.1.1'

您可以将版本号更新为最新的.

创建活动布局

将 RecyclerView 添加到您的 xml 布局.

activity_main.xml

<android.support.v7.widget.RecyclerViewandroid:id="@+id/rvNumbers"android:layout_width="match_parent"android:layout_height="match_parent"/></RelativeLayout>

创建网格单元格布局

我们RecyclerView 网格中的每个单元格只会有一个TextView.创建一个新的布局资源文件.

recyclerview_item.xml

<文本视图android:id="@+id/info_text"android:layout_width="match_parent"android:layout_height="match_parent"机器人:重力=中心"android:background="@color/colorAccent"/></LinearLayout>

创建适配器

RecyclerView 需要一个适配器来用您的数据填充每个单元格中的视图.创建一个新的 java 文件.

MyRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter{私有字符串[] mData;私人 LayoutInflater mInflater；私人 ItemClickListener mClickListener;//数据传入构造函数MyRecyclerViewAdapter(上下文上下文，字符串 [] 数据){this.mInflater = LayoutInflater.from(context);this.mData = 数据；}//在需要时从 xml 扩展单元格布局@覆盖@非空public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {查看视图 = mInflater.inflate(R.layout.recyclerview_item, parent, false);返回新的 ViewHolder(view);}//将数据绑定到每个单元格中的TextView@覆盖public void onBindViewHolder(@NonNull ViewHolder holder, int position) {holder.myTextView.setText(mData[位置]);}//单元格总数@覆盖公共 int getItemCount() {返回 mData.length;}//当视图滚动到屏幕外时存储和回收视图公共类 ViewHolder 扩展 RecyclerView.ViewHolder 实现 View.OnClickListener {文本视图 myTextView;ViewHolder(查看 itemView){超级(项目视图)；myTextView = itemView.findViewById(R.id.info_text);itemView.setOnClickListener(this);}@覆盖公共无效onClick(查看视图){if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());}}//获取点击位置数据的便捷方法字符串 getItem(int id) {返回 mData[id];}//允许捕获点击事件void setClickListener(ItemClickListener itemClickListener) {this.mClickListener = itemClickListener;}//父Activity会实现这个方法来响应点击事件公共接口 ItemClickListener {void onItemClick(View view, int position);}}

注意事项

  • 虽然不是绝对必要的，但我包含了用于侦听单元格上的点击事件的功能.这在旧的 GridView 中可用，并且是一个常见的需求.如果您不需要此代码，可以删除它.

在Activity中初始化RecyclerView

将以下代码添加到您的主要活动中.

MainActivity.java

公共类 MainActivity 扩展 AppCompatActivity 实现 MyRecyclerViewAdapter.ItemClickListener {MyRecyclerViewAdapter 适配器；@覆盖protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//用于填充 RecyclerView 的数据String[] 数据 = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11",12"、13"、14"、15"、16"、17"、18"、19"、20"、21"、22"、23"、24"", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36",37"、38"、39"、40"、41"、42"、43"、44"、45"、46"、47"、48"}；//设置 RecyclerViewRecyclerView recyclerView = findViewById(R.id.rvNumbers);int numberOfColumns = 6;recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));适配器 = 新的 MyRecyclerViewAdapter(this, data);适配器.setClickListener(this);recyclerView.setAdapter(适配器)；}@覆盖public void onItemClick(View view, int position) {Log.i("TAG", "您点击的数字" + adapter.getItem(position) + "，位于单元格位置" + position);}}

注意事项

  • 请注意，该活动实现了我们在适配器中定义的 ItemClickListener.这允许我们在 onItemClick 中处理单元格点击事件.

完成

就是这样.您现在应该能够运行您的项目并获得与顶部图像类似的内容.

继续

圆角

自动调整列

进一步研究

I know that RecyclerView has replaced the functionality of the old ListView and GridView. I am looking for a very basic example that shows a minimal grid setup using RecyclerView. I am not looking for long tutorial style explanations, just a minimal example. I imagine the simplest grid that mimics the old GridView would consist of the following features:

  • multiple cells per row
  • single view in each cell
  • responds to click events

解决方案

Short answer

For those who are already familiar with setting up a RecyclerView to make a list, the good news is that making a grid is largely the same. You just use a GridLayoutManager instead of a LinearLayoutManager when you set the RecyclerView up.

recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));

If you need more help than that, then check out the following example.

Full example

The following is a minimal example that will look like the image below.

Start with an empty activity. You will perform the following tasks to add the RecyclerView grid. All you need to do is copy and paste the code in each section. Later you can customize it to fit your needs.

  • Add dependencies to gradle
  • Add the xml layout files for the activity and for the grid cell
  • Make the RecyclerView adapter
  • Initialize the RecyclerView in your activity

Update Gradle dependencies

Make sure the following dependencies are in your app gradle.build file:

compile 'com.android.support:appcompat-v7:27.1.1'
compile 'com.android.support:recyclerview-v7:27.1.1'

You can update the version numbers to whatever is the most current.

Create activity layout

Add the RecyclerView to your xml layout.

activity_main.xml

<?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="match_parent">

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

</RelativeLayout>

Create grid cell layout

Each cell in our RecyclerView grid is only going to have a single TextView. Create a new layout resource file.

recyclerview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:padding="5dp"
    android:layout_width="50dp"
    android:layout_height="50dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@color/colorAccent"/>

</LinearLayout>

Create the adapter

The RecyclerView needs an adapter to populate the views in each cell with your data. Create a new java file.

MyRecyclerViewAdapter.java

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

    private String[] mData;
    private LayoutInflater mInflater;
    private ItemClickListener mClickListener;

    // data is passed into the constructor
    MyRecyclerViewAdapter(Context context, String[] data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    // inflates the cell layout from xml when needed
    @Override
    @NonNull 
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
        return new ViewHolder(view);
    }

    // binds the data to the TextView in each cell
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.myTextView.setText(mData[position]);
    }

    // total number of cells
    @Override
    public int getItemCount() {
        return mData.length;
    }


    // stores and recycles views as they are scrolled off screen
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        TextView myTextView;

        ViewHolder(View itemView) {
            super(itemView);
            myTextView = itemView.findViewById(R.id.info_text);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
        }
    }

    // convenience method for getting data at click position
    String getItem(int id) {
        return mData[id];
    }

    // allows clicks events to be caught
    void setClickListener(ItemClickListener itemClickListener) {
        this.mClickListener = itemClickListener;
    }

    // parent activity will implement this method to respond to click events
    public interface ItemClickListener {
        void onItemClick(View view, int position);
    }
}

Notes

  • Although not strictly necessary, I included the functionality for listening for click events on the cells. This was available in the old GridView and is a common need. You can remove this code if you don't need it.

Initialize RecyclerView in Activity

Add the following code to your main activity.

MainActivity.java

public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {

    MyRecyclerViewAdapter adapter;

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

        // data to populate the RecyclerView with
        String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"};

        // set up the RecyclerView
        RecyclerView recyclerView = findViewById(R.id.rvNumbers);
        int numberOfColumns = 6;
        recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
        adapter = new MyRecyclerViewAdapter(this, data);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }

    @Override
    public void onItemClick(View view, int position) {
        Log.i("TAG", "You clicked number " + adapter.getItem(position) + ", which is at cell position " + position);
    }
}

Notes

  • Notice that the activity implements the ItemClickListener that we defined in our adapter. This allows us to handle cell click events in onItemClick.

Finished

That's it. You should be able to run your project now and get something similar to the image at the top.

Going on

Rounded corners

Auto-fitting columns

Further study

这篇关于使用 RecyclerView 和 GridLayoutManager 的简单 Android 网格示例(如旧的 GridView)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆