Android之RecyclerView

最新推荐文章于 2024-04-29 07:16:32 发布

生来如风

最新推荐文章于 2024-04-29 07:16:32 发布

阅读量604

点赞数 1

分类专栏： View 文章标签： android

本文链接：https://blog.csdn.net/qq_39438055/article/details/104147848

版权

View 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

1、垂直滚动
2、水平滚动
3、瀑布流布局
4、网格布局
5、为RecyclerView添加OnClickListner实现单击事件监听

垂直滚动

一、准备工作
在app/build.gradle的dependencies中，加入以下一行代码

implementation 'androidx.recyclerview:recyclerview:1.1.0'

二、activity_main.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="match_parent"
    >

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

</LinearLayout>

三、Fruit类

package com.example.recycleviewtest;


public class Fruit {

    private String name;

    private int  imageId;

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


    public int getImageId() {
        return imageId;
    }

    public String getName() {
        return name;
    }
}

四、为指定的RecyclerView的子项指定我们自定义的布局fruit_item.xml

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

    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="80dp"
        android:layout_height="80dp" />

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

</LinearLayout>

五、为Fruit创建其独特的适配器FruitAdapter.java

package com.example.recycleviewtest;


import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

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

import java.util.List;

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


    private List<Fruit> mFruitList;

    /**
     * 定义内部类ViewHolder 继承自 RecyclerView.ViewHolder
     */
    static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView fruitImage;
        TextView fruitName;

        /**
         * 构造参数中传入参数view
         * @param view RecyclerView子项的最外层布局
         */
        public ViewHolder(@NonNull View view) {
            super(view);
            fruitImage=(ImageView)view.findViewById(R.id.fruit_image);
            fruitName=(TextView)view.findViewById(R.id.fruit_name);
        }
    }

    /**
     * 传入数据源
     * @param fruitList
     */
    public FruitAdapter(List<Fruit> fruitList){
        mFruitList=fruitList;
    }

    /**
     * 重写onCreateViewHolder方法，用于创建ViewHolder实例，并把加载出来的布局传入到构造函数中，最后将ViewHolder的实例返回
     * @param parent
     * @param viewType
     * @return
     */
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext())
                .inflate(R.layout.fruit_item,parent,false);
        ViewHolder holder=new ViewHolder(view);
        return holder;
    }

    /**
     * 对RecyclerView子项的数据进行赋值，会在每个子项被滚动到屏幕内的时候执行
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Fruit fruit=mFruitList.get(position);
        holder.fruitImage.setImageResource(fruit.getImageId());
        holder.fruitName.setText(fruit.getName());
    }

    /**
     * 告诉RecyclerView有多少子项
     * @return
     */
    @Override
    public int getItemCount() {
        return mFruitList.size();
    }
}

六、在MainActivity.java中加入相关代码

package com.example.recycleviewtest;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<Fruit> fruitList=new ArrayList<>();
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //初始化水果数据
        initFruits();

        //获取RecyclerView的实例
        RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_view);

        //指定RecyclerView的布局方式
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);

        //为RecyclerView设置Adapter
        FruitAdapter adapter=new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
        
    }

    private void initFruits() {

        for (int i = 0; i < 20 ; i++) {


            Fruit apple=new Fruit("Apple",R.drawable.apple_pic);
            fruitList.add(apple);

            Fruit banana=new Fruit("Banana",R.drawable.banana_pic);
            fruitList.add(banana);

            Fruit orange=new Fruit("Orange",R.drawable.orange_pic);
            fruitList.add(orange);

            Fruit pear=new Fruit("Pear",R.drawable.pear_pic);
            fruitList.add(pear);

            Fruit watermelon=new Fruit("Watermelon",R.drawable.watermelon_pic);
            fruitList.add(watermelon);

            Fruit grape=new Fruit("Grape",R.drawable.grape_pic);
            fruitList.add(grape);

            Fruit pineapple=new Fruit("Pineapple",R.drawable.pineapple_pic);
            fruitList.add(pineapple);

            Fruit strawberry=new Fruit("Strawberry",R.drawable.strawberry_pic);
            fruitList.add(strawberry);



        }
    }
}

七、运行效果
在这里插入图片描述

水平滚动

一、修改自定义布局文件fruit_item.xml

android:orientation="vertical"  将LinearLayout设置为垂直布局
android:layout_width="100dp"  将宽度设置为100dp

android:layout_gravity="center_horizontal" 设置水平居中
android:layout_marginTop="10dp" 让文字与图片保持一些距离

修改后的代码：

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

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

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

</LinearLayout>

二、修改MainActivity.java

新增一句代码layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

此代码将设置布局管理器layoutManager的布局方向为水平，默认为垂直

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //初始化水果数据
        initFruits();

        //获取RecyclerView的实例
        RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_view);

        //指定RecyclerView的布局方式
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);

        //将设置布局管理器layoutManager的布局方向为水平,默认为垂直
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL)；
        recyclerView.setLayoutManager(layoutManager);

        //为RecyclerView设置Adapter
        FruitAdapter adapter=new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
        
    }

三、运行效果
Screenshot_20200203-091755.pngScreenshot_20200203-091755.png

瀑布流布局

一、修改自定义布局文件fruit_item.xml
android:layout_width="match_parent"
瀑布流布局的宽度根据列数自适应

android:layout_margin="5dp"
每个子项之间间隔5dp

android:layout_gravity="left"
居左对齐，等下文字的长度变长，居中会显得很奇怪

修改后的代码：

<?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/item_image"
        android:layout_gravity="center_horizontal"
        android:layout_width="64dp"
        android:layout_height="64dp">
    </ImageView>

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


</LinearLayout>

二、修改MainActivity.java

1、新增以下方法，用于得到一个随机长度的字符串

 private String getRandomLengthName(String name) {

        Random random=new Random();
        int length=random.nextInt(20)+1;
        StringBuilder builder=new StringBuilder();
        for (int i = 0; i < length; i++) {
            builder.append(name);
        }
        return builder.toString();
    }

2、修改以下代码：在OnCreate方法中修改

①LinearLayoutManager layoutManager=new LinearLayoutManager(this); StaggeredGridLayoutManager layoutManager=new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
用于指定RecyclerView的布局方式为 3列纵向瀑布流布局

②在initItem方法中调用getRandomLengthName方法

修改后，MainActivity.java代码如下

package com.example.recycleviewtest;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class MainActivity extends AppCompatActivity {

    private List<Fruit> fruitList=new ArrayList<>();
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //初始化水果数据
        initFruits();

        //获取RecyclerView的实例
        RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_view);

        //参数1：把布局分成三列   参数2：让布局纵向排列
        StaggeredGridLayoutManager layoutManager=new StaggeredGridLayoutManager(
                3,StaggeredGridLayoutManager.VERTICAL);
                
        recyclerView.setLayoutManager(layoutManager);

        //为RecyclerView设置Adapter
        FruitAdapter adapter=new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
        
    }

    private void initFruits() {

        for (int i = 0; i < 2 ; i++) {
        
            Fruit apple=new Fruit(getRandomLengthName("Apple"),R.drawable.apple_pic);
            fruitList.add(apple);

            Fruit banana=new Fruit(getRandomLengthName("Banana"),R.drawable.banana_pic);
            fruitList.add(banana);

            Fruit orange=new Fruit(getRandomLengthName("Orange"),R.drawable.orange_pic);
            fruitList.add(orange);

            Fruit pear=new Fruit(getRandomLengthName("Pear"),R.drawable.pear_pic);
            fruitList.add(pear);

            Fruit watermelon=new Fruit(getRandomLengthName("Watermelon"),R.drawable.watermelon_pic);
            fruitList.add(watermelon);

            Fruit grape=new Fruit(getRandomLengthName("Grape"),R.drawable.grape_pic);
            fruitList.add(grape);

            Fruit pineapple=new Fruit(getRandomLengthName("Pineapple"),R.drawable.pineapple_pic);
            fruitList.add(pineapple);

            Fruit strawberry=new Fruit(getRandomLengthName("Strawberry"),R.drawable.strawberry_pic);
            fruitList.add(strawberry);

        }
    }

    private String getRandomLengthName(String name) {

        Random random=new Random();
        int length=random.nextInt(20)+1;
        StringBuilder builder=new StringBuilder();
        for (int i = 0; i < length; i++) {
            builder.append(name);
        }
        return builder.toString();
    }
}

三、运行效果

在这里插入图片描述

网格布局

一、修改MainActivity.java

1、将3列纵向瀑布流布局

StaggeredGridLayoutManager layoutManager=new StaggeredGridLayoutManager (3,StaggeredGridLayoutManager.VERTICAL);

修改为：5列纵向翻转网格布局

GridLayoutManager layoutManager=new GridLayoutManager(this,5,GridLayoutManager.VERTICAL,true);

对应运行效果

在这里插入图片描述

2、将3列纵向瀑布流布局

StaggeredGridLayoutManager layoutManager=new StaggeredGridLayoutManager (3,StaggeredGridLayoutManager.VERTICAL);

修改为：5列纵向不翻转网格布局

GridLayoutManager layoutManager=new GridLayoutManager(this,5,GridLayoutManager.VERTICAL,false);

对应运行效果

在这里插入图片描述

为RecyclerView添加OnClickListner实现单击事件监听

与ListView不同的是，RecyclerView没有提供类似于setOnItemClickListener()这样的注册监听器的方法，而是需要我们自己给子项具体的View去注册点击事件，所以实现起来稍微有点复杂。

这样做的好处是，我们可以知道用户单击了子项item中哪个部分，而ListView不行。

ListView对于item中的按钮单击，处理起来远远没有RecycerView方便。所以RecyclerView直接去除了setOnItemClickListener()方法，所有的点击事件都由具体的View去注册。

一、修改FruitAdapter.java中的代码

1、在类ViewHolder中新增成员View itemView；用于持有item自身的view。
View fruitView;

fruitView=view;

/**
     * 定义内部类ViewHolder 继承自 RecyclerView.ViewHolder
     */
    static class ViewHolder extends RecyclerView.ViewHolder{
        View fruitView;//新增
        ImageView fruitImage;
        TextView fruitName;
        /**
         * 构造参数中传入参数view
         * @param view RecyclerView子项的最外层布局
         */
        public ViewHolder(View view){
            super(view);
            fruitView=view;//新增
            fruitImage=(ImageView)view.findViewById(R.id.fruit_image);
            fruitName=(TextView)view.findViewById(R.id.fruit_name);
        }
    }

2、修改OnCreateViewHolder()方法

①将ViewHolder holder=new ViewHolder(view);声明为final

final ViewHolder holder=new ViewHolder(view);
这样匿名内部类中也可以获取到holder变量

②注册点击事件

 /**
     * 重写onCreateViewHolder方法，用于创建ViewHolder实例，并把加载出来的布局传入到构造函数中，最后将ViewHolder的实例返回
     * @param parent
     * @param viewType
     * @return
     */
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext())
                .inflate(R.layout.fruit_item,parent,false);

        //声明为final，这样匿名内部类中也能获取
        final ViewHolder holder=new ViewHolder(view);

        //重写onClick方法，为item的视图设置单击监听器
        holder.fruitView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //获得被单击的item 的实例
                int position=holder.getAdapterPosition();
                Fruit fruit=mFruitList.get(position);
                Toast.makeText(v.getContext(),"You clicked view "+fruit.getName(),Toast.LENGTH_SHORT).show();
            }
        });

        //重写OnClick方法，为item的图片也设置单击监听器
        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 cliked image "+fruit.getName(),Toast.LENGTH_SHORT).show();
            }
        });
        return holder;
    }

二、运行效果

单击文字，由于TextView没有注册点击事件，因此点击文字这个事件会被子项的最外层布局捕捉到，Toast显示单击了view
在这里插入图片描述

单击图片，Toast显示单击了image
在这里插入图片描述

生来如风

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android之RecyclerView

一、准备工作在app/build.gradle的dependencies中，加入以下一行代码implementation 'androidx.recyclerview:recyclerview:1.1.0'垂直滚动二、activity_main.xml<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:...
复制链接

扫一扫