安卓开发RecyclerView设计

安卓开发RecyclerView设计

一、基础信息

1.1 环境配置

  • Android Studio 4.1.2
  • Gradle 6.5
  • JDK 12
  • Android 7.0

1.2 需求描述

1、掌握UI设计中的layout布局（约束布局）与基本控件（button、text、imageview等）；

2、掌握复杂控件与adapter的使用。（使用RecycleView进行设计）

1.3 演示效果

image-20210408111527283

二、操作步骤

因为RecyclerView属于新增的控件,Android将RecyclerView定义在support库里。若要使用RecyclerView,第一步是要在build.gradle中添加对应的依赖库。

2.1 添加RecyclerView 依赖库

在build.gradle中的dependencies添加以下内容：

implementation 'com.android.support:recyclerview-v7:27.1.1'

但是IDE会提示报错：

image-20210406085532500

原因是

1、由于Android Studio 版本较高，添加库依赖已经不支持compile语句，应使用implementation或者api.

2、若使用api或implementation语句仍然报错，可能是库的版本较低，出现了不兼容的现象。

3、由于原来的support 库太乱了，谷歌在新版本中取消了support库，使用了新的andriodX库。

或者不用迁移库，加一个//noinspection GradleCompatible再进行编译即可。

2.2 设计RecyclerView

首先在页面中拖入一个RecyclerView，新建一个Friend.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
public class Friend {
    private String name;
    private String description;

    public Friend(String name, String description) {
        this.name = name;
        this.description = description;
    }

    @Override
    public String toString() {
        return "Friend{" +
                "name='" + name + '\'' +
                ", description='" + description + '\'' +
                '}';
    }

    public String getName() {
        return name;
    }

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

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }
}

添加friend_item,xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <ImageView
        android:id="@+id/avator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"/>
</LinearLayout>

新增适配器FriendAdapter

为RecyclerView新增适配器FriendAdapter,并让其继承于RecyclerView.Adapter,把泛型指定为FriendAdapter.ViewHolder。

定义内部类ViewHolder,并继承RecyclerView.ViewHolder。传入的View参数通常是RecyclerView子项的最外层布局。

FriendAdapter()构造函数,用于把要展示的数据源传入,并赋予值给全局变量friendList。

FriendAdapter继承RecyclerView.Adapter。因为必须重写onCreateViewHolder(),onBindViewHolder()和getItemCount()三个方法

  • onCreateViewHolder()用于创建ViewHolder实例,并把加载的布局传入到构造函数去,再把ViewHolder实例返回。
  • onBindViewHolder()则是用于对子项的数据进行赋值,会在每个子项被滚动到屏幕内时执行。position得到当前项的Friend实例。
  • getItemCount()返回RecyclerView的子项数目。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
public class FriendAdapter extends RecyclerView.Adapter<FriendAdapter.ViewHolder> {
    private List<Friend> friendList;

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // 创建ViewHolder
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.friend_item,parent,false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        // 对子项数据进行赋值
        Friend friend = friendList.get(position);
        holder.avatorImg.setImageResource(friend.getImgId());
        holder.description.setText(friend.getName());
    }

    @Override
    public int getItemCount() {
        // 返回RecyclerView的子项数目
        return friendList.size();

    }

    static class ViewHolder extends RecyclerView.ViewHolder{
        ImageView avatorImg;
        TextView description;

        public ViewHolder (View view)
        {
            super(view);
            avatorImg = (ImageView) view.findViewById(R.id.avator);
            description = (TextView) view.findViewById(R.id.description);
        }

    }
    public  FriendAdapter (List <Friend> friendList){
        this.friendList = friendList;
    }
}

修改 FriendFragment.java

添加以下代码：初始化数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
private void initFriends() {
    for (int i = 0; i < 2; i++) {
        Friend zhangsan = new Friend("张三","爱跳舞爱跳舞爱跳舞爱跳舞", R.drawable.avator01);
        friendList.add(zhangsan);
        Friend lisi = new Friend("李四","爱唱歌爱唱歌爱唱歌爱唱歌", R.drawable.avator02);
        friendList.add(lisi);
        Friend wangwu = new Friend("王五","爱跑步爱跑步爱跑步爱跑步", R.drawable.avator03);
        friendList.add(wangwu);
        Friend zhaoliu = new Friend("赵六","爱淋雨爱淋雨爱淋雨爱淋雨", R.drawable.avator04);
        friendList.add(zhaoliu);
        Friend zhouqi = new Friend("周七","爱走路爱走路爱走路爱走路", R.drawable.avator05);
        friendList.add(zhouqi);
        Friend a = new Friend("李华","不爱唱歌不爱唱歌不爱唱歌", R.drawable.avator06);
        friendList.add(a);
        Friend b = new Friend("刘肆","不爱跳舞不爱跳舞不爱跳舞", R.drawable.avator07);

    }
}

在onCreate中添加代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
@Override
protected void onCreate(Bundle savedInstanceState) {

    // RecyclerView
    // 数据初始化
    initFriends();
    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.friend_recyclerview);
    LinearLayoutManager layoutManager = new LinearLayoutManager(this);
    recyclerView.setLayoutManager(layoutManager);
    FriendAdapter adapter = new FriendAdapter(friendList);
    recyclerView.setAdapter(adapter);

}

LayoutManager用于指定RecyclerView的布局方式。LinearLayoutManager指的是线性布局。

调整friend_item的布局，最后效果显示如下：

image-20210408111527283

代码地址：https://gitee.com/retain990/android