Android 控件使用教程（三）—— NineGridImageView 九宫格展示图片

引子

上文降到RecyclerView的使用，确实非常方便易用，而且样式多样，很灵活。但在图像展示时，经常有朋友圈和微博等9张图以内的图片展示需求，这时候，不是一个可以无限下滑的RecyclerVew能解决的图片显示问题。那就需要一个类似于GridView的，九张图显示控件。并且，这个控件应该能针对不同个数的图片都有很好的显示效果，使图片尽可能大的展示在特定空间区域之内，很荣幸能遇到这样的一个开源控件，NineGridImageView.

NineGridImageView

因为是一个比较新的控件，而且作者也已经开博讲解怎么使用，所以我不过多阐述如何使用，如有需求请转步作者博客http://laobie.github.io/android/2016/03/06/nine-grid-iamge-view-libaray.html来进一步了解。我来说一说我是怎么使用的。

使用：

    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()方法对吧？这个我也感觉挺别扭。

但总之，这个库还是很好用的，作为图片九宫格自适应的图片展示还是很可以考虑使用的。

感谢作者提供了这个库，希望后续还有更好的改进。

结语

这是最常用的NineGridImageView的使用，项目已开源在：https://github.com/fuxuemingzhu/ViewAdapterTest，欢迎Star和交流学习。

下一篇我将讲解对ListView/RevyclerView/NineGridImageView的使用优化。