android recyclerview 实现GridView viewpager androidx.recyclerview.widget.recyclerview

转载

mob64ca140a1f7c 2023-12-14 16:10:41

文章标签 android xml List 文章分类 Android 移动开发

Android–RecyclerView控件

一、RecyclerView的基本用法
首先在app/build.gradle文件，在dependencies添加如下内容：

implementation "androidx.recyclerview:recyclerview:1.1.0"
    // For control over item selection of both touch and mouse driven selection
    implementation "androidx.recyclerview:recyclerview-selection:1.1.0-rc01"

这是从官方找的依赖，v7包在Androidx中已经不能使用，sync Now 同步之后修改xml的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http:///apk/res/android"
    xmlns:app="http:///apk/res-auto"
    xmlns:tools="http:///tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


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


</LinearLayout>

接着写Fruit类：

package com.example.recycler_view;

public class Fruit {
        private  String name;
        private  int imaged_id;
        public Fruit(String name, int imaged_id)
        {
            =name;
            this.imaged_id=imaged_id;
        }
        public String getName(){
            return name;
        }
        public int getImaged_id(){
            return  imaged_id;
        }
}

Fruit类包含水果名字和水果图片的资源ID，要写一个Fruit类的构造函数。
再定义一个自定义布局fruit_item,修改代码如下：

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fruit_image"/>
    <TextView
    	android:layout_marginLeft="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:id="@+id/fruit_name"/>
</LinearLayout>

其中ImageView用于显示水果图片，TextView用于显示水果名字

截下来为RecyclerView准备一个适配器，新建FruitAdapter类（名字可以随便取），让这个适配器继承于RecyclerView.Adapter，并将泛型指定为FruitAdapter.ViewHolder(我们在FruitAdapter中指定的一个内部类），代码如下：

package com.example.recycler_view;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHoler> {
    private List<Fruit>mFruitlist;

    /**
     * 定义一个内部类Viewholder继承于Recylerview.viewholder
     * 构造函数传递一个参数View(fruit_item)
     */
    static  class ViewHoler extends RecyclerView.ViewHolder{
        ImageView fruitImage;
        TextView fruitName;
        //设置点击事件

        public ViewHoler(View itemView) {
            super(itemView);
            fruitImage=(ImageView)itemView.findViewById((.fruit_image));
            fruitName = (TextView)itemView.findViewById(.fruit_name);
        }
    }
    //构造函数给mFruitlist赋值
    public FruitAdapter(List<Fruit>fruitList){
        mFruitlist=fruitList;
    }
    @Override
    //创建viewholder的实例，将fruit_item传进来
    public FruitAdapter.ViewHoler onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.fruit_item,parent,false);
        final RecyclerView.ViewHolder holder = new         					 ViewHoler(view);

        return (ViewHoler) holder;
    }

    @Override
    //每个item实例化
    public void onBindViewHolder(@NonNull final FruitAdapter.ViewHoler holder, int position) {
        final Fruit fruit = mFruitlist.get(position);
        holder.fruitName.setText(fruit.getName());
        older.fruitImage.setImageResource(fruit.getImaged_id());
   }

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


}

重写了RecyclerView,Adapter的三个方法，代码中有注释就不解释了。
修改MainActivity中的代码如下：

package com.example.recycler_view;

import .AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import android.os.Bundle;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class MainActivity extends AppCompatActivity {
    private String data[] = {"Apple", "Banana", "Orange", "Watermelon",
            "Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango" };
    private List<Fruit>fruitList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();
        RecyclerView recyclerView = (RecyclerView)findViewById(.recycler_view);
        /**
         * LinearLayoutManager并不是一个View，而是一个工具类，
         * 但是LinearLayoutManager承担了一个View(当然指的是RecyclerView)的布局
         * 、测量、子View 创建 复用 回收 缓存 滚动等等操作
         * 这里的LinearLayoutManager用于指定recycleview的布局方式（线性布局），与listView类似效果
         */
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        //layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//横向布局
        recyclerView.setLayoutManager(layoutManager);
        FruitAdapter fruitAdapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(fruitAdapter);//实现数据关联
}
private void initFruit() {
        for(int i=0;i<2;i++)
        {
            Fruit apple = new Fruit("Apple", R.drawable.mango);
            fruitList.add(apple);
            Fruit banana = new Fruit("Banana", R.drawable.mango);
            fruitList.add(banana);
            Fruit orange = new Fruit("Orange", R.drawable.mango);
            fruitList.add(orange);
            Fruit watermelon = new Fruit("Watermelon", R.drawable.mango);
            fruitList.add(watermelon);
            Fruit pear = new Fruit("Pear", R.drawable.mango);
            fruitList.add(pear);
            Fruit grape = new Fruit("Grape", R.drawable.mango);
            fruitList.add(grape);
            Fruit pineapple = new Fruit("Pineapple", R.drawable.mango);
            fruitList.add(pineapple);
            Fruit strawberry = new Fruit("Strawberry", R.drawable.mango);
            fruitList.add(strawberry);
            Fruit cherry = new Fruit("Cherry", R.drawable.mango);
            fruitList.add(cherry);
            Fruit mango = new Fruit("Mango", R.drawable.mango);
            fruitList.add(mango);
        }


    }

创建了一个LinearlayoutMannager对象，并把他设置到RecyclerView中，这里的LinearLayout是线性布局的意思，接下来创建FruitAdapter的实例，再setAdapter关联起来就行了，运行效果如下：

android recyclerview 实现GridView viewpager androidx.recyclerview.widget.recyclerview_android

因为图片的资源文件是用的同一张，所以图片就显示的一个。这样就简单的实现和listview一样的滚动布局

二、实现横向布局和瀑布流布局
这部分就是比ListView更加强大的部分。
横向布局的实习很简单，只需稍微修改一下fruit_item和MainActivity中的代码即可。
fruit_item:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http:///apk/res/android"
    android:orientation="vertical"
    android:layout_width="100dp"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_height="wrap_content"
        android:id="@+id/fruit_image"/>
    <TextView
        android:text="mango"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fruit_name"
        android:layout_marginTop="10dp"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>

这里吧LinearLayout改为垂直排列，并把宽度设置为100dp（文字长度好统一），且textView和ImageView水平居中

接下来修改MainAcitivity的代码如下：

public class MainActivity extends AppCompatActivity {
    private String data[] = {"Apple", "Banana", "Orange", "Watermelon",
            "Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango" };
    private List<Fruit>fruitList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();
        RecyclerView recyclerView = (RecyclerView)findViewById(.recycler_view);
        /**
         * LinearLayoutManager并不是一个View，而是一个工具类，
         * 但是LinearLayoutManager承担了一个View(当然指的是RecyclerView)的布局
         * 、测量、子View 创建 复用 回收 缓存 滚动等等操作
         * 这里的LinearLayoutManager用于指定recycleview的布局方式（线性布局），与listView类似效果
         */
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//横向布局
         recyclerView.setLayoutManager(layoutManager);
        FruitAdapter fruitAdapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(fruitAdapter);//实现数据关联
}

掉用了LinearLayoutMannager的setOrientation()方法来设置布局的排列方向，默认为纵向排列，这里传入LinearLayoutMannager.HORIZONTAL表示让布局横向排列.

效果图如下：

android recyclerview 实现GridView viewpager androidx.recyclerview.widget.recyclerview_android_02

瀑布流布局：

修改fruit_item的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http:///apk/res/android"
    android:orientation="vertical"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_height="wrap_content"
        android:id="@+id/fruit_image"/>
    <TextView
		android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fruit_name"
        android:layout_marginTop="10dp"
        android:layout_gravity="left"/>
</LinearLayout>

TextView之所以改为layout_gravity=“left”,因为后面会实现名字变化的操作，居中会不好看
修改MainActivity的代码如下：

package com.example.recycler_view;

import .AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import android.os.Bundle;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class MainActivity extends AppCompatActivity {
    private String data[] = {"Apple", "Banana", "Orange", "Watermelon",
            "Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango" };
    private List<Fruit>fruitList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();
        RecyclerView recyclerView = (RecyclerView)findViewById(.recycler_view);
        /**
         * LinearLayoutManager并不是一个View，而是一个工具类，
         * 但是LinearLayoutManager承担了一个View(当然指的是RecyclerView)的布局
         * 、测量、子View 创建 复用 回收 缓存 滚动等等操作
         * 这里的LinearLayoutManager用于指定recycleview的布局方式（线性布局），与listView类似效果
         */
        //LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        //layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//横向布局
        /**
         * 瀑布流显示
         */
        StaggeredGridLayoutManager layoutManager = new
                StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);//3列，垂直分布，瀑布流

        recyclerView.setLayoutManager(layoutManager);
        FruitAdapter fruitAdapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(fruitAdapter);//实现数据关联
    }

    private void initFruits() {
        for(int i=0;i<2;i++)
        {
            Fruit apple = new Fruit(getRandLengthName("Apple"), R.drawable.mango);
            fruitList.add(apple);
            Fruit banana = new Fruit(getRandLengthName("Banana"), R.drawable.mango);
            fruitList.add(banana);
            Fruit orange = new Fruit(getRandLengthName("Orange"), R.drawable.mango);
            fruitList.add(orange);
            Fruit watermelon = new Fruit(getRandLengthName("watermelon"), R.drawable.mango);
            fruitList.add(watermelon);
            Fruit pear = new Fruit(getRandLengthName("pear"), R.drawable.mango);
            fruitList.add(pear);
            Fruit grape = new Fruit(getRandLengthName("grape"), R.drawable.mango);
            fruitList.add(grape);
            Fruit pineapple = new Fruit(getRandLengthName("pineapple"), R.drawable.mango);
            fruitList.add(pineapple);
            Fruit strawberry = new Fruit(getRandLengthName("strawberry"), R.drawable.mango);
            fruitList.add(strawberry);
            Fruit cherry = new Fruit(getRandLengthName("cherry"), R.drawable.mango);
            fruitList.add(cherry);
            Fruit mango = new Fruit(getRandLengthName("mango"), R.drawable.mango);
            fruitList.add(mango);
        }
    }

    private String getRandLengthName(String name) {//把名字变长显示
        Random random = new Random();
        int length = random.nextInt(20)+1;//length范围1~21
        StringBuilder stringBuilder = new StringBuilder();//可变字符序列
        for (int i=0;i<length;i++)
        {
            stringBuilder.append(name);
        }
        return stringBuilder.toString();
    }
}

存有注释就不一解释，主要运用到了StaggerdGridLayoutMannger。

运行图如下：

android recyclerview 实现GridView viewpager androidx.recyclerview.widget.recyclerview_xml_03

三、RecyclerView的点击事件

与listView不同，recycyclerView的子控件的点击事件不能调取setItemOnclicklistener()方法，而是在Adapter里面实现，这样虽然麻烦了一些，但是也有好处，例如你可以为各个Item的子控件实现点击事件（TextView,ImageView等），而不是点击Item就响应点击事件，更加注重于细节处理了，在FruitAdapter中修改代码如下：

package com.example.recycler_view;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHoler> {
    private List<Fruit>mFruitlist;

    /**
     * 定义一个内部类Viewholder继承于Recylerview.viewholder
     * 构造函数传递一个参数View(fruit_item)
     */
    static  class ViewHoler extends RecyclerView.ViewHolder{
        ImageView fruitImage;
        TextView fruitName;
        //设置点击事件

        public ViewHoler(View itemView) {
            super(itemView);
            fruitImage=(ImageView)itemView.findViewById((.fruit_image));
            fruitName = (TextView)itemView.findViewById(.fruit_name);
        }
    }
    //构造函数给mFruitlist赋值
    public FruitAdapter(List<Fruit>fruitList){
        mFruitlist=fruitList;
    }
    @Override
    //创建viewholder的实例，将fruit_item传进来
    public FruitAdapter.ViewHoler onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.fruit_item,parent,false);
        final RecyclerView.ViewHolder holder = new ViewHoler(view);
//
//        holder.itemView.setOnClickListener(new View.OnClickListener() {
//
//          @Override
//            public void onClick(View v) {
//                int position = holder.getAdapterPosition();
//                Fruit fruit = mFruitlist.get(position);
//                Toast.makeText(v.getContext(),"you click this one"+fruit.getName(),Toast.LENGTH_SHORT).show();
//            }
//        });
        return (ViewHoler) holder;
    }

    @Override
    //每个item实例化
    public void onBindViewHolder(@NonNull final FruitAdapter.ViewHoler holder, int position) {
        final Fruit fruit = mFruitlist.get(position);
        holder.fruitName.setText(fruit.getName());
        holder.fruitName.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitlist.get(position);
                Toast.makeText(v.getContext(),"you click the name:"+"\n"+fruit.getName(),Toast.LENGTH_SHORT).show();
            }
        });
        holder.fruitImage.setImageResource(fruit.getImaged_id());
        holder.fruitImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitlist.get(position);
                Toast.makeText(v.getContext(),"you click the picture:"+"\n"+fruit.getName(),Toast.LENGTH_SHORT).show();
            }
        });

    }

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


}

这里我再onBindViewHolder（）方法中实现了TextView和ImageView的点击事件（Toast）,本节内容大致如此

运行图如下：

android recyclerview 实现GridView viewpager androidx.recyclerview.widget.recyclerview_List_04