项目上遇到一个九宫格图片显示的需求,由于时间紧张,直接在GitHub上找了一个组件使用。
链接在这:九宫格图片显示组件
但是在之后的使用中发现效果并没有很理想,在只有一张图片的时候显示似乎有些问题,另外图片显示风格也只有grid和fill两张可以选择,于是在这个组件的基础上,我自己做了一些修改以适合项目需求。
只有一张图片时的显示
这个显示效果模仿了微信,也就是等比缩放。所以我们需要预先得到图片的尺寸,然后根据配置的一张图时显示的最大尺寸来得到缩放后的宽高,代码如下:
预读图片的尺寸
不太会用的编辑器,代码排版不太好,就截了张图
这里的图片来源可以是本地和网络,因为项目中使用了图片加载框架Glide,直接用Glide加载出bitmap,从bitmap中获取图片尺寸。因为是异步获取图片,所以得到尺寸后要刷新一下布局。
多张图片时的显示
多张图片的时候,由于我想根据图片数量显示不同的布局,所以写了很多case,根据图片数量的不同给图片不同的布局参数,代码如下:
确定图片布局参数
这里实现不太优雅,其实图片尺寸是有一定的规律的,因为我这里只需要最多显示9张图,所以就直接敲死了。
最后的效果
不同图片数量不同显示效果
组件化
这个九宫格空间我其实并没有将其组件化,如果要将它真正做成一个组件,我觉得还有以下工作要做:
1、将预加载图片尺寸和加载图片的方法抽出,以适用不同的图片加载框架;
2、将图片的点击事件暴露出去;
3、将这种显示风格作为一个风格选项,以适用不同的显示场景;
4、最多可显示图片数量可以自由配置,那么给图片设置布局参数的代码就需要修改。
写于2018-1-15