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

这几天找九宫格头像的源码，发现网上很少有人写(不知道是不是我的搜索关键词不准确)。终于在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.TribeAvatarandroid:layout_width="100dp"android:layout_height="100dp"android:layout_margin="10dp"android:background="#F5F5F5"><com.facebook.drawee.view.SimpleDraweeViewandroid:id="@+id/img_one"android:layout_width="30dp"android:layout_height="30dp"app:placeholderImage="@mipmap/ic_launcher" /><com.facebook.drawee.view.SimpleDraweeViewandroid:id="@+id/img_two"android:layout_width="30dp"android:layout_height="30dp"app:placeholderImage="@mipmap/ic_launcher" /><com.facebook.drawee.view.SimpleDraweeViewandroid: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 {@Overrideprotected 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");}
}

github:https://github.com/EdwardSituwende/NinePatchAvatar