Android 图片网格布局控件

来源:互联网 发布:网络金融的认识 编辑:程序博客网 时间:2024/04/28 02:19

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

原创粉丝点击