简单的 Android RecyclerView 示例

新手上路,请多包涵

我已经使用 Android 的 RecyclerView 制作了几次项目列表,但这是一个相当复杂的过程。浏览众多在线教程之一( thisthisthis 都很好),但我正在寻找一个简单的示例,我可以复制和粘贴以快速启动和运行。仅需要以下功能:

  • 垂直布局
  • 每行有一个 TextView
  • 响应点击事件

因为我多次希望这个,我最终决定在下面做出答案,以供我和你的参考。

原文由 Suragch 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 552
2 个回答

以下是一个类似于下图的最小示例。

带有动物名称列表的 RecyclerView

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

  • 将依赖项添加到 gradle
  • 为活动和 RecyclerView 行添加 xml 布局文件
  • 制作 RecyclerView 适配器
  • 在你的活动中初始化 RecyclerView

更新 Gradle 依赖项

确保您的应用程序中有以下依赖 gradle.build 文件:

 implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'

您可以将版本号更新为 最新 的。如果您仍在使用 Android Studio 2.x,请使用 compile 而不是 implementation

创建活动布局

RecyclerView 添加到您的 xml 布局中。

_activitymain.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/rvAnimals"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

创建行布局

我们的 RecyclerView 中的每一行只会有一个 TextView 。创建一个新的布局资源文件。

_recyclerviewrow.xml

 <?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="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp">

    <TextView
        android:id="@+id/tvAnimalName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"/>

</LinearLayout>

创建适配器

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

MyRecyclerViewAdapter.java

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

    private List<String> mData;
    private LayoutInflater mInflater;
    private ItemClickListener mClickListener;

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

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

    // binds the data to the TextView in each row
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        String animal = mData.get(position);
        holder.myTextView.setText(animal);
    }

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

    // 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.tvAnimalName);
            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.get(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);
    }
}

笔记

  • 虽然不是绝对必要的,但我包含了侦听行上的点击事件的功能。这在旧的 ListViews 中可用,并且是常见的需求。如果不需要,可以删除此代码。

在Activity中初始化RecyclerView

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

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
        ArrayList<String> animalNames = new ArrayList<>();
        animalNames.add("Horse");
        animalNames.add("Cow");
        animalNames.add("Camel");
        animalNames.add("Sheep");
        animalNames.add("Goat");

        // set up the RecyclerView
        RecyclerView recyclerView = findViewById(R.id.rvAnimals);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        adapter = new MyRecyclerViewAdapter(this, animalNames);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }

    @Override
    public void onItemClick(View view, int position) {
        Toast.makeText(this, "You clicked " + adapter.getItem(position) + " on row number " + position, Toast.LENGTH_SHORT).show();
    }
}

笔记

  • 请注意,该活动实现了我们在适配器中定义的 ItemClickListener 。这允许我们在 onItemClick 中处理行点击事件。

完成的

而已。您现在应该能够运行您的项目并获得类似于顶部图像的内容。

继续

在行之间添加分隔线

您可以像这样添加一个简单的分隔线

DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
    layoutManager.getOrientation());
recyclerView.addItemDecoration(dividerItemDecoration);

如果您想要更复杂的东西,请参阅以下答案:

单击更改行颜色

有关如何更改背景颜色并在单击一行时添加波纹效果的信息,请参阅 此答案

插入单个项目

更新行

有关如何添加、删除和更新行的信息,请参阅 此答案

插入单个项目

进一步阅读

原文由 Suragch 发布,翻译遵循 CC BY-SA 4.0 许可协议

要开始,只需在 Recycler 视图中查看某些内容

回收器视图适配器可以是这样的。

 class CustomAdapter: RecyclerView.Adapter<CustomAdapter.ViewHolder>() {
    var data =  listOf<String>()
        set(value) {
            field = value
            notifyDataSetChanged()
        }
    override fun getItemCount() =data.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.txt.text= data[position]
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(
            LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false)
        )
    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView){
        val txt: TextView = itemView.findViewById(R.id.item_text_view)
    }
}

并将适配器附加到回收器视图并将数据附加到适配器

val view = findViewById<RecyclerView>(R.id.recycler_view)
val adapter = CustomAdapter()
val data = listOf("text1", "text2", "text3")
adapter.data = data
view.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false)
view.adapter = adapter


原文由 Harsh 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题