這幾天找九宮格頭像的源碼，發(fā)現(xiàn)網(wǎng)上很少有人寫(不知道是不是我的搜索關(guān)鍵詞不準(zhǔn)確)。終于在github發(fā)現(xiàn)有一哥們寫了一份源碼，download了下來研究了一段時(shí)間，不太符合公司的產(chǎn)品需求 ,無奈只能放棄。
趁這個(gè)周末有空自己寫了一份源碼，分享一下。
Demo效果圖如下
TribeAvatar類源碼，這個(gè)類最麻煩的地方就是頭像位置的擺放。
我詳細(xì)講講9張頭像應(yīng)該如何擺放。
由于有9張圖片并且最大列數(shù)是3
putImg方法的childCount和columnMax的參數(shù)值分別是9和3。
我們假設(shè)getWith()和getHeight()的值都是150（這是整個(gè)控件的寬度和高度）。
因此可以得出imgWidth和imgHeight的值就是50。
接著進(jìn)入for循環(huán)
開始計(jì)算每個(gè)子控件的左上角（left,top）和右下角（right,bottom）的坐標(biāo)位置。
我們首先看看第一行，一二三張圖的左上角和右下角坐標(biāo)
第一張圖是(0,0)(50,50)
第二張圖是(50,0)(100,50)
第三張圖是(100,0)(150,50)
總結(jié)出規(guī)律
從左往右擺放圖片的時(shí)候只有l(wèi)eft和right坐標(biāo)會(huì)改變而top和bottom是不會(huì)變的。
所以計(jì)算出left的坐標(biāo)就是
int left = imgWidth * column;
column是每行圖片的"列"增量,例如第一行的第一張圖片column增量是0,第二張圖片增量是1,第三張圖片增量是2。換到第二行之后，column增量會(huì)被初始化為0，重新開始遞增。
接下來看第二行，第一張圖的左上角和右下角坐標(biāo)
第一張圖是(0,50)(50,100)
我們對比第一行和第二行的第一張圖片，left和right坐標(biāo)不會(huì)改變，只有top和bottom改變了。
很明顯我還需要給它們一個(gè)row"行"增量。
所以計(jì)算出right的坐標(biāo)就是
int top = imgWidth * row;
在每次需要換行的時(shí)候給row加1（也就是row++）。
計(jì)算出left和right的坐標(biāo)之后就簡單了，由于圖片的寬度和高度是相等的
在圖片的寬度（也可以說是高度）基礎(chǔ)上加上left和top的值。就是一個(gè)正方形的右下角坐標(biāo)。
int right = imgWidth + left;
int bottom = imgWidth + top;
int row, column;
/**
* 擺放圖片
*
* @param childCount 子控件總數(shù)
* @param columnMax 頭像每列的最大數(shù)
*/
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++) {
//計(jì)算左上角坐標(biāo)
int left = imgWidth * column;
int top = imgWidth * row;
//計(jì)算右下角坐標(biāo)
int right = imgWidth + left;
int bottom = imgWidth + top;
switch (childCount) {
//針對只有三張圖片的情況進(jìn)行特殊處理
case 3:
setThreePicPosition(i, imgWidth, left, top, right, bottom);
break;
//針對只有五張圖片的情況進(jìn)行特殊處理
case 5:
setFivePicPosition(i, imgWidth, childCount, left, top, right, bottom);
break;
//其余情況走下面
default:
setOthersPicPosition(i, imgWidth, columnMax, childCount, left, top, right, bottom);
//當(dāng)只有7張圖片，則對第7張圖片進(jìn)行特殊處理
if (childCount == 7 && i == 7) {
View view = getChildAt(i - 1);
//對最后一格的圖片進(jìn)行特殊處理
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);
//設(shè)置垂直居中，返回0表示不需要垂直居中
int centerVertical = setVertical(childCount, imgWidth);
view.layout(left, top + centerVertical, right, bottom + centerVertical);
column++;
//換行
if (i % columnMax == 0) {
row++;
//將列增量初始化
column = 0;
}
}
至此，整個(gè)控件最麻煩的部分已經(jīng)分析完畢，下面展示一下使用方法。
首先看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文件源碼太長了，我只截取部分貼出來。
我們可以往這個(gè)容器里面放置需要顯示的圖片子控件（例如Android原生的ImageView，facebook的圖片加載框架fresco）。
關(guān)于TribeAvatar的注意事項(xiàng)
1、在設(shè)置TribeAvatar寬度(layout_width)的時(shí)候必須給一個(gè)精確值例如
match_parent或者xxxdp，絕對不能設(shè)置
wrap_content。高度的話可以隨便設(shè)置。因?yàn)樽罱K的高度會(huì)和寬度一致。
2、子控件不能少于3個(gè)并且不能多于9個(gè)。否則圖片會(huì)顯示不出來。
3、子控件的寬度和高度可以隨便設(shè)置，因?yàn)槠鋵挾群透叨茸罱K都會(huì)由父控件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");
}
}
