Dossiers d'apprentissage Android (13)

1. Vue du circulateur

1.1 Vue d'ensemble de la vue du circulateur

RecyclerView est un nouveau contrôle introduit par Android dans la bibliothèque support-v7. L'alias chinois est la vue recycleur. Sa fonction est très puissante. Il peut réaliser les effets d'affichage de ListView, GridView et waterfall grid respectivement.

1.2 Méthodes courantes de vue du boucleur

setAdapter: définissez l'adaptateur de l'élément de liste. Voir l'en-tête suivant pour une description détaillée de l'adaptateur.
setLayoutManager: définissez le gestionnaire de disposition de l'élément de liste. Il existe actuellement trois types: le gestionnaire de mise en page linéaire LinearLayoutManager, le gestionnaire de mise en page de grille GridLayoutManager, le gestionnaire de mise en page de grille en cascade StaggeredGridLayoutManager. Pour une description détaillée du gestionnaire de mise en page, consultez la seconde moitié de cet article.
addItemDecoration: ajoutez la ligne de division de l'élément de liste.
removeItemDecoration: supprime la ligne de séparation de l'élément de liste.
setItemAnimator: définissez l'animation d'ajout et de suppression d'éléments de liste.
addOnItemTouchListener: Ajoutez un écouteur tactile pour les éléments de liste. Étant donné que RecyclerView n'implémente pas l'interface de clic des éléments de liste, les développeurs peuvent surveiller les mouvements de l'utilisateur via l'écouteur tactile ici.
removeOnItemTouchListener: supprime l'écouteur tactile de l'élément de liste.

1.3 Adaptateur de boucle

RecyclerView a une classe d'adaptateur spéciale, à savoir RecyclerView.Adapter. Avant d'appeler la méthode setAdapter de RecyclerView, nous devons d'abord implémenter un adaptateur de données dérivé de RecyclerView.Adapter pour définir la disposition et les opérations spécifiques des éléments de liste. Voici les méthodes courantes liées à RecyclerView.Adapter:

Voici les méthodes qui doivent être remplacées pour un adaptateur personnalisé:

getItemCount: obtient le nombre d'éléments de liste.
onCreateViewHolder: crée le support de vue de la mise en page entière. Les paramètres d'entrée incluent le type de vue, et différentes mises en page peuvent être chargées en fonction du type de vue, de manière à réaliser la mise en page de liste d'en-tête.
onBindViewHolder: liez le support de vue de chaque élément.
Les méthodes suivantes peuvent être remplacées ou non:
getItemViewType: renvoie le type d'affichage de chaque élément. Le type de vue renvoyé ici est utilisé par la méthode onCreateViewHolder.
getItemId: Obtenez le numéro de chaque élément.
Les méthodes suivantes peuvent être appelées directement:
notifyItemInserted: notifie l'adaptateur qu'un nouvel élément est inséré à la position spécifiée.
notifyItemRemoved: informez l'adaptateur que l'élément d'origine est supprimé à l'emplacement spécifié. notifyItemChanged: informez l'adaptateur que l'élément à la position spécifiée a changé. notifyDataSetChanged: informez l'adaptateur que les données de la liste entière ont changé.

En général, RecyclerView.Adapter et BaseAdapter que nous avons souvent rencontrés auparavant sont fondamentalement les mêmes dans le flux de traitement. Bien sûr, il existe également de nombreuses différences entre eux. Voici les principales différences entre RecyclerView.Adapter et les autres adaptateurs:

1. ViewHolder intégré et sa fonction de réutilisation, pas besoin pour les développeurs de réutiliser manuellement ViewHolder;
2. Fonctions de clic et de pression longue pour les éléments de liste qui ne sont pas intégrés, obligent les développeurs à surveiller eux-mêmes les événements de clic et de pression longue;
3. Ajouter pour distinguer différentes listes Le type d'affichage de l'élément permet aux développeurs de charger différentes mises en page en fonction du type:
4. Des éléments individuels peuvent être ajoutés, supprimés ou modifiés individuellement sans actualiser la liste entière;

2. Démonstration de cas

2.1 Nouveau projet Android

2.2 Ajouter une dépendance sur la bibliothèque recyclerview à l'application Android

2.3 Ajouter un arrière-plan d'image

2.4 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:padding="15dp"
    tools:context=".MainActivity">

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

2.5 student_list_item.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:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/ivStudentIcon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/img1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:gravity="center_vertical"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tvStudentName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:textColor="#0000ff"
            android:textSize="25sp" />

        <TextView
            android:id="@+id/tvStudentPhone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:textColor="#555555"
            android:textSize="20sp" />
    </LinearLayout>
</LinearLayout>

2.6 Créer une classe d'entité étudiante

package net.nell.studentlist;


public class Student {
    
    
    private int studentIcon;
    private String studentName;
    private String studentPhone;

    public int getStudentIcon() {
    
    
        return studentIcon;
    }

    public void setStudentIcon(int studentIcon) {
    
    
        this.studentIcon = studentIcon;
    }

    public String getStudentName() {
    
    
        return studentName;
    }

    public void setStudentName(String studentName) {
    
    
        this.studentName = studentName;
    }

    public String getStudentPhone() {
    
    
        return studentPhone;
    }

    public void setStudentPhone(String studentPhone) {
    
    
        this.studentPhone = studentPhone;
    }

    @Override
    public String toString() {
    
    
        return "Student{" +
                "studentIcon=" + studentIcon +
                ", studentName='" + studentName + '\'' +
                ", studentPhone='" + studentPhone + '\'' +
                '}';
    }
}

2.7 Classe d'interface principale

package net.nell.studentlist;

import android.annotation.SuppressLint;
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 android.widget.Toast;

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

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

public class MainActivity extends AppCompatActivity {
    
    

    private RecyclerView rvStudent; // 学生循环器视图（展示）
    private RecyclerView.Adapter adapter; // 循环器适配器（桥梁）
    private List<Student> students; // 学生列表（数据源）

    @SuppressLint("WrongConstant")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        // 通过资源标识符获取控件实例
        rvStudent = findViewById(R.id.rvStudent);

        // 获取学生列表作为数据源
        students = getStudents();

        // 创建线性布局管理器
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        // 设置线性布局管理器方向属性（默认是VERTICAL）
        layoutManager.setOrientation(OrientationHelper.VERTICAL);
        // 给循环器视图设置布局管理器
        rvStudent.setLayoutManager(layoutManager);

        // 初始化循环器适配器
        adapter = new RecyclerView.Adapter() {
    
    
            /**
             * 视图容器
             */
            class ViewHolder extends RecyclerView.ViewHolder {
    
    
                private ImageView ivStudentIcon;
                private TextView tvStudentName;
                private TextView tvStudentPhone;

                public ViewHolder(@NonNull View itemView, ImageView ivStudentIcon, TextView tvStudentName, TextView tvStudentPhone) {
    
    
                    super(itemView);
                    this.ivStudentIcon = ivStudentIcon;
                    this.tvStudentName = tvStudentName;
                    this.tvStudentPhone = tvStudentPhone;
                }

                public ImageView getIvStudentIcon() {
    
    
                    return ivStudentIcon;
                }

                public TextView getTvStudentName() {
    
    
                    return tvStudentName;
                }

                public TextView getTvStudentPhone() {
    
    
                    return tvStudentPhone;
                }
            }

            @NonNull
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    
    
                // 获取视图对象（将列表项模板转换成视图）
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.student_list_item, parent, false);
                // 获取视图里的控件
                ImageView ivStudentIcon = view.findViewById(R.id.ivStudentIcon);
                TextView tvStudentName = view.findViewById(R.id.tvStudentName);
                TextView tvStudentPhone = view.findViewById(R.id.tvStudentPhone);

                // 创建视图容器
                RecyclerView.ViewHolder viewHolder = new ViewHolder(view, ivStudentIcon, tvStudentName, tvStudentPhone);

                // 返回视图容器
                return viewHolder;
            }

            @Override
            public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
    
    
                // 获取学生数据
                Student student = students.get(position);

                // 获取控件实例
                ImageView ivStudentIcon = ((ViewHolder)holder).getIvStudentIcon();
                TextView tvStudentName = ((ViewHolder)holder).getTvStudentName();
                TextView tvStudentPhone = ((ViewHolder)holder).getTvStudentPhone();

                // 设置控件属性
                ivStudentIcon.setImageResource(student.getStudentIcon());
                tvStudentName.setText(student.getStudentName());
                tvStudentPhone.setText(student.getStudentPhone());

                // 给控件设置监听器
                ivStudentIcon.setOnClickListener(new View.OnClickListener() {
    
    
                    @Override
                    public void onClick(View v) {
    
    
                        Toast.makeText(MainActivity.this, student.getStudentName()
                                + " : " + student.getStudentPhone(), Toast.LENGTH_SHORT).show();
                    }
                });
                tvStudentName.setOnClickListener(new View.OnClickListener() {
    
    
                    @Override
                    public void onClick(View v) {
    
    
                        Toast.makeText(MainActivity.this, student.getStudentName()
                                + " : " + student.getStudentPhone(), Toast.LENGTH_SHORT).show();
                    }
                });
                tvStudentPhone.setOnClickListener(new View.OnClickListener() {
    
    
                    @Override
                    public void onClick(View v) {
    
    
                        Toast.makeText(MainActivity.this, student.getStudentName()
                                + " : " + student.getStudentPhone(), Toast.LENGTH_SHORT).show();
                    }
                });
            }

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

        // 给循环器视图设置适配器
        rvStudent.setAdapter(adapter);

        // 给循环器视图添加列表项分隔线
        rvStudent.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
    }

    /**
     * @return 学生列表
     */
    private List<Student> getStudents() {
    
    
        // 创建学生列表
        List<Student> students = new ArrayList<>();
        // 声明学生
        Student student = null;

        // 创建第1个学生
        student = new Student();
        student.setStudentIcon(R.drawable.img1);
        student.setStudentName("李晓红");
        student.setStudentPhone("15878782345");
        // 将学生添加到学生列表
        students.add(student);

        // 创建第2个学生
        student = new Student();
        student.setStudentIcon(R.drawable.img2);
        student.setStudentName("王晓玲");
        student.setStudentPhone("15956567890");
        // 将学生添加到学生列表
        students.add(student);

        // 创建第3个学生
        student = new Student();
        student.setStudentIcon(R.drawable.img3);
        student.setStudentName("董大伟");
        student.setStudentPhone("13567891230");
        // 将学生添加到学生列表
        students.add(student);

        // 创建第4个学生
        student = new Student();
        student.setStudentIcon(R.drawable.img4);
        student.setStudentName("尚洪文");
        student.setStudentPhone("18856789032");
        // 将学生添加到学生列表
        students.add(student);

        // 创建第5个学生
        student = new Student();
        student.setStudentIcon(R.drawable.img5);
        student.setStudentName("唐语涵");
        student.setStudentPhone("15967893450");
        // 将学生添加到学生列表
        students.add(student);

        // 创建第6个学生
        student = new Student();
        student.setStudentIcon(R.drawable.img6);
        student.setStudentName("郑智化");
        student.setStudentPhone("15867678904");
        // 将学生添加到学生列表
        students.add(student);

        // 创建第7个学生
        student = new Student();
        student.setStudentIcon(R.drawable.img7);
        student.setStudentName("童安格");
        student.setStudentPhone("13845674560");
        // 将学生添加到学生列表
        students.add(student);

        // 返回学生列表
        return students;
    }
}

2.8 Effet de l'opération

Je n'ai pas terminé la tâche ces derniers jours, et j'ai appris une petite chose nouvelle, mais aussi parce que je veux avoir plus d'idées dans le processus de réalisation de la tâche suivante. Dans le processus de création de pages, vous pouvez également savoir comment mettre en page plus efficacement. Demain, j'accomplirai la nouvelle tâche, et les connaissances impliquées seront reflétées dans mon blog demain.