Android格子视图的另外一种实现方式之Images3LinearLayout(9宫格/九宫格)

最新推荐文章于 2026-06-22 19:25:46 发布

原创最新推荐文章于 2026-06-22 19:25:46 发布 · 1.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android #android studio #java

格子视图同时被 2 个专栏收录

4 篇文章

订阅专栏

自定义格子视图

4 篇文章

订阅专栏

本文介绍了LatticeApp中的Images3LinearLayout组件，它支持高度定制的图片展示与编辑，如图片数量、布局、加载器等。通过GlideImageLoader实现图片加载，并演示了切换编辑模式和绑定事件的方法。

宫格视图LatticeApp让开发再变得简单些！

文章最后有demo下载地址

这一篇讲的是LatticeApp最后一个控件Images3LinearLayout，也是这几个控件中代码量最多的一个控件了， Images3LinearLayout控件可以分为两部分来说，第一部分就是它的编辑功能，第二部分就是展示功能、类似微信朋友圈宫格图片展示，如下图所示：

其中编辑功能包括增加、删除、拖拽删除、移动切换（暂未实现），预览功能包括设置每一行最多展示的图片数量、缩放控件的比例、图片的展示类型、图片间距设置等等… 这样就给到我们高度自定义的空间，什么12宫格、9宫格、4宫格，都可以展示。只要给定imageTextParams.maxLine就可以了。

imageTextParams.maxLine = 2；如下图所展示的就是4宫格样式。

在这里插入图片描述

配置项

首先看配置项Images3Params继承于LatticeView.ImageTextParams，其中参数urls是图片路径，它可以是本地图片路径或者是网络路径，width是必须设置的参数，否则控件无法显示，代码注释中有详细描述。

在这里插入图片描述

LatticeView.ImageTextParams中还定义了一个图片加载器这个泛型，这个图片加载器我demo中使用的是 Glide，可以选择自己熟悉的图片加载框架。
在这里插入图片描述

图片展示

下面是展示图片实现方法，需要实现displayImage方法与displayDrawableImage两个方法，displayImage是网络与文件图片展示、displayDrawableImage本地图片展示。需要自己在项目中实现。GlideImageLoader最后要实例化，赋值给配置项中的imageLoader参数。

/**
 *  定义图片加载器。 这里我使用的是Glide图片加载器
 *
 *  如果要对图片进行不同的处理， 可以再次实现ImageLoader接口
 */
public class GlideImageLoader implements ImageLoader {

    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        Glide.with(context).load(path)
                .transform(new CenterCrop(), new RoundedCorners(10))
                .into(imageView);
    }


    @Override
    public void displayDrawableImage(Context context, Integer path, ImageView imageView) {
        Glide.with(context).load(path)
               // .diskCacheStrategy(DiskCacheStrategy.DATA)
                .transform(new CenterCrop(), new RoundedCorners(10))
                .into(imageView);
    }
}

//R.mipmap.a是本地图片、将其转换成字符串类型就可以展示了
 urls = new String[]{"图片路径1","图片路径2",R.mipmap.a+""};


        images3Params = new Images3LinearLayout.Images3Params();
        images3Params = new Images3LinearLayout.Images3Params();
        images3Params.imageLoader = new GlideImageLoader();
        images3Params.bg_color = android.R.color.white;
        images3Params.setUrls(urls);
        images3Params.maxLine = 3;
        images3Params.space = 4; // 图片间距
        images3Params.scaleType = ImageView.ScaleType.CENTER; // 图片居中显示。 默认是铺满
        image3Layout.post(new Runnable() {
            @Override
            public void run() {
                // 等到视图加载完，才能获取宽度
                images3Params.width = image3Layout.getWidth();
                image3Layout.setParams(images3Params);
                image3Layout.startView(); // 预览
            }
        });

好啦，以上代码就实现的9宫格图片的展示。那么编辑呢，怎么操作。我们看下列代码。

切换编辑模式

在配置项中我们看到了这样一行代码：

 // 模式
 public EditType type = EditType.PREVIEW_TYPE;

什么意思？我们接着看EditType这个枚举。

/**
     * 启用编辑的类型
     */
    public enum EditType {
        // 图片添加模式
        ADD_TYPE,
        // 图片删除模式
        DELETE_TYPE,
        // 添加与删除共存
        ALL_TYPE,
        // 拖拽删除
        DRAG_TYPE,
        // 预览
        PREVIEW_TYPE,
    }

原来枚举EditType中定义了5中类型。那么改变配置项中的参数就可以吗？我们看代码中提供了一个这样的方法。

/**
     * 启用编辑模式
     *
     * @param type 编辑的类型 在EditType中定义
     * @param images（一般最多2张图片， 当参数长度为2时，游标为0的参数应该是删除图片，游标为1的是添加图片）
     * @return
     */
    public boolean enableEditModel(EditType type, int... images) {
        if (params == null) {
            Log.e(TAG, "params is null");
            return false;
        }

        if (type == null) {
            Log.e(TAG, "EditType is null");
            return false;
        }

        this.removeEditModel();

        this.params.type = type;
        switch (type) {
            case ADD_TYPE:
                if (images.length > 0) addType(images[0]);
                break;
            case DELETE_TYPE:
                if (images.length > 0) deleteType(images[0]);
                break;
            case ALL_TYPE:
                if (images.length > 1) allType(images[0], images[1]);
                break;
        }

        // 刷新UI
        startView();
        return true;
    }

enableEditModel()有两个参数，第一个就是EditType枚举，传入你想要的操作模式即可。第二个参数是一个图片数组参数，看代码的注释是这样说的
“一般最多2张图片，当参数长度为2时，游标为0的参数应该是删除图片，游标为1的是添加图片” 最多只能传递2张图片哦，而且需要与传入的EditType相互对应。

下面看一下几种编辑模式的切换方法。

删除模式

  // 打开删除模式
 image3Layout.enableEditModel(Images3LinearLayout.EditType.DELETE_TYPE,R.mipmap.shanchu);

添加模式

       //添加模式  
       image3Layout.enableEditModel(Images3LinearLayout.EditType.ADD_TYPE, R.mipmap.send_photo_join); // 添加模式

拖拽删除模式

// 开启拖拽删除模式 
 image3Layout.enableEditModel(Images3LinearLayout.EditType.DRAG_TYPE);

全编辑模式

 // 包括删除和添加-所以需要传递2张图片
 image3Layout.enableEditModel(Images3LinearLayout.EditType.ALL_TYPE,  R.mipmap.shanchu, R.mipmap.send_photo_join); // 开启全模式

预览模式

 image3Layout.enableEditModel(Images3LinearLayout.EditType.PREVIEW_TYPE);

如果需要在几种模式中来回切换，直接调image3Layout.enableEditModel即可。

绑定事件

  // 绑定点击事件
 image3Layout.setOnImages3PageItemOnClickListener(this);
// 删除事件监听
image3Layout.setOnPageDeleteImageClickListener(this);
// 长按事件监听
image3Layout.setOnPageItemOnLongClickListener(this);

看看回调方法有哪些。onDeleteClick删除回调，onClick点击回调，这个方法一般用于启动预览图片窗口，onLongClick 长按回调。这几个回调的参数是一样的，urls是路径数组，position是操作的位置。

@Override
public void onDeleteClick(View view, String[] urls, int position) {
        // 删除成功之后被回调， 处理一些删除之后的逻辑
        Log.e(TAG,"------" + urls[position]);
    }


    @Override
    public void onClick(View v, Object[] urls, int position) {
        //urls 这个是返回的图片路径，需要强制转换一下
        Log.d(TAG, "处理自己的逻辑 - 比如启动预览,点击了 + " + position);
    }

    @Override
    public void onLongClick(View v, Object[] urls, int position) {
        // 长按事件处罚
        Log.d(TAG, "触发长按事件 + " + position);


    }

    @Override
    public boolean onClickEndView(View v, Object[] urls, int position) {
        Log.d(TAG, "点击了最后一个追加图片按钮, 插入一张图片到倒数第二的位置"+position);
        image3Layout.addImage(position, lastImage);
        image3Layout.startView();
        // 如果返回 false . onClick(View v, Object[] urls, int position) 将不在被回调，不继续分发事件 ， true则相反
        return false;
    }

onClickEndView()是啥，为什么还要有一个返回值呢？这个方法的意思是点击了视图中最后个view, 但是他的触发是有条件的，我们看代码。
在这里插入图片描述

点击的是最后一个，而且必须是数值形态的路径（项目中的图片），并且满足添加模式与全编辑模式的两个参数才会被回调。 onClickEndView()的用途是什么？一般用于启动我们的图片选择器。它的返回值决定了onClick()方法是否被回调，是否要继续向下分发事件。看代码

   /**
     * 该方法主要监听当前点击的是不是最后一个view， 并且只有在添加图片\全编辑的模式下，才会被调用
    *
    * @param v
    * @param urls
    * @return 是否向下分发事件， 如果返回false, 就不再响应onClick事件。 返回true,继续回调onClick事件
         */
        boolean onClickEndView(View v, Object[] urls, int position);

插入一张图片到指定位置

  image3Layout.addImage(position, "图片路径");
  image3Layout.startView();

如果在ListView或者RecyclerView的adapter中使用，出现图片错乱的情况，请先调用removeViews()方法。

在布局文件中的引用

     <com.gongjiebin.latticeview.Images3LinearLayout
         android:id="@+id/il_mian"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"/>

用法（引用）

在app->build.gradle文件下 -> dependencies中引入

 implementation 'com.github.gongjb:LatticeApp:1.0.2'

在app->build.gradle文件下 -> android 中加入如下代码

 allprojects {
        repositories {
            jcenter()
            maven {
                url 'https://maven.google.com/'
                name 'Google'
            }
            mavenCentral()
        }
    }

为了能顺利加载成功，我们需要做如下操作，在根目录build.gradle文件下->buildscript下加入如下代码

    repositories {
        google()
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public/'}
        maven { url 'https://www.jitpack.io' }
    }

在根目录build.gradle文件根目录下加入如下代码

allprojects {
    repositories {
        google()
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public/'}
        maven { url 'https://www.jitpack.io' }
        maven { url "https://maven.google.com"}
        maven { url "https://dl.google.com/dl/android/maven2/"}
    }
}