一、案例演示 —— 展示学生列表
(一)运行效果
(二)涉及知识点
- 标签(TextView)
- 线性布局(LinearLayout)
- 循环器视图(RecyclerView)
- 布局管理器(LayoutManager)
- 分割器项修饰(DividerItemDecoration)
- 数组列表(ArrayList)
(三)实现步骤
1、创建安卓应用【StudentList】
2、给安卓应用添加对recyclerview库的依赖
- 打开【Project Structure】窗口,选择【Dependencies】
- 添加库依赖 - recyclerview
- 查看应用的Gradle配置文件
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
- 声明变量
- 通过资源标识符获取控件实例
- 初始化学生列表作为数据源
- 给循环器视图设置布局管理器
- 初始化循环器适配器
- 继承RecyclerView.ViewHolder创建视图容器类
- 编写创建视图容器方法
- 编写绑定视图容器方法
- 编写获取列表项个数
- 给循环器视图设置适配器
8、启动应用,查看效果
9、修改布局管理器 - 设置item的布局方式
- 之前给循环器视图设置布局管理器:rvStudent.setLayoutManager(new LinearLayoutManager(this));,只是使用了一个匿名线性布局管理器对象,因此无法利用它来设置item的布局方式。下面创建一个线性布局管理器对象,设置其Orientation属性。
- 启动应用,查看效果
- 重新设置方向 - 垂直的
- 启动应用,查看效果
10、给循环器视图设置列表项分割线
- 修改代码,给循环器视图添加项修饰
- 启动应用,查看效果
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;
}
}