最近在公司專案重構一個類似朋友圈或微博的動態介面，其中需要顯示九宮格圖片，在查詢一些開源庫之後，發現沒特別好用的，或者說滿足我需求的，就一不小心造了個輪子。

這是一個自定義控制元件，用來顯示類似微信朋友圈或微博中那樣的九宮格圖片， GitHub地址 。效果圖如下所示： 

Demo App

特性

• 設定圖片之間的間隔

  app:imgGap="4dp" 或 nineGridImageView.setGap(int gap); 

• 設定顯示樣式

  app:showStyle="fill" 或 nineGridImageView.setShowStyle(int style); 

  預設樣式是網格樣式： STYLE_GRID : 

  

  另外一種樣式是： STYLE_FILL : 

  

  兩者的區別見圖或在Demo中體驗。

• 當只有一張圖的時候，可以設定其顯示大小，不讓其顯示的過小:

  app:singleImgSize="120dp" 或 nineGridImageView.setSingleImgSize(int singleImgSize) 

  

用法

1. 首先新增依賴

compile 'com.jaeger.ninegridimageview:library:1.0.0'

2. 在佈局檔案中新增 NineGridImageView， 如下所示：

<com.jaeger.ninegridimageview.NineGridImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_width="match_parent"
    app:imgGap="4dp"
    app:showStyle="fill"
    app:singleImgSize="120dp"/>
 

3. 為 NineGridImageView 設定 NineGridImageViewAdapter

nineGridImageView.setAdapter(nineGridViewAdapter);

下面是 NineGridImageViewAdapter.class 的原始碼: 

public abstract class NineGridImageViewAdapter<T> {

    protected abstract void onDisplayImage(Context context, ImageView imageView, T t);

    protected void onItemImageClick(Context context, int index, List<T> list) {
    
    }

    protected ImageView generateImageView(Context context) {
        GridImageView imageView = new GridImageView(context);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        return imageView;
    }
}			
 

• T 是你圖片的資料型別, 你可以簡單的使用 String 型別也可以是你自定義的型別；
• 你必須重寫 onDisplayImage(Context context, ImageView imageView, T t) 方法去設定顯示圖片的方式, 你可以使用 Picasso、Glide 、ImageLoader 或者其他的圖片載入庫，你也可以給 ImageView 設定一個佔位圖； 
• 如果你需要處理圖片的點選事件，你可以重寫 onItemImageClick(Context context, int index, List<T> list) 方法，加上你自己的處理邏輯； 
• 如果你要使用自定義的 ImageView ，你可以重寫 generateImageView(Context context) 方法， 去生成自定的 ImageView 。 

下面是一段示例程式碼:

private NineGridImageViewAdapter<Photo> mAdapter = new NineGridImageViewAdapter<Photo>() {
	@Override
	protected void onDisplayImage(Context context, ImageView imageView, Photo photo) {
		Picasso.with(context)
                    .load(photo.getSmallUrl)
                    .placeholder(R.drawable.ic_default_image)
                    .into(imageView);
            }

        @Override
        protected ImageView generateImageView(Context context) {
            return super.generateImageView(context);
        }

        @Override
        protected void onItemImageClick(Context context, int index, List<Photo> photoList) {
           showBigPicture(context, photoList.get(index).getBigUrl());
        }
    };
        
...
	mNineGridImageView.setAdapter(mAdapter);
...

4. 給 NineGridImageView 設定圖片資料：

nineGridImageView.setImagesData(List<T> imageDataList);

參考資料

最後

第一次釋出開源庫，如果你有任何建議或問題，請及時聯絡我。如果你對本控制元件有優化，歡迎 fork 提 pr。