九宫格显示控件

2023年12月9日 438次阅读 来源: 九宫格问题

这个跟上一篇文章是相对应的，上一篇是选择并显示（也可以删除），这一篇是单纯的显示，就像微信朋友圈的九宫格图片一样。而且是同一作者写的，很犀利。
地址：https://github.com/jeasonlzy/NineGridView。Demo使用如下：

1、compile，不解释。

compile 'com.lzy.widget:ninegridview:0.2.0'
compile 'com.squareup.picasso:picasso:2.5.2'

2、同样需要一个图片加载器imageloader。

public class PicassoImageLoader implements NineGridView.ImageLoader {

    @Override
    public void onDisplayImage(Context context, ImageView imageView, String url) {
        Picasso.with(context).load(url)
                .networkPolicy(NetworkPolicy.NO_CACHE)//读取网络图片不缓存
                //.memoryPolicy(MemoryPolicy.NO_CACHE)//读取本地图片缓存
                .placeholder(R.mipmap.ic_launcher)
                .error(R.mipmap.ic_launcher)
                .into(imageView);
    }

    @Override
    public Bitmap getCacheImage(String url) {
        return null;
    }
}

3、xml声明和MainActivity中使用。

public class MainActivity extends Activity {
    private NineGridView gridView;
    private List<ImageInfo> list;
    private ImageView iv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        NineGridView.setImageLoader(new PicassoImageLoader());
        gridView = findViewById(R.id.gridView);
        iv = findViewById(R.id.iv);
        initData();
    }

    private void initData() {
        list = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            ImageInfo imageInfo = new ImageInfo();
            switch (i) {
                case 0:
                    imageInfo.setBigImageUrl("http://p0.so.qhimgs1.com/bdr/_240_/t01d8617422878c3c50.jpg");
                    imageInfo.setThumbnailUrl("http://p0.so.qhimgs1.com/bdr/_240_/t01d8617422878c3c50.jpg");
                    break;
                case 1:
                    imageInfo.setBigImageUrl("http://img4.imgtn.bdimg.com/it/u=61561371,604619965&fm=27&gp=0.jpg");
                    imageInfo.setThumbnailUrl("http://img4.imgtn.bdimg.com/it/u=61561371,604619965&fm=27&gp=0.jpg");
                    break;
                case 2:
                    imageInfo.setBigImageUrl("http://pic.58pic.com/58pic/13/68/11/35W58PICzbv_1024.jpg");
                    imageInfo.setThumbnailUrl("http://pic.58pic.com/58pic/13/68/11/35W58PICzbv_1024.jpg");
                    break;
                case 3:
                    imageInfo.setBigImageUrl("http://img.zcool.cn/community/01638059302785a8012193a36096b8.jpg@2o.jpg");
                    imageInfo.setThumbnailUrl("http://img.zcool.cn/community/01638059302785a8012193a36096b8.jpg@2o.jpg");
                    break;
                case 4:
                    imageInfo.setBigImageUrl("https://ps.ssl.qhimg.com/sdmt/156_135_100/t010b0a4aa5bb6941c4.jpg");
                    imageInfo.setThumbnailUrl("https://ps.ssl.qhimg.com/sdmt/156_135_100/t010b0a4aa5bb6941c4.jpg");
                    break;
                case 5:
                    imageInfo.setBigImageUrl("https://ps.ssl.qhimg.com/sdmt/155_135_100/t018552c6a1c322d25b.jpg");
                    imageInfo.setThumbnailUrl("https://ps.ssl.qhimg.com/sdmt/155_135_100/t018552c6a1c322d25b.jpg");
                    break;
                case 6:
                    imageInfo.setBigImageUrl("https://ps.ssl.qhimg.com/sdmt/119_135_100/t01c336a7c24a1c7fa6.jpg");
                    imageInfo.setThumbnailUrl("https://ps.ssl.qhimg.com/sdmt/119_135_100/t01c336a7c24a1c7fa6.jpg");
                    break;
                case 7:
                    imageInfo.setBigImageUrl("http://img.zcool.cn/community/01638059302785a8012193a36096b8.jpg@2o.jpg");
                    imageInfo.setThumbnailUrl("http://img.zcool.cn/community/01638059302785a8012193a36096b8.jpg@2o.jpg");
                    break;
                case 8:
                    imageInfo.setBigImageUrl("http://p2.so.qhimgs1.com/bdr/_240_/t017a380035da2570be.jpg");
                    imageInfo.setThumbnailUrl("http://p2.so.qhimgs1.com/bdr/_240_/t017a380035da2570be.jpg");
                    break;
                case 9:
                    imageInfo.setBigImageUrl("http://img3.imgtn.bdimg.com/it/u=4166721891,1503444760&fm=27&gp=0.jpg");
                    imageInfo.setThumbnailUrl("http://img3.imgtn.bdimg.com/it/u=4166721891,1503444760&fm=27&gp=0.jpg");
                    break;
            }
            list.add(imageInfo);
        }
        gridView.setAdapter(new NineGridViewClickAdapter(this, list));
    }
}

这样就已经满足了九宫格图片显示和点击图片预览了。
————————————————————————————————————————————————————————————
上面只是一个简单的例子，但是实际开发中，这个控件通常是在列表的item中。
List 实例化的地方也需要注意在getView()方法的new ImageInfo()之前实例化，在return view之前最好也判断一下：

if (imageInfoList != null && imageInfoList.size() > 0) {
            item.gridView.setAdapter(new NineGridViewClickAdapter(context, imageInfoList));
        }

可能实际开发中，会有不同的需求满足不了，那就只能导库来改库了，导入报错，修改一下buildToolsVersion就行了，提示不能低于25.0.0，那就将库Module和你自己项目的Module都改成大于25.0.0来编译就好了。
比如预览的时候 添加图片长按事件，就可以在库的ImagePreviewAdapter中的instantiateItem方法中直接添加：

imageView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                Toast.makeText(context, "长按了" + imageInfo.get(position).getBigImageUrl(), Toast.LENGTH_SHORT).show();
                return true;
            }
        });

再比如：预览界面下面的数字指示器（2/9），想改成小圆点的那种（现在的微信就是这种），直接在ImagePreviewActivity中初始化过程中添加就行。初始化过程中顺便初始化小圆点，核心代码如下：

/** * 初始化小圆点 */
    private void initPoint() {
        for (int i = 0; i < imageInfo.size(); i++) {
            ImageView imageView = new ImageView(this);
            if (i == currentItem) {
                imageView.setBackgroundResource(R.drawable.point_selected);
            } else {
                imageView.setBackgroundResource(R.drawable.point_un_selected);
            }
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            params.leftMargin = 20;
            imageView.setLayoutParams(params);
            ll_point.addView(imageView);
        }
    }

然后给ViewPager设置一个监听就行了

viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                for (int i = 0; i < imageInfo.size(); i++) {
                    if (i == position) {
                        ll_point.getChildAt(i).setBackgroundResource(R.drawable.point_selected);
                    } else {
                        ll_point.getChildAt(i).setBackgroundResource(R.drawable.point_un_selected);
                    }
                }
//                tv_pager.setText(String.format(getString(R.string.select), currentItem + 1, imageInfo.size()));
            }
        });

指示器的小圆点是用shape样式写的。

    原文作者：九宫格问题
    原文地址: https://blog.csdn.net/AndroidStudioo/article/details/78737564
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞