Android中的MVVM架构设计-实用篇（四）实现ListView列表展示

0碟中谍6.png

00碟中谍6.png

引言

今天是8月4号，星期六，起了大早跑了趟医院，下午回家后睡到了下午五点...
距离上次写mvvm系列已经快有两个月的时间了，写作的坚持最终还是败给了加班和懒惰，不过，今天我回来了，我的文章我会一直写下去的！

废话少说，说正题

今天给大家带来的是使用mvvm实现listview列表的展示
效果图:

0、效果图.png

被丑哭了？没关系，我没哭就好了

很简单，就是实现了一个头像、姓名、性别的展示，而且还都是用到了假数据。

我的博文中的

mvvm实用篇(一)
https://www.jianshu.com/p/545af5bbb93f
mvvm实用篇(二)
https://www.jianshu.com/p/ef5f8d7d2caa
mvvm实用篇(三)
https://www.jianshu.com/p/6bacbdeb0250

已经将mvvm的图片，String类型的文字都解释的很清楚了，如大家还有什么疑惑，可以再去前三篇。

开始操作

第一步：准备基础布局ListView

在这一步中，无需考虑mvvm，直接按照我们以前的逻辑进行界面搭建即可。
如图所示：

1、基础布局.png

很简单，就在里面放了一个listview，而且给了个id
然后，也是按照我们以前的写法，去找到listview这个id

2、找到id.png

ok,到这里第一步做完，接着看第二步

第二步：准备viewmodel类

我们这里的viewmodel类是一个Student类，看了效果图，大家应该都知道这个viewmodel类中都有什么属性了吧！
对：Student类中只有三个属性：
姓名、性别、头像地址
不过，基于我们前三篇文章的介绍，这个viewmodel我就直接写的很全，其中包含了设置图片的逻辑，请看下图

3、Student类.png

这个类在我的第二篇和第三篇文章中有介绍过，如果有纳闷的同学，可以参考那两篇文章。
需要注意的是，我在这个Student类中添加了一个click方法，用于弹出一个吐司，这个方法将在下一步中用到。

第三步、准备Listview中的item的布局

第三步是基于第二部的，所以大家顺序一定按照我的来哦，直接贴图吧，也很简单

4、item布局.png

这里面唯一需要注意的一点是

5、linearlayout点击事件.png

我给linearLayout加了一个点击事件，这个点击事件是在第三步中定义的一个click方法，在这里直接引用就可以了。

第四步、创建ListView适配器

这一步是关键的一步，应该是大家稍微要记忆一下的。
前边也说到了要做mvvm的话，需要一些套路，在这呢，我们还得要遵循这些套路，ok,不说废话，直接贴图

6、Listview的适配器.png

可以看到，这个适配器还是跟我们以前的那个适配器还是很相似的，只有构造方法和getView不太一致。
那么我们来看下构造方法：
构造方法中我们准备了很多属性，分别是：
Context 、LayoutInflater 、layoutId 、variableId、list
其中，只有variableId是我们不熟悉的，这个variableId在下一步中，我们会用到，当我们看到的时候应该就很清楚了。
getView里面的逻辑不多解释了，在上图的代码中都注释好了，如有疑问可以留言。
那么 其实这一步做完，就差不多完成了。

第五步、给listview设置适配器，完工！

这里我们使用了假数据，还是看图吧

7、设置适配器.png

然后，添加联网权限，就可以看到效果了

0、效果图.png

而且，点击其中的一个条目，就会吐司条目的name。

总结

使用mvvm实现listview感觉逻辑上轻松很多，而且这个listview的适配器基本上可以试用与大多数情况，也就是说，我们处理一般的列表展示，只需用这一个适配器就够了。
但是，适配器的写法需要大家再熟悉一下。

下一篇文章

本例子中只介绍了ListView的用法，GridView和ListView类似，当然也可以用这个方法，但是ViewPager和RecyclerView呢，下一篇文章会做进一步的讲解。

多谢大家的支持~~~么么哒