Android格子視圖的另外一種實作方式之Images3LinearLayout(9宮格/九宮格)

宮格視圖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/"}
    }
}

結束語： 在androidx上也能正常運行該組件，這個組件一共有4個視圖，這篇講的是9宮格圖片展示器/編輯器 Images3LinearLayout， LatticeApp組件講完了，歡迎大家下載使用，如果您覺得還行，請給我個star 謝謝！

LatticeApp Demo下載地址

整理了一下講這個組件的其它文章，有興趣的同學可以看看，

第一篇Android格子視圖的另外一種實作之LatticeView視圖

第二篇Android格子視圖的另外一種實作方式之PersonalTabBar

第三篇Android格子視圖的另外一種實作方式之AutoLineLayout與AutoLineDeleteView