Android 图片网格布局控件

Android 图片网格布局控件

项目地址:MultiPictureView

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

显示效果

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

布局方式

编辑/显示模式

显示模式	编辑模式

如何使用

1. 在布局中声明

<com.goyourfly.multi_picture.MultiPictureView
    android:id="@+id/multi_image_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:editable="false"
    app:deleteDrawable="@drawable/..."
    app:addDrawable="@drawable/..."
    app:imageLayoutMode="DYNAMIC"
    app:max="9"
    app:space="6dp"
    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

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<Uri>)
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<Uri> uris) {
        // 图片被点击...
    }
});

依赖

第一步：添加到根build.gradle

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

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

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

感谢

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