自定义九宫格控件NineGridLayout ,实现微信朋友圈图片九宫格显示

最新推荐文章于 2024-04-21 09:37:30 发布

多啦A梦的小城

最新推荐文章于 2024-04-21 09:37:30 发布

阅读量2w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Android 微信自定义View 图片九宫格文章标签： android 微信开源图片九宫格

本文链接：https://blog.csdn.net/u012650948/article/details/43638427

本文介绍了如何实现类似微信朋友圈图片显示的九宫格布局。通过自定义ViewGroup，NineGridLayout控件可以在不同图片数量下动态调整布局。相比使用GridView，NineGridLayout提供更灵活的解决方案，只需约100行代码即可完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

很多时候我们都在刷微博或者微信朋友圈的时候都会看到很多图片，而这些图片的显示跟我们平时很多控件的显示方式都不一样，而且，当我们仔细去观察后就会发现，他加载的图片都是根据图片数量动态加载的，根据不同的图片数量来用不同的布局显示，如下图：

PS：图片来源于网络

当图片是4张的时候，就会形成一个2x2的正方形，除了一张的情况，另外的都是按照九宫格的方式显示和排列图片的。那么这种布局是怎么实现的呢，一开始，好多人都可能认为用原生的GridView就能搞掂，但是，却有几种特殊的情况是GridView解决不了的，例如4张图片的情况，或者1张，其实也可以根据图片的数量然后用几个不同布局的GridView来实现，不过那样的话就复杂得多了。而且处理起来很麻烦，其实，大部分的实现都是通过自定义ViewGroup来实现的，通过代码编写来设定childrenView的layout来实现这种布局，而NineGridView控件就是这么一个东西，代码其实很简单，100行就够了。

代码编写

先自定义一个View集成ViewGroup，编辑器会提示你实现OnLayout方法，实现之，这里我们动态的添加的话其实不用到OnLayout方法，自定义一个layoutChildrenView()用来为子view设定位置就行了，该方法的实现如下：

    private void layoutChildrenView(){
        int childrenCount = listData.size();

        int singleWidth = (totalWidth - gap * (3 - 1)) / 3;
        int singleHeight = singleWidth;

        //根据子view数量确定高度
        ViewGroup.LayoutParams params = getLayoutParams();
        params.height = singleHeight * rows + gap * (rows - 1);
        setLayoutParams(params);

        for (int i = 0; i < childrenCount; i++) {
            CustomImageView childrenView = (CustomImageView) getChildAt(i);
            childrenView.setImageUrl(((Image) listData.get(i)).getUrl());
            int[] position = findPosition(i);
            int left = (singleWidth + gap) * position[1];
            int top = (singleHeight + gap) * position[0];
            int right = left + singleWidth;
            int bottom = top + singleHeight;

            childrenView.layout(left, top, right, bottom);