这几天找九宫格头像的源码，发现网上很少有人写(不知道是不是我的搜索关键词不准确)。终于在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");
}
}
