安卓控件 - 循环器视图

一、案例演示 —— 展示学生列表

(一)运行效果

(二)涉及知识点

  1. 标签(TextView)
  2. 线性布局(LinearLayout)
  3. 循环器视图(RecyclerView)
  4. 布局管理器(LayoutManager)
  5. 分割器项修饰(DividerItemDecoration)
  6. 数组列表(ArrayList)

(三)实现步骤

1、创建安卓应用【StudentList】

2、给安卓应用添加对recyclerview库的依赖

  • 打开【Project Structure】窗口,选择【Dependencies】

image.png

  • 添加库依赖 - recyclerview

image.png
image.png
image.png

  • 查看应用的Gradle配置文件

image.png

3、将图片素材拷贝到drawable目录

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>

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>

6、创建学生实体类 - Student

package net.hw.student_list;

/**
 * 功能:学生实体类
 * 作者:华卫
 * 日期:2020年11月15日
 */
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 + '\'' +
                '}';
    }
}

7、主界面类 - MainActivity

  • 声明变量

image.png

  • 通过资源标识符获取控件实例

image.png

  • 初始化学生列表作为数据源

image.png

  • 给循环器视图设置布局管理器

image.png

  • 初始化循环器适配器

image.png

  • 继承RecyclerView.ViewHolder创建视图容器类

image.png

  • 编写创建视图容器方法

image.png

  • 编写绑定视图容器方法

image.png

  • 编写获取列表项个数

image.png

  • 给循环器视图设置适配器

image.png

8、启动应用,查看效果

9、修改布局管理器 - 设置item的布局方式

  • 之前给循环器视图设置布局管理器:rvStudent.setLayoutManager(new LinearLayoutManager(this));,只是使用了一个匿名线性布局管理器对象,因此无法利用它来设置item的布局方式。下面创建一个线性布局管理器对象,设置其Orientation属性。

image.png

  • 启动应用,查看效果

  • 重新设置方向 - 垂直的

image.png

  • 启动应用,查看效果


10、给循环器视图设置列表项分割线

  • 修改代码,给循环器视图添加项修饰

image.png

  • 启动应用,查看效果


11、查看主界面类源代码

package net.hw.student_list;

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

import android.annotation.SuppressLint;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

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;
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hxiug.虚晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值