查看: 475|回复: 0

[手机开发] Android 图片网格布局控件示例代码

发表于 2017-11-27 08:00:06
句号论坛

项目地址:MultiPictureView

MultiPictureView是一个可以将多张图片以网格的方式显示的View,通过简单的接口实现烦人的布局,从此解放你的小手手

显示效果

  1. 支持设置图片数量上限
  2. 支持设置最多显示列数
  3. 支持动态布局和静态布局两种模式(见下图)
  4. 支持编辑模式和展示模式(编辑模式可以增加和删除图片)

布局方式

动态布局

静态布局

编辑/显示模式

如何使用

1. 在布局中声明

  1. <com.goyourfly.multi_picture.MultiPictureView
  2. android:id="@+id/multi_image_view"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. app:editable="false"
  6. app:deleteDrawable="@drawable/..."
  7. app:addDrawable="@drawable/..."
  8. app:imageLayoutMode="DYNAMIC"
  9. app:max="9"
  10. app:space="6dp"
  11. app:span="3" />
复制代码

参数 类型 说明 默认值
editable boolean 是否可编辑(添加和删除) false
span integer 每行最多显示多少 3
space dimension 图片间隔大小 8dp
max integer 最多显示多少张图片 9
imageLayoutMode integer 图片布局类型:动态(DYNAMIC=1)和静态(STATIC=2) STATIC=2
deleteDrawable drawable 删除图标 红色删除Drawable
addDrawable drawable 添加图片 灰色添加图片Drawable

2. 在代码中使用

2.1 初始化ImageLoader

  1. MultiPictureView.setImageLoader(object : ImageLoader {
  2. override fun loadImage(image: ImageView, uri: Uri) {
  3. Vincent.with(image.context)
  4. .load(uri)
  5. .placeholder(R.drawable.ic_placeholder_loading)
  6. .error(R.drawable.ic_placeholder_loading)
  7. .into(image)
  8. }
  9. })
复制代码

2.2 绑定图片资源,设置事件监听

  1. multiPictureView = (MultiPictureView) findViewById(R.id.multi_image_view);
  2. // 设置图片资源
  3. multiPictureView.setList(list:List<Uri>)
  4. multiPictureView.setAddClickCallback(new MultiPictureView.AddClickCallback() {
  5. @Override
  6. public void onAddClick(View view) {
  7. // 添加图片回调...
  8. }
  9. });
  10. multiPictureView.setDeleteClickCallback(new MultiPictureView.DeleteClickCallback() {
  11. @Override
  12. public void onDeleted(View view,int index) {
  13. // 删除图片回调,如果不设置,默认删除图片...
  14. }
  15. });
  16. multiPictureView.setItemClickCallback(new MultiPictureView.ItemClickCallback() {
  17. @Override
  18. public void onItemClicked(View view,int index,ArrayList<Uri> uris) {
  19. // 图片被点击...
  20. }
  21. });
复制代码

依赖

第一步:添加到根build.gradle

  1. allprojects {
  2. repositories {
  3. ...
  4. jcenter()
  5. }
  6. }
复制代码

第二步:在模块的build.gradle添加依赖

  1. dependencies {
  2. compile 'com.github.goyourfly:multi_picture_view:latestVersion'
  3. }
复制代码

感谢

在Demo中使用了下面两个开源项目,感谢一哈,虽然第二个是我写的...大家要觉得好用,记得给我点个赞

Matisse

Vincent

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条