Android中的MVVM架构设计-实用篇(三)

Android中的MVVM架构设计-实用篇(三)_第1张图片
速度与激情8.jpg

引言

今天忙里偷闲,找了个机会提前下班了,可算近两个月来最早的一次下班了。。。
by the way...
明天小米8就要抢购了,不过大家如果买不到的话,不建议去找黄牛,可以直接到小米之家去全款预购,应该过几天就能够拿到货了,当然,前提是你家附近有小米之家啦~

今天还是短文,主要介绍下mvvm中如何去加载图片,会的同学直接忽略本文即可。。。

MVVM加载图片

我就废话少说,直接贴思路

1、肯定是先去定义布局,我就在前两文中的布局中直接加了

Android中的MVVM架构设计-实用篇(三)_第2张图片
第一步添加imageview控件.png

不过,这不是最终的布局,稍后会再微调一下

2、在bean中添加图片的地址

我们这里直接用图片网址进行示例,当然如果你想添加本地图片,方法也是一致的,我这里就直接找一个美女图片了
请看我调整后的bean类


Android中的MVVM架构设计-实用篇(三)_第3张图片
第二步,添加图片地址变量.png

当然,还不够,这里还得遵循「mvvm的套路」了

3、在bean中定义设置图片的方法,这一步操作有点类似于“自定义属性”

还是直接看代码吧
我习惯使用glide,所以就直接倒了glide的库,如果你喜欢picasso 或者Fresco 或者原生,当然也可以,这里自便,不过用三方库在mvvm中也是一个坑,如果大家遇到了,请留言,我们可以探讨一下喽(话说mvvm排bug真是费时间的事~~~~)


Android中的MVVM架构设计-实用篇(三)_第4张图片
第三步,定义设置图片的“适配器”

红框就是我们刚才定义的适配器,注意一定得是静态方法。。。

    注解中双引号中的“bind:img” ,“bind”是规范,即必须要写的,而后边的“img”就是我们 定制的自定义属性,将来我们设置图片的时候,就必须使用这个名字“img”去设置图片的url,记住这里是一一对应的哦

      这里需要注意的是,有时as对“bind:img”的写法不是很懂,这个时候我们可以使用{“img”}的方式单独设置

4、重新回去修改布局

步骤3也说了,定义了设置url的自定义属性,所以肯定得回去修改布局,修改之后的布局是这样的


Android中的MVVM架构设计-实用篇(三)_第5张图片
第四步,修改布局

红框为我们添加的代码
上边的红框代码不解释,下面的红框代码即使用了“img”属性,后边的值则是我们要设置的图片的url

5、改看结果了吧,修改下MainActivity

Android中的MVVM架构设计-实用篇(三)_第6张图片
先提供了个构造方法.png
Android中的MVVM架构设计-实用篇(三)_第7张图片
对imgUrl也做了绑定.png
Android中的MVVM架构设计-实用篇(三)_第8张图片
MainActivity.png

然后用了个构造方法,

6、看结果吧~~

Android中的MVVM架构设计-实用篇(三)_第9张图片
未命名.gif

总结

显示图片的方式是很多简单,但是在做的时候一定要注意导入的三方库中是否与本来的项目的依赖有冲突,如果有,需要改成一致的版本
「纸上得来终觉浅,绝知此事要躬行」

有时间的小伙伴一定记得练习一下哦~~

谢谢各位的支持,加油~~~

你可能感兴趣的:(Android中的MVVM架构设计-实用篇(三))