RecyclerView概述
RecyclerView使用方法
- 1.布局檔案中添加RecyclerView控制元件
- 2.構造一些資料一般用陣列
- 3.添加布局檔案，需要創建一個新的布局
- 4.借助于兩個系統提供的類
- 5.把得到的布局填充到RecyclerView控制元件
- - 簡單示例一
  - 示例二：模仿QQ聊天界面
RecyclerView一行設定多個串列
- 示例

RecyclerView概述

背景：當我們需要制作例如淘寶商品串列時，資料很多，我們不可能一個一個敲出來，這個時候，我們就應該使用RecyclerView，
RecyclerView是官方在5.0之后新添加的組件，推出用來替代傳統的ListView和GridView串列控制元件，

RecyclerView使用方法

1.布局檔案中添加RecyclerView控制元件

activity_main.xml

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

2.構造一些資料一般用陣列

這些資料是需要添加在activity_main布局中的
在這里插入圖片描述

3.添加布局檔案，需要創建一個新的布局

在這個布局檔案中，我們需要添加的組件就是每一條資料中所需要的控制元件，

在這個示例中，我們只添加了一個TextView
在這里插入圖片描述

item_list.xml

<?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="100dp">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

4.借助于兩個系統提供的類

撰寫MyAdapter
1.加載布局
2.給控制元件賦值
3.顯示資料的條數
在這里插入圖片描述
在onCreateViewHolder方法中，我們看到return 的是一個MyViewHolder，為什么不直接return view呢，因為在資料滾動之后，會將螢屏外面的資料進行回收，然后創建下面新的資料，所以MyViewHolder起到的作用是回收利用，節約記憶體，

快取中存的記憶體是當前頁面展示的資料數量+1，因為還有一個等待回收的資料，
在這里插入圖片描述

5.把得到的布局填充到RecyclerView控制元件

核心代碼

	recyclerView.setAdapter(myAdapter);
	recyclerView.setLayoutManager(new LinearLayoutManager(this));

在這里插入圖片描述

要點在代碼注釋和上述解釋中都有講述
綜上得到

簡單示例一

package com.hnucm.android_04_09;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

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

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

public class MainActivity extends AppCompatActivity {
    List<String> list=new ArrayList<>();//動態擴容
    RecyclerView recyclerView;
    MyAdapter myAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView=findViewById(R.id.recyclerView);
        for(int i=0;i<20;i++){
            list.add("這是第"+i+"條資料");
        }
        myAdapter=new MyAdapter();
        recyclerView.setAdapter(myAdapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
    }

    public class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{

//        加載布局
        @NonNull
        @Override
//        資料滾動后，會將螢屏外面的資料回收，然后創建下面的新的資料
//        存的資料是頁面的數加1，還有一個等待回收的資料
        public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_list, parent, false);
            MyViewHolder myViewHolder=new MyViewHolder(view);
//            為什么不return一個view，要return一個MyViewHolder
            return myViewHolder;
        }
//        給布局里面的控制元件賦值
//        position 當前串列的第幾條

        @Override
        public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
            holder.textView.setText(list.get(position));
        }

        //表示顯示資料的條數
        @Override
        public int getItemCount() {
            return list.size();
        }
    }

//回收利用，節約記憶體
    public class MyViewHolder extends RecyclerView.ViewHolder{
        TextView textView;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            textView=itemView.findViewById(R.id.textView2);
        }
    }
}

運行結果
在這里插入圖片描述

示例二：模仿QQ聊天界面

在這里插入圖片描述

根據示例一可以改寫，

首先，我們需要一個ImageView和三個TextView控制元件

所以我們的資料可以寫在一個類中，

創建物體類Chat

package com.hnucm.android_04_09;

public class Chat {
    private String name;
    private String content;
    private String time;
    private int img;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }
}

MainACtivity.java

package com.hnucm.android_04_09;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

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

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

public class MainActivity extends AppCompatActivity {
    List<Chat> list=new ArrayList<>();//動態擴容
    RecyclerView recyclerView;
    MyAdapter myAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView=findViewById(R.id.recyclerView);
        for(int i=0;i<20;i++){
            Chat chat=new Chat();
            chat.setName("name:"+i);
            chat.setName("content"+i);
            chat.setTime("time"+i);
            chat.setImg(R.drawable.a1);
            list.add(chat);
        }
        myAdapter=new MyAdapter();
        recyclerView.setAdapter(myAdapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
    }

    public class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{

//        加載布局
        @NonNull
        @Override
//        資料滾動后，會將螢屏外面的資料回收，然后創建下面的新的資料
//        存的資料是頁面的數加1，還有一個等待回收的資料
        public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_list, parent, false);
            MyViewHolder myViewHolder=new MyViewHolder(view);
//            為什么不return一個view，要return一個MyViewHolder
            return myViewHolder;
        }
//        給布局里面的控制元件賦值
//        position 當前串列的第幾條

        @Override
        public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
            holder.nameTV.setText(list.get(position).getName());
            holder.contentV.setText(list.get(position).getContent());
            holder.timeTV.setText(list.get(position).getTime());
            holder.imageView.setBackground(getResources().getDrawable(list.get(position).getImg()));
        }

        //表示顯示資料的條數
        @Override
        public int getItemCount() {
            return list.size();
        }
    }

//回收利用，節約記憶體
    public class MyViewHolder extends RecyclerView.ViewHolder{
        TextView nameTV;
        TextView contentV;
        TextView timeTV;
        ImageView imageView;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            nameTV=itemView.findViewById(R.id.textView3);
            contentV=itemView.findViewById(R.id.textView4);
            timeTV=itemView.findViewById(R.id.textView5);
            imageView=itemView.findViewById(R.id.imageView);
        }
    }
}

改變的地方
在這里插入圖片描述

RecyclerView一行設定多個串列

       	recyclerView.setAdapter(myAdapter);
        recyclerView.setLayoutManager(new GridLayoutManager(this,2));

在這里插入圖片描述

示例

本實體模仿了淘寶的購物界面
Main_Activity代碼：

package com.hnucm.c201901020241;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

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

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

public class MainActivity extends AppCompatActivity {
    List<Shop> list =new ArrayList<>();
    RecyclerView recyclerView;
    MyAdapter myAdapter;
    String name[]={"回力男鞋帆布鞋男士高幫百搭藍色2020春季新款男生鞋子", "回力男鞋夏季初中學生百搭高幫板鞋2021新款韓版",
            "回力官方旗艦店帆布鞋女小白百搭運動運動板鞋男","長沙銷量過百 超20種顏色回力高幫帆布鞋女",
            "回力男鞋2021年新款潮春季男士休閑鞋百搭鞋","Warrior/回力運動跑步鞋 男 舒適透氣"};
    String buy[]={"3萬+人付款","3000+人付款","2000+人付款","2000+人付款","1500+人付款","300+人付款"};
    String infor[]={"店鋪12萬人購買過","圖案","商城同款|車縫線|硫化","英倫風|硫化","帆布|系帶","青春潮流風"};
    String price[]={"￥169","￥89","￥120","￥99","￥93","￥50"};
    int img[]={R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4,R.drawable.a5,R.drawable.a6};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView=findViewById(R.id.textView6);
        recyclerView=findViewById(R.id.recyclerView);
        for(int i=0;i<6;i++){
            Shop shop=new Shop();
            shop.setName(name[i]);
            shop.setBuy(buy[i]);
            shop.setInfor(infor[i]);
            shop.setPrice(price[i]);
            shop.setImg(img[i]);
            list.add(shop);
        }
        myAdapter=new MyAdapter();
        recyclerView.setAdapter(myAdapter);
        recyclerView.setLayoutManager(new GridLayoutManager(this,2));
    }
    public class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{

        @NonNull
        @Override
        public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.shop_list,parent,false);
            MyViewHolder myViewHolder=new MyViewHolder(view);
            return myViewHolder;
        }

        @Override
        public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
            holder.nameTV.setText(list.get(position).getName());
            holder.buyTV.setText(list.get(position).getBuy());
            holder.inforTV.setText(list.get(position).getInfor());
            holder.priceTV.setText(list.get(position).getPrice());
            holder.imageView.setBackground(getResources().getDrawable(list.get(position).getImg()));
        }

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

    public class MyViewHolder extends RecyclerView.ViewHolder{
        TextView nameTV;
        TextView buyTV;
        TextView inforTV;
        TextView priceTV;
        ImageView imageView;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            nameTV=itemView.findViewById(R.id.textView);
            buyTV=itemView.findViewById(R.id.textView4);
            inforTV=itemView.findViewById(R.id.textView2);
            priceTV=itemView.findViewById(R.id.textView3);
            imageView=itemView.findViewById(R.id.imageView4);
        }
    }

}

shop類

package com.hnucm.c201901020241;

public class Shop {
    private String name;
    private String infor;
    private String price;
    private String buy;
    private int img;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getInfor() {
        return infor;
    }

    public void setInfor(String infor) {
        this.infor = infor;
    }

    public String getPrice() {
        return price;
    }

    public void setPrice(String price) {
        this.price = price;
    }

    public String getBuy() {
        return buy;
    }

    public void setBuy(String buy) {
        this.buy = buy;
    }

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }
}

activity_main.xml

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

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#FAFAFA"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            app:srcCompat="@drawable/c1" />

        <EditText
            android:id="@+id/editTextTextPersonName2"
            android:layout_width="230dp"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:focusable="false"
            android:background="@drawable/bg_border"
            android:ems="10"
            android:hint="  回力"
            android:inputType="textPersonName" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginLeft="20dp"
            app:srcCompat="@drawable/c3" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginLeft="20dp"
            app:srcCompat="@drawable/c2" />

    </LinearLayout>

    <TextView
        android:id="@+id/textView5"
        android:layout_width="40dp"
        android:layout_height="30dp"
        android:layout_marginTop="24dp"
        android:textColor="#FF5000"
        android:text="綜合"
        app:layout_constraintEnd_toStartOf="@+id/textView6"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="40dp"
        android:layout_height="30dp"
        android:text="價格"
        app:layout_constraintEnd_toStartOf="@+id/imageView5"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView6"
        app:layout_constraintTop_toTopOf="@+id/textView6" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="40dp"
        android:layout_height="30dp"
        android:text="銷量"
        app:layout_constraintEnd_toStartOf="@+id/textView7"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toTopOf="@+id/textView5" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="40dp"
        android:layout_height="30dp"
        android:text="篩選"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView5"
        app:layout_constraintTop_toTopOf="@+id/textView7" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="40dp"
        android:layout_height="30dp"
        android:layout_marginBottom="4dp"
        app:layout_constraintBottom_toBottomOf="@+id/textView8"
        app:layout_constraintEnd_toStartOf="@+id/textView8"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView7"
        app:srcCompat="@drawable/c4" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="396dp"
            android:layout_height="500dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView7" />


</androidx.constraintlayout.widget.ConstraintLayout>

實作效果:
在這里插入圖片描述

Android第一講筆記(常用控制元件以及線性布局)
Android第二講筆記（約束布局ConstraintLayout）
Android第三講筆記（Activity簡單操作）

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/275034.html

標籤：其他

上一篇：G-Traffic模擬（小心陣列大小）

下一篇：mingw-w64-x86_64-qt4缺失

Android第五講筆記（串列RecyclerView）

目錄

RecyclerView概述

RecyclerView使用方法

1.布局檔案中添加RecyclerView控制元件

2.構造一些資料一般用陣列

3.添加布局檔案，需要創建一個新的布局

4.借助于兩個系統提供的類

5.把得到的布局填充到RecyclerView控制元件

簡單示例一

示例二：模仿QQ聊天界面

RecyclerView一行設定多個串列

示例

Android第五講筆記（串列RecyclerView）

目錄

RecyclerView概述

RecyclerView使用方法

1.布局檔案中添加RecyclerView控制元件

2.構造一些資料 一般用陣列

3.添加布局檔案，需要創建一個新的布局

4.借助于兩個系統提供的類

5.把得到的布局填充到RecyclerView控制元件

簡單示例一

示例二：模仿QQ聊天界面

RecyclerView一行設定多個串列

示例

2.構造一些資料一般用陣列