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呢，下一篇文章会做进一步的讲解。
多谢大家的支持~~~么么哒
网友评论