引子

上文降到RecyclerView的使用，確實非常方便易用，而且樣式多樣，很靈活。但在影象展示時，經常有朋友圈和微博等9張圖以內的圖片展示需求，這時候，不是一個可以無限下滑的RecyclerVew能解決的圖片顯示問題。那就需要一個類似於GridView的，九張圖顯示控制元件。並且，這個控制元件應該能針對不同個數的圖片都有很好的顯示效果，使圖片儘可能大的展示在特定空間區域之內，很榮幸能遇到這樣的一個開源控制元件，NineGridImageView.

NineGridImageView

使用：

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

xml配置：

    <com.jaeger.ninegridimageview.NineGridImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/ngiv_nine_grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="16dp"
        android:layout_marginTop="30dp"
 

        app:imgGap="4dp"
        app:showStyle="fill"
        app:singleImgSize="120dp"/>

控制元件繫結：

    @Bind(R.id.ngiv_nine_grid)
    NineGridImageView<String> nine_grid;

介面卡NineGridImageViewAdapter，其中不一定是String型別，可以修改（這也是我的程式碼弱項）：

    private NineGridImageViewAdapter<String> mAdapter = new
 
 NineGridImageViewAdapter<String>() {
        @Override
        protected void onDisplayImage(Context context, ImageView imageView, String url) {
            Picasso.with(context)
                    .load(url)
                    .into(imageView);
        }

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

        @Override
        protected void onItemImageClick(Context context, int index, List list) {
            super.onItemImageClick(context, index, list);
        }

    };

獲得圖片資源的方法可以從本系列第一篇博文中找到，這裡說明如何把資源載入到NineGridImageView。已知urls_list中放的是各個圖片的地址。如下方式進行adapter載入和資源輸入。

        nine_grid.setAdapter(mAdapter);
        nine_grid.setImagesData(urls_list);

至此，圖片已經能夠顯示了，而且顯示效果會根據圖片的個數進行改變，來做到對圖片的適配。效果如下：

可以看出本控制元件還是很方便易用的。

這是控制元件對item的監聽的辦法，需要在adapter中書寫：

        @Override
        protected void onItemImageClick(Context context, int index, List list) {
            super.onItemImageClick(context, index, list);
            Toast.makeText(context, "" + index, Toast.LENGTH_LONG).show();
        }

思考

提出一些小的質疑，就是很少見到給一個控制元件載入介面卡和載入內容是放在兩行程式碼分別進行的吧？如在常見的ListView中，我們一般這麼寫：

        adapter = new ListViewAdapter(ListViewActivity.this, urls);
        Log.i("urls", urls.toString());
        listview.setAdapter(adapter);

adapter中載入資源，listview中設定adapter.如果資料有改變一般是這麼寫：

    adapter.notifyDataSetChanged();

告訴介面卡內容改變了，也就是說由介面卡來管理資料。本控制元件中是以控制元件來管理資料，這樣我感覺很彆扭。也只能勉強接受。同時我並沒有看到在NineGridImageViewAdapter或者NineGridImageView中有notifyDataSetChanged();等語法來宣告資料改變，或許只能重新設定資料來源。

還有好像在介面卡中進行控制元件子控制元件的監聽好像見到的也不是很多。大部分是在view中進行setOnItemClick()方法對吧？這個我也感覺挺彆扭。

但總之，這個庫還是很好用的，作為圖片九宮格自適應的圖片展示還是很可以考慮使用的。

感謝作者提供了這個庫，希望後續還有更好的改進。

結語

下一篇我將講解對ListView/RevyclerView/NineGridImageView的使用優化。