任务2.3 用RecyclerView实现笔记列表视图

我们采用RecyclerView来实现如上图红色线框内的列表视图。
RecyclerView的运作由三个组件协作完成：

  • 视图组件：将数据以列表的形式展示，由RecyclerView类实现
  • 适配器：将一组数据绑定到RecyclerView，由RecyclerView.Adapter内部类实现
  • 列表项缓存：用来提高列表视图运转效率，由RecyclerView.ViewHolder内部类实现，可以看作是列表项中各视觉元素对象的容器。

1. 添加RecyclerView组件

首先删除“阅读”按钮。
然后仿照上节中拖放漂浮按钮的操作，选择设计视图中的“Palette”栏下的“AppCompat”项，将其下的RecyclerView组件拖放到布局中：


然后切换到XML视图，为RecyclerView添加id为“note_list”：

<android.support.v7.widget.RecyclerView
        android:id="@+id/note_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

2. 定义列表项视图布局

在设计图中，列表项视图如下：

根据这个设计图，我们先分析应当怎样设计布局。以下是可行方案的一种，我们依据这个方案创建布局文件：

在layout目录下创建新的布局文件。右键点击layout目录，在弹出菜单中选择“New->Layout resource file”。在弹出的对话框中输入文件名为“note_list_item”，修改“Root element”项为“LinearLayout”：

按照上图的布局文件方案的描述来创建布局中的各项元素。注意UI设计中使用恰当的外边距（margin）和内边距（padding）使布局美观。我这里给出一个note_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="90dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:orientation="horizontal"
        android:gravity="center_vertical">

        <!--标题-->
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Title"
            android:textColor="#000000"
            android:textSize="24sp"/>

        <!--时间-->
        <TextView
            android:id="@+id/tv_create_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2018/03/03"
            android:textColor="#00CCFF"
            android:textSize="18sp" />

    </LinearLayout>

    <!--正文摘要-->
    <TextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:text="这里是正文部分的摘要"
        android:maxLines="2"
        android:textColor="#999999"
        android:textSize="18sp" />

    <!--分隔线-->
    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#999999"/>
</LinearLayout>

3. 实现ViewHolder

前面提到了，ViewHolder用作列表项视图元素的缓存，用来提高列表视图显示的效率，使其滚动中尽量平滑。通常它是列表项中各个视觉元素的容器。
在我们的笔记列表视图的ViewHolder中，应当包含笔记标题、正文和创建时间对应的各个视图元素。这些元素已经在上一步骤所创建的布局文件中存在。
打开NoteListActivity.java文件，创建内部类NoteViewHolder，它是RecyclerView.ViewHolder的子类.
键入以下代码：

    private class NoteViewHolder extends RecyclerView.ViewHolder {
        
    }

此时，编辑器中会以红色波浪线的方式提示错误。显然，我们的类继承了RecyclerView.ViewHolder，却还缺少某些必要的要素。
将光标定位到错误区域，按快捷键“Alt+Enter”，可以弹出功参考的纠错方案列表：

原来是没有创建对应的构造方法。选择第一项，Android Studio帮我们自动创建：

        public NoteViewHolder(View itemView) {
            super(itemView);
        }

观察此构造方法，它接收一个View类型的参数itemView。这个itemView对象对应的就是我们在note_list_item.xml中定义的列表项布局。

接下来，为我们的NoteViewHolder类增加三个对应于要显示的视图元素的属性，并在构造方法中初始化：

    private class NoteViewHolder extends RecyclerView.ViewHolder {
        private TextView titleView;
        private TextView createTimeView;
        private TextView contentView;

        public NoteViewHolder(View itemView) {
            super(itemView);
            titleView = itemView.findViewById(R.id.tv_title);
            createTimeView = itemView.findViewById(R.id.tv_create_time);
            contentView = itemView.findViewById(R.id.tv_content);
        }

    }

4. 创建适配器

适配器将数据集与列表视图绑定起来。

第一步，在NoteListActivity.java中定义我们自己的适配器类NoteAdapter。

它是RecyclerView.Adapter类的子类。这里需要使用上一步骤中定义的NoteViewHolder类作为范型参数，同时要根据出错提示创建需要重写的几个方法：

    private class NoteAdapter extends RecyclerView.Adapter<NoteViewHolder> {

        @Override
        public NoteViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            return null;
        }

        @Override
        public void onBindViewHolder(NoteViewHolder holder, int position) {

        }

        @Override
        public int getItemCount() {
            return 0;
        }
    }

第二步，添加一个Note类对象的列表（List）作为属性。

因为我们的列表视图展示的是笔记列表。前面章节我们已经为笔记创建了数据模型类Note，在这里便可以定义如下：

        private ArrayList<Note> notes = new ArrayList<>();

        public void setNotes(ArrayList<Note> notes) {
            // 现将原列表清空，再将传入的列表元素全部加入
            this.notes.clear();
            if (notes != null) {
                this.notes.addAll(notes);
            }
        }

可以看到，我们同时创建了setNotes()，用来在数据集发生变化时重新设定笔记列表。

第三步，分别实现适配器类中继承的3个方法：

  • onCreateViewHolder()：这里创建ViewHolder对象，代码如下：
        @Override
        public NoteViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            // 根据列表项布局文件创建视图对象
            LayoutInflater inflater = LayoutInflater.from(parent.getContext());
            View view = inflater.inflate(R.layout.note_list_item, parent, false);
            // 基于上面的视图对象创建ViewHolder对象并返回
            NoteViewHolder vh = new NoteViewHolder(view);
            return vh;
        }
  • onBindViewHolder()：这里将实际的某一条笔记数据绑定到ViewHolder中对应的各个视图元素
        @Override
        public void onBindViewHolder(NoteViewHolder holder, int position) {
            // 取对应位置的笔记对象
            Note note = notes.get(position);
            // 设置对应ViewHolder对象中各视觉元素的值
            holder.titleView.setText(note.getTitle());
            holder.createTimeView.setText(formatTime(note.getCreateTime()));
            holder.contentView.setText(note.getContent());
        }

可以看到，在设置创建时间的时候，并没有之间用note.getCreateTime()的返回值作为文本视图的内容。因为这是一个毫秒值，并不直观，需要将其转换为我们能够读懂的格式。为此，单独定义工具函数formatTime()：

    private String formatTime(long time) {
        // 按照给定的格式串（"yyyy/MM/dd"）转换
        SimpleDateFormat format = new SimpleDateFormat("yyyy/MM/dd");
        return format.format(new Date(time));
    }
  • getItemCount()：统计当前数据集中对象数量。我们直接返回笔记列表长度即可：
        @Override
        public int getItemCount() {
            return notes.size();
        }

这三个方法，我们并不会调用，而是供RecyclerView内部机制调用的“回调方法”，也是我们能够将数据集绑定到列表视图的入口。

5. 初始化RecyclerView

在第3步和第4步，我们分别创建并实现了RecyclerView三个要素中的ViewHolder和适配器。接下来我们最终来完成RecyclerView的初始化和展示。
在这里，要完成以下几个步骤的工作：

  • 从Activity的布局中取得RecyclerView对象
  • 设定其为垂直方向列表的形式
  • 创建适配器对象并设置给RecyclerView对象
    在NoteListActivity的onCreate()回调方法的末尾添加如下代码以实现之：
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_note_list);
        ...
        RecyclerView recyclerView = findViewById(R.id.note_list);
        // 设定为垂直列表
        LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        recyclerView.setLayoutManager(layoutManager);
        // 创建并设置适配器
        NoteAdapter adapter = new NoteAdapter();
        recyclerView.setAdapter(adapter);
    }

运行程序，看到如下效果：

没错，还是空白，因为我们实际上并没有绑定任何笔记到列表视图中。由于我们目前并没有真正的为笔记的存储创建数据库，因此我们在下一节里制造一些测试用的笔记数据，用来查看笔记列表视图是否正常工作。

6. 创建数据仓库（repository）

Repository的意思是“仓库”。我们在这里进行以下几步工作：

  • 创建一个抽象的仓库接口（INoteRepository）来为应用程序的UI提供获取数据的入口。
  • 定义一个用于临时测试的仓库类（TestNoteRepository），它实现INoteRepository中定义的方法。
  • 利用面向对象思想中的“多态”机制，将TestNoteRepository的对象作为实际使用的仓库。
    将来，我们建立了数据库后，就可以定义基于数据库存储的仓库类来代替现在的测试仓库类。这样一套模式的优势是，将来不必大规模修改UI模块的代码；缺点是比较繁琐。

创建仓库接口（INoteRepository）

将来针对不同的实体模型，可能会增加不同的仓库接口，因此我们单独建立一个仓库对应的包，在这个包里面创建我们的接口（interface）：

  • 创建于model子包并列的子包“repository”
com.jing.app.sn.repository
  • 在新建的包下创建接口INoteRepository：
    选择包名，然后右键选择“New->Java Class”，填写名称为“INoteRepository”，并将“Kind”项设置为“Interface”：

点击“OK”，接口源文件（INoteRepository.java）即在包下生成。打开它，为其添加一个接口方法getAllNotes()，用来提供全部笔记的列表：

public interface INoteRepository {
    ArrayList<Note> getAllNotes();
}

目前我们仅用到获取全部笔记这一个操作，所以先不考虑其它操作。

定义一个用于临时的仓库类（TestNoteRepository）

  • 在包repository下新建Java类TestNoteRepository，令其实现（implement）INoteRepository接口：
  • 打开TestNoteRepository.java文件，根据错误提示产生必要的方法定义，结果如下：
public class TestNoteRepository implements INoteRepository {

    @Override
    public ArrayList<Note> getAllNotes() {
        return null;
    }
}
  • 修改getAllNotes()方法，使其返回一个含有多条笔记记录的列表，例如：
    @Override
    public ArrayList<Note> getAllNotes() {
        ArrayList<Note> notes = new ArrayList<>();
        notes.add(new Note(1, "笔记1", "笔记1正文", System.currentTimeMillis()));
        notes.add(new Note(2, "笔记2", "笔记2正文", System.currentTimeMillis()));
        notes.add(new Note(3, "笔记3", "笔记3正文", System.currentTimeMillis()));
        notes.add(new Note(4, "笔记4", "笔记4正文", System.currentTimeMillis()));
        notes.add(new Note(5, "笔记5", "笔记5正文", System.currentTimeMillis()));
        notes.add(new Note(6, "笔记6", "笔记6正文", System.currentTimeMillis()));
        notes.add(new Note(7, "笔记7", "笔记7正文", System.currentTimeMillis()));
        notes.add(new Note(8, "笔记8", "笔记8正文", System.currentTimeMillis()));
        notes.add(new Note(9, "笔记9", "笔记9正文", System.currentTimeMillis()));
        notes.add(new Note(10, "笔记10", "笔记10正文", System.currentTimeMillis()));
        return notes;
    }

为NoteListActivity提供数据

  • 回到NoteListActivity.java文件，增加INoteRepository接口类型的属性定义：
public class NoteListActivity extends AppCompatActivity {
    // 笔记数据仓库接口，并绑定到测试仓库
    private INoteRepository noteRepository = new TestNoteRepository();
    ...
}
  • 定位到onCreate()回调方法，为适配器指定数据集：
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        NoteAdapter adapter = new NoteAdapter();
        // 为适配器设定数据集
        adapter.setNotes(noteRepository.getAllNotes());

        recyclerView.setAdapter(adapter);
    }
  • 运行程序查看效果：

7. 实现列表项点击响应

  • 点击列表项，列表项在视觉上应当有一个变化使用户感知到自己的操作。为此我们为列表项布局设定随点击变化的背景色。

第一步，先定义两种颜色

先打开res/values目录下的colors.xml文件，向里面增加两个颜色项目：

    <color name="note_list_item_bg_pressed">#D9D9D9</color>
    <color name="note_list_item_bg_released">#FFFFFF</color>

第二步，创建背景资源

选择res/drawable文件夹，点击右键后在弹出菜单中选择“New->Drawable resource file”，在弹出对话框中输入文件名为“note_list_item_bg”：

  • 点击“OK”完成创建并打开文件。在XML视图下，添加对“按下（pressed）”状态的处理，当按下时，设定背景色为浅灰色，松开后设为白色：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/note_list_item_bg_pressed"/>
    <item android:state_pressed="false" android:drawable="@color/note_list_item_bg_released"/>
</selector>
  • 打开列表项布局文件note_list_item.xml，为它的根元素设定背景色，即设置android:background属性为我们刚创建的xml文件；同时还要将android:clickable设为true，以使其可以接受点击事件：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:clickable="true"
    android:background="@drawable/note_list_item_bg">
  • 编译运行，查看效果。

8. 实现点击列表项操作

点击列表项，将打开笔记进行阅读。此处我们仅仅将打开阅读页面与点击列表项操作进行对接，即代替任务1中“阅读”按钮。
打开NoteListAcitivity.java文件，执行以下修改：

  • 修改原“阅读”按钮响应方法onReadNote()为如下形式：
    private void onReadNote() {
        // 启动阅读页面
        Intent intent = new Intent(this, ReadNoteActivity.class);
        startActivity(intent);
    }
  • 修改内部类NoteViewHolder的构造方法，为itemView（对应于列表项布局的根元素）添加点击操作处理代码：
    public NoteViewHolder(View itemView) {
            super(itemView);
            titleView = itemView.findViewById(R.id.tv_title);
            createTimeView = itemView.findViewById(R.id.tv_create_time);
            contentView = itemView.findViewById(R.id.tv_content);

            // 响应点击列表项事件
            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    onReadNote();
                }
            });
        }

    }

  • 运行程序，效果如下：


总结

用RecyclerView（或者老旧的ListView）来展示列表数据是比较繁琐的过程。但是其中要领主要包括：

  • 正确的在布局中放置RecyclerView
  • 正确的创建列表项的布局文件
  • 正确的创建ViewHolder
  • 正确创建Adapter，并实现3个回调方法以完成数据绑定
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,454评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,553评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,921评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,648评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,770评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,950评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,090评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,817评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,275评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,592评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,724评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,409评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,052评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,815评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,043评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,503评论 2赞 361
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,627评论 2赞 350