189 8069 5689

Android图片网格布局控件示例代码

项目地址:MultiPictureView

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的苏尼特右网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

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

显示效果

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

布局方式

Android 图片网格布局控件示例代码

动态布局

Android 图片网格布局控件示例代码

静态布局

编辑/显示模式

Android 图片网格布局控件示例代码Android 图片网格布局控件示例代码

如何使用

1. 在布局中声明

参数类型说明默认值
editableboolean是否可编辑（添加和删除）false
spaninteger每行最多显示多少3
spacedimension图片间隔大小8dp
maxinteger最多显示多少张图片9
imageLayoutModeinteger图片布局类型：动态(DYNAMIC=1)和静态(STATIC=2)STATIC=2
deleteDrawabledrawable删除图标红色删除Drawable
addDrawabledrawable添加图片灰色添加图片Drawable

2. 在代码中使用

2.1 初始化ImageLoader

MultiPictureView.setImageLoader(object : ImageLoader {
  override fun loadImage(image: ImageView, uri: Uri) {
    Vincent.with(image.context)
        .load(uri)
        .placeholder(R.drawable.ic_placeholder_loading)
        .error(R.drawable.ic_placeholder_loading)
        .into(image)
  }
})

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

multiPictureView = (MultiPictureView) findViewById(R.id.multi_image_view);
// 设置图片资源
multiPictureView.setList(list:List)
multiPictureView.setAddClickCallback(new MultiPictureView.AddClickCallback() {
  @Override
  public void onAddClick(View view) {
    // 添加图片回调...
  }
});
multiPictureView.setDeleteClickCallback(new MultiPictureView.DeleteClickCallback() {
  @Override
  public void onDeleted(View view,int index) {
    // 删除图片回调，如果不设置，默认删除图片...
  }
});
multiPictureView.setItemClickCallback(new MultiPictureView.ItemClickCallback() {
  @Override
  public void onItemClicked(View view,int index,ArrayList uris) {
    // 图片被点击...
  }
});

依赖

第一步：添加到根build.gradle

allprojects {
  repositories {
    ...
    jcenter()
  }
}

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

dependencies {
  compile 'com.github.goyourfly:multi_picture_view:latestVersion'
}

感谢

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

Matisse

Vincent

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


网站栏目：Android图片网格布局控件示例代码
链接地址：http://cdxtjz.com/article/jpgpos.html

其他资讯