Android自定义控件---仿微信群聊(九宫格)头像

最新推荐文章于 2024-04-22 04:49:24 发布

自律给我自由1024

最新推荐文章于 2024-04-22 04:49:24 发布

阅读量7.2k

点赞数

分类专栏： Android自定义控件 Android基础文章标签： android 微信控件自定义控件头像

本文链接：https://blog.csdn.net/u012814441/article/details/54572816

版权

Android基础同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

Android自定义控件

5 篇文章 0 订阅

订阅专栏

这几天找九宫格头像的源码，发现网上很少有人写(不知道是不是我的搜索关键词不准确)。终于在github发现有一哥们写了一份源码，download了下来研究了一段时间，不太符合公司的产品需求 ,无奈只能放弃。

趁这个周末有空自己写了一份源码，分享一下。

Demo效果图如下

TribeAvatar类源码，这个类最麻烦的地方就是头像位置的摆放。
我详细讲讲9张头像应该如何摆放。

由于有9张图片并且最大列数是3
putImg方法的childCount和columnMax的参数值分别是9和3。
我们假设getWith()和getHeight()的值都是150（这是整个控件的宽度和高度）。
因此可以得出imgWidth和imgHeight的值就是50。
接着进入for循环

开始计算每个子控件的左上角（left,top）和右下角（right,bottom）的坐标位置。

我们首先看看第一行，一二三张图的左上角和右下角坐标
第一张图是(0,0)(50,50)
第二张图是(50,0)(100,50)
第三张图是(100,0)(150,50)

总结出规律
从左往右摆放图片的时候只有left和right坐标会改变而top和bottom是不会变的。
所以计算出left的坐标就是
int left = imgWidth * column;
column是每行图片的”列”增量,例如第一行的第一张图片column增量是0,第二张图片增量是1,第三张图片增量是2。换到第二行之后，column增量会被初始化为0，重新开始递增。

接下来看第二行，第一张图的左上角和右下角坐标
第一张图是(0,50)(50,100)
我们对比第一行和第二行的第一张图片，left和right坐标不会改变，只有top和bottom改变了。
很明显我还需要给它们一个row”行”增量。
所以计算出right的坐标就是
int top = imgWidth * row;
在每次需要换行的时候给row加1（也就是row++）。

计算出left和right的坐标之后就简单了，由于图片的宽度和高度是相等的
在图片的宽度（也可以说是高度）基础上加上left和top的值。就是一个正方形的右下角坐标。
int right = imgWidth + left;
int bottom = imgWidth + top;

    int row, column;
   /**
     * 摆放图片
     *
     * @param childCount 子控件总数
     * @param columnMax  头像每列的最大数
     */
    private void putImg(int childCount, int columnMax) {
        //注意头像的宽度和高度是相等的，下面的imgHeight被我注释了
        int imgWidth = getWidth() / columnMax;
//        int imgHeight = getHeight() / columnMax;

        //每行增量
        row = 0;
        //每列增量
        column = 0;
        for (int i = 1; i <= childCount; i++) {
            //计算左上角坐标
            int left = imgWidth * column;
            int top = imgWidth * row;
            //计算右下角坐标
            int right = imgWidth + left;
            int bottom = imgWidth + top;

            switch (childCount) {
                //针对只有三张图片的情况进行特殊处理
                case 3:
                    setThreePicPosition(i, imgWidth, left, top, right, bottom);
                    break;
                //针对只有五张图片的情况进行特殊处理
                case 5:
                    setFivePicPosition(i, imgWidth, childCount, left, top, right, bottom);
                    break;
                //其余情况走下面
                default:
                    setOthersPicPosition(i, imgWidth, columnMax, childCount, left, top, right, bottom);

                    //当只有7张图片，则对第7张图片进行特殊处理
                    if (childCount == 7 && i == 7) {
                        View view = getChildAt(i - 1);
                        //对最后一格的图片进行特殊处理
                        view.layout(imgWidth, imgWidth * 2, 2 * imgWidth, imgWidth + (imgWidth * 2));
                    }
                    break;
            }
        }
    }


     private void setOthersPicPosition(int i, int imgWidth, int columnMax, int childCount, int left, int top, int right, int bottom) {
        View view = getChildAt(i - 1);
        //设置垂直居中，返回0表示不需要垂直居中
        int centerVertical = setVertical(childCount, imgWidth);
        view.layout(left, top + centerVertical, right, bottom + centerVertical);
        column++;
        //换行
        if (i % columnMax == 0) {
            row++;
            //将列增量初始化
            column = 0;
        }
    }

至此，整个控件最麻烦的部分已经分析完毕，下面展示一下使用方法。

首先看activity_main文件布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical">

        <per.edward.ninepatchavatar.TribeAvatar
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:background="#F5F5F5">

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/img_one"
                android:layout_width="30dp"
                android:layout_height="30dp"
                app:placeholderImage="@mipmap/ic_launcher" />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/img_two"
                android:layout_width="30dp"
                android:layout_height="30dp"
                app:placeholderImage="@mipmap/ic_launcher" />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/img_three"
                android:layout_width="30dp"
                android:layout_height="30dp"
                app:placeholderImage="@mipmap/ic_launcher" />

        </per.edward.ninepatchavatar.TribeAvatar>
</LinearLayout>

由于Demo的XML文件源码太长了，我只截取部分贴出来。

我们可以往这个容器里面放置需要显示的图片子控件（例如Android原生的ImageView，facebook的图片加载框架fresco）。

关于TribeAvatar的注意事项
1、在设置TribeAvatar宽度(layout_width)的时候必须给一个精确值例如
match_parent或者xxxdp，绝对不能设置
wrap_content。高度的话可以随便设置。因为最终的高度会和宽度一致。
2、子控件不能少于3个并且不能多于9个。否则图片会显示不出来。
3、子控件的宽度和高度可以随便设置，因为其宽度和高度最终都会由父控件TribeAvatar来决定。

MainActivity源码比较简单，不做太多解释了。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SimpleDraweeView simpleDraweeViewOne = (SimpleDraweeView) findViewById(R.id.img_one);
        SimpleDraweeView simpleDraweeViewTwo = (SimpleDraweeView) findViewById(R.id.img_two);
        SimpleDraweeView simpleDraweeViewThree = (SimpleDraweeView) findViewById(R.id.img_three);

        simpleDraweeViewOne.setImageURI("https://github.com/EdwardSituwende/NinePatchAvatar/blob/master/img/111.jpg?raw=true");
        simpleDraweeViewTwo.setImageURI("https://github.com/EdwardSituwende/NinePatchAvatar/blob/master/img/222.jpg?raw=true");
        simpleDraweeViewThree.setImageURI("https://github.com/EdwardSituwende/NinePatchAvatar/blob/master/img/333.jpg?raw=true");
    }
}