類似微信朋友圈，點擊+號圖片，可以加圖片，信朋友圈

類似朋友圈，點擊+號圖片，可以加圖片，信朋友圈

xml:

<?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"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="40dp"android:orientation="vertical" ><com.sw.demo.widget.NinePhotoView    android:id="@+id/photoview"    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:ninephoto_hspace="10dp"    app:ninephoto_vspace="10dp"    app:rainbowbar_color="@android:color/holo_blue_bright" ></com.sw.demo.widget.NinePhotoView>

NinePhotoView.java

public class NinePhotoView extends ViewGroup {public static final int MAX_PHOTO_NUMBER = 9;private int[] constImageIds = { R.drawable.girl_0, R.drawable.girl_1,      R.drawable.girl_2, R.drawable.girl_3, R.drawable.girl_4,      R.drawable.girl_5, R.drawable.girl_6, R.drawable.girl_7,      R.drawable.girl_8 };// horizontal space among children viewsint hSpace = Utils.dpToPx(10, getResources());// vertical space among children viewsint vSpace = Utils.dpToPx(10, getResources());// every child view width and height.int childWidth = 0;int childHeight = 0;// store images res idArrayList<integer> mImageResArrayList = new ArrayList<integer>(9);private View addPhotoView;public NinePhotoView(Context context) {  super(context);}public NinePhotoView(Context context, AttributeSet attrs) {  this(context, attrs, 0);}public NinePhotoView(Context context, AttributeSet attrs, int defStyle) {  super(context, attrs, defStyle);  TypedArray t = context.obtainStyledAttributes(attrs,          R.styleable.NinePhotoView, 0, 0);  hSpace = t.getDimensionPixelSize(          R.styleable.NinePhotoView_ninephoto_hspace, hSpace);  vSpace = t.getDimensionPixelSize(          R.styleable.NinePhotoView_ninephoto_vspace, vSpace);  t.recycle();  addPhotoView = new View(context);  addView(addPhotoView);  mImageResArrayList.add(new integer());}

Measure

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  int rw = MeasureSpec.getSize(widthMeasureSpec);  int rh = MeasureSpec.getSize(heightMeasureSpec);  childWidth = (rw - 2 * hSpace) / 3;  childHeight = childWidth;  int childCount = this.getChildCount();  for (int i = 0; i < childCount; i++) {      View child = this.getChildAt(i);      //this.measureChild(child, widthMeasureSpec, heightMeasureSpec);      LayoutParams lParams = (LayoutParams) child.getLayoutParams();      lParams.left = (i % 3) * (childWidth + hSpace);      lParams.top = (i / 3) * (childWidth + vSpace);  }  int vw = rw;  int vh = rh;  if (childCount < 3) {      vw = childCount * (childWidth + hSpace);  }  vh = ((childCount + 3) / 3) * (childWidth + vSpace);  setMeasuredDimension(vw, vh);}

　　我們的子View三個一排，而且都是正方形，所以我們上面通過迴圈很好去得到所有子View的位置，注意我們上面把子View的左上方座標儲存到我們自訂的LayoutParams 的left和top二個欄位中，Layout階段會使用，最後我們算得整個ViewGroup的寬高，調用setMeasuredDimension設定。　　

　

Layout

@Overrideprotected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {  int childCount = this.getChildCount();  for (int i = 0; i < childCount; i++) {      View child = this.getChildAt(i);      LayoutParams lParams = (LayoutParams) child.getLayoutParams();      child.layout(lParams.left, lParams.top, lParams.left + childWidth,              lParams.top + childHeight);      if (i == mImageResArrayList.size() - 1 && mImageResArrayList.size() != MAX_PHOTO_NUMBER) {          child.setBackgroundResource(R.drawable.add_photo);          child.setOnClickListener(new View.OnClickListener() {              @Override              public void onClick(View arg0) {                  addPhotoBtnClick();              }          });      }else {          child.setBackgroundResource(constImageIds[i]);          child.setOnClickListener(null);      }  }}public void addPhoto() {  if (mImageResArrayList.size() < MAX_PHOTO_NUMBER) {      View newChild = new View(getContext());      addView(newChild);      mImageResArrayList.add(new integer());      requestLayout();      invalidate();  }}public void addPhotoBtnClick() {  final CharSequence[] items = { "Take Photo", "Photo from gallery" };  AlertDialog.Builder builder = new AlertDialog.Builder(getContext());  builder.setItems(items, new DialogInterface.OnClickListener() {      @Override      public void onClick(DialogInterface arg0, int arg1) {          addPhoto();      }  });  builder.show();}

　　最核心的就是調用layout方法，根據我們measure階段獲得的LayoutParams中的left和top欄位，也很好對每個子View進行位置排列。然後判斷在圖片未達到最大值9張時，預設最後一張是+號圖片，然後設定點擊事件，彈出對話方塊供使用者選擇操作。

 

Draw
不需要重寫，使用ViewGroup預設實現即可。