Android自定义ViewGroup之子控件的自动换行和添加删除

常用的布局类型并不能满足所有需求，这时就会用到ViewGroup。


ViewGroup作为一个放置View的容器，并且我们在写布局xml的时候，会告诉容器（凡是以layout为开头的属性，都是为用于告诉容器的），我们的宽度（layout_width）、高度（layout_height）、对齐方式（layout_gravity）等；当然还有margin等；于是乎，ViewGroup需要做的事情是：给childView计算出建议的宽和高和测量模式 ；决定childView的位置；为什么只是建议的宽和高，而不是直接确定呢，别忘了childView宽和高可以设置为wrap_content，这样只有childView才能计算出自己的宽和高。

代码注释很详细，直接看代码即可，没贴源码，因为这是从一个项目里面抠出来的。

先写一个自定义LinearLayout，它的功能是自适应子控件:

 public class ItemContainer extends LinearLayout {
     private int width;//组件宽
     private int height;//组件高
     private int childCount;
     private int childMarginLeft = SizeConvert.dip2px(getContext(),8);//子控件相对左边控件的距离
     private int childMarginHorizonTal = SizeConvert.dip2px(getContext(),10);//子控件相对最左、最右的距离
     private int childMarginTop = SizeConvert.dip2px(getContext(),8);//子控件相对顶部控件的距离
     private int childWidth;//子控件宽
     private int childHeight;//子控件高

     public ItemContainer(Context context) {
         super(context);
     }

     public ItemContainer(Context context, AttributeSet attrs) {
         super(context, attrs);
     }

     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         childCount = getChildCount();//得到子控件数量
         if(childCount>0) {
             childWidth = (width - childMarginLeft * 4) / 3;
             childHeight = SizeConvert.dip2px(getContext(),42);//给子控件的高度一个定值
             //根据子控件的高和子控件数目得到自身的高
             height = childHeight * ((childCount-1)/ 3+1) + childMarginHorizonTal * 2 + childMarginTop*((childCount-1)/3);
             Log.d(childHeight,childHeight+);
         }else {
             //如果木有子控件，自身高度为0，即不显示
             height = 0;
         }
         width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
         Log.d(height,height+);
         //根据自身的宽度约束子控件宽度
         measureChildren(widthMeasureSpec, heightMeasureSpec);
         //设置自身宽度
         setMeasuredDimension(width, height);
     }

     @Override
     protected void onLayout(boolean changed, int l, int t, int r, int b) {
         /**
          * 遍历所有子控件，并设置它们的位置和大小
          * 每行只能有三个子控件，且高度固定，宽度相同，且每行正好布满
          */
         for (int i = 0; i < childCount; i++) {
             View childView = getChildAt(i);//得到当前子控件
             childView.layout((i%3) * childWidth + (i%3+1)*childMarginLeft
                     , (i / 3)*childHeight + childMarginHorizonTal + (i / 3)*childMarginTop
                     , (i%3+1) * childWidth + (i%3+1)*childMarginLeft
                     , (i / 3+1)*childHeight + childMarginHorizonTal + (i / 3)*childMarginTop);
         }
     }

 }

主活动完成的功能就是上面贴图演示的功能，让两个自定义ViewGroup能够添加删除子控件，子控件是在代码中动态搭建的，下面会给出方法：
活动：

 public class ItemOperateActivity extends BaseActivity {
     private LinearLayout mContentNoItem;
     private LinearLayout mContentItemRemove;
     private ItemContainer mItemContainerAdd;
     private ItemContainer mItemContainerRemove;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_item_operate);
         mContentNoItem = (LinearLayout) findViewById(R.id.linearlayout_attention_null);
         mContentItemRemove = (LinearLayout) findViewById(R.id.linearlayout_remove);
         mItemContainerAdd = (ItemContainer) findViewById(R.id.item_container_add);
         mItemContainerRemove = (ItemContainer) findViewById(R.id.item_container_remove);

         initItems(new String[]{随时定位, 客户拜访}, new String[]{新增客户, 客户总量});

     }

     /**
      * 添加条目时需要调用的方法
      * @param name
      */
     private void addItem(String name) {
         mContentNoItem.setVisibility(View.GONE);
         Button button = new Button(getApplicationContext());
         ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT
                 , 0);
         button.setLayoutParams(params);
         button.setText(name);
         button.setGravity(Gravity.CENTER);
         button.setBackgroundResource(R.drawable.item_select_bg);
         button.setTextSize(13);
         button.setTextColor(Color.argb(255, 47, 79, 79));//铅灰色
         button.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 mItemContainerAdd.removeView(v);
                 removeItem(((Button) v).getText().toString());
                 if (mItemContainerAdd.getChildCount()== 0) {
                     mContentNoItem.setVisibility(View.VISIBLE);
                 }
             }

         });
         mItemContainerAdd.addView(button);

     }

     /**
      * 删除条目时需要调用的方法
      * @param name
      */
     private void removeItem(String name) {
         mContentItemRemove.setVisibility(View.VISIBLE);
         Button button = new Button(getApplicationContext());
         ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT
                 , 0);
         button.setLayoutParams(params);
         button.setText(name);
         button.setGravity(Gravity.CENTER);
         button.setBackgroundResource(R.drawable.item_select_bg_below);
         button.setTextSize(13);
         button.setTextColor(Color.argb(255, 47, 79,79));//铅灰色
         button.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 /**
                  * 点击按钮时，删除
                  */
                 mItemContainerRemove.removeView(v);
                 addItem(((Button) v).getText().toString());

                 if (mItemContainerRemove.getChildCount() == 0) {
                     mContentItemRemove.setVisibility(View.GONE);
                 }
             }
         });
         mItemContainerRemove.addView(button);
     }

     /**
      * 初始化子控件
      * @param itemsAdd 已添加的子控件名数组
      * @param itemsRemove 可添加的子控件名数组
      */
     private void initItems(String[] itemsAdd, String[] itemsRemove) {
         for (String itemAdd : itemsAdd) {
             addItem(itemAdd);
         }
         for (String itemRemove : itemsRemove) {
             removeItem(itemRemove);
         }
     }
 }

布局:

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:orientation="vertical">

     <RelativeLayout
         android:layout_width="match_parent"
         android:layout_height="60dp"
         android:background="@drawable/item_bg">
         <LinearLayout
             android:id="@+id/linearlayout_back"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentLeft="true"
             android:layout_centerVertical="true"
             android:layout_marginLeft="5dp"
             android:gravity="center"
             android:orientation="horizontal">
             <ImageButton
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:background="@drawable/btn_back"/>

             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="报表"
                 android:textSize="@dimen/head_left_text_size"/>
         </LinearLayout>

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_centerInParent="true"
             android:text="订阅"
             android:textSize="@dimen/head_center_text_size"/>

     </RelativeLayout>

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="@drawable/item_bg"
         android:orientation="horizontal"
         android:paddingBottom="12dp"
         android:paddingLeft="8dp"
         android:paddingTop="12dp">

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="已添加"
             android:textSize="16dp"/>

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="（点击删除）"
             android:textSize="13dp"/>
     </LinearLayout>

     <com.test.shiweiwei.myproject.selfish_view.self_defined_view_group.ItemContainer
         android:id="@+id/item_container_add"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="@drawable/item_bg">

     </com.test.shiweiwei.myproject.selfish_view.self_defined_view_group.ItemContainer>

     <LinearLayout
         android:id="@+id/linearlayout_attention_null"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:paddingTop="35dp"
         android:paddingBottom="35dp"
         android:gravity="center"
         android:background="@drawable/item_bg"
         android:visibility="gone">
         <ImageView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@mipmap/attendance_null"/>
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textSize="13dp"
             android:text="无报表信息"/>
     </LinearLayout>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"/>

     <LinearLayout
         android:id="@+id/linearlayout_remove"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical">
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/item_bg"
             android:orientation="horizontal"
             android:layout_marginTop="@dimen/first_page_item_margin_top"
             android:paddingBottom="12dp"
             android:paddingLeft="8dp"
             android:paddingTop="12dp">

             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="可添加"
                 android:textSize="16dp"/>

         </LinearLayout>

         <com.test.shiweiwei.myproject.selfish_view.self_defined_view_group.ItemContainer
             android:id="@+id/item_container_remove"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/item_bg">

         </com.test.shiweiwei.myproject.selfish_view.self_defined_view_group.ItemContainer>
     </LinearLayout>

 </LinearLayout>

drawable下的文件：
item_bg.xml:

 <!--?xml version=1.0 encoding=utf-8?-->
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="@color/white"></solid>
     <stroke android:color="@color/stroke_vertical" android:width="0.3dp"></stroke>
 </shape>

item_select_bg.xml:

 <!--?xml version=1.0 encoding=utf-8?-->
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="@color/white"></solid>
     <stroke android:color="@color/dark_brow" android:width="0.3dp"></stroke>
     <corners android:radius="4dp"></corners>
     <padding android:bottom="12dp" android:top="12dp"></padding>
 </shape>

item_select_bg_below.xml:

 <!--?xml version=1.0 encoding=utf-8?-->
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="@color/white"></solid>
     <stroke android:color="@color/stroke_vertical" android:width="0.3dp"></stroke>
     <corners android:radius="4dp"></corners>
  </shape>