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

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


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

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

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

[java]  view plain  copy

1. public class ItemContainer extends LinearLayout {  
2.     private int width;//组件宽  
3.     private int height;//组件高  
4.     private int childCount;  
5.     private int childMarginLeft = SizeConvert.dip2px(getContext(),8);//子控件相对左边控件的距离  
6.     private int childMarginHorizonTal = SizeConvert.dip2px(getContext(),10);//子控件相对最左、最右的距离  
7.     private int childMarginTop = SizeConvert.dip2px(getContext(),8);//子控件相对顶部控件的距离  
8.     private int childWidth;//子控件宽  
9.     private int childHeight;//子控件高  
10.    
11.     public ItemContainer(Context context) {  
12.         super(context);  
13.     }  
14.    
15.     public ItemContainer(Context context, AttributeSet attrs) {  
16.         super(context, attrs);  
17.     }  
18.    
19.     @Override  
20.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
21.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
22.         childCount = getChildCount();//得到子控件数量  
23.         if(childCount>0) {  
24.             childWidth = (width - childMarginLeft * 4) / 3;  
25.             childHeight = SizeConvert.dip2px(getContext(),42);//给子控件的高度一个定值  
26.             //根据子控件的高和子控件数目得到自身的高  
27.             height = childHeight * ((childCount-1)/ 3+1) + childMarginHorizonTal * 2 + childMarginTop*((childCount-1)/3);  
28.             Log.d(childHeight,childHeight+);  
29.         }else {  
30.             //如果木有子控件，自身高度为0，即不显示  
31.             height = 0;  
32.         }  
33.         width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);  
34.         Log.d(height,height+);  
35.         //根据自身的宽度约束子控件宽度  
36.         measureChildren(widthMeasureSpec, heightMeasureSpec);  
37.         //设置自身宽度  
38.         setMeasuredDimension(width, height);  
39.     }  
40.    
41.     @Override  
42.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
43.         /** 
44.          * 遍历所有子控件，并设置它们的位置和大小 
45.          * 每行只能有三个子控件，且高度固定，宽度相同，且每行正好布满 
46.          */  
47.         for (int i = 0; i < childCount; i++) {  
48.             View childView = getChildAt(i);//得到当前子控件  
49.             childView.layout((i%3) * childWidth + (i%3+1)*childMarginLeft  
50.                     , (i / 3)*childHeight + childMarginHorizonTal + (i / 3)*childMarginTop  
51.                     , (i%3+1) * childWidth + (i%3+1)*childMarginLeft  
52.                     , (i / 3+1)*childHeight + childMarginHorizonTal + (i / 3)*childMarginTop);  
53.         }  
54.     }  
55.    
56. }  

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

[java]  view plain  copy

1. public class ItemOperateActivity extends BaseActivity {  
2.     private LinearLayout mContentNoItem;  
3.     private LinearLayout mContentItemRemove;  
4.     private ItemContainer mItemContainerAdd;  
5.     private ItemContainer mItemContainerRemove;  
6.    
7.     @Override  
8.     protected void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(R.layout.activity_item_operate);  
11.         mContentNoItem = (LinearLayout) findViewById(R.id.linearlayout_attention_null);  
12.         mContentItemRemove = (LinearLayout) findViewById(R.id.linearlayout_remove);  
13.         mItemContainerAdd = (ItemContainer) findViewById(R.id.item_container_add);  
14.         mItemContainerRemove = (ItemContainer) findViewById(R.id.item_container_remove);  
15.    
16.         initItems(new String[]{随时定位, 客户拜访}, new String[]{新增客户, 客户总量});  
17.    
18.     }  
19.    
20.     /** 
21.      * 添加条目时需要调用的方法 
22.      * @param name 
23.      */  
24.     private void addItem(String name) {  
25.         mContentNoItem.setVisibility(View.GONE);  
26.         Button button = new Button(getApplicationContext());  
27.         ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT  
28.                 , 0);  
29.         button.setLayoutParams(params);  
30.         button.setText(name);  
31.         button.setGravity(Gravity.CENTER);  
32.         button.setBackgroundResource(R.drawable.item_select_bg);  
33.         button.setTextSize(13);  
34.         button.setTextColor(Color.argb(255, 47, 79, 79));//铅灰色  
35.         button.setOnClickListener(new View.OnClickListener() {  
36.             @Override  
37.             public void onClick(View v) {  
38.                 mItemContainerAdd.removeView(v);  
39.                 removeItem(((Button) v).getText().toString());  
40.                 if (mItemContainerAdd.getChildCount()== 0) {  
41.                     mContentNoItem.setVisibility(View.VISIBLE);  
42.                 }  
43.             }  
44.    
45.         });  
46.         mItemContainerAdd.addView(button);  
47.    
48.     }  
49.    
50.     /** 
51.      * 删除条目时需要调用的方法 
52.      * @param name 
53.      */  
54.     private void removeItem(String name) {  
55.         mContentItemRemove.setVisibility(View.VISIBLE);  
56.         Button button = new Button(getApplicationContext());  
57.         ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT  
58.                 , 0);  
59.         button.setLayoutParams(params);  
60.         button.setText(name);  
61.         button.setGravity(Gravity.CENTER);  
62.         button.setBackgroundResource(R.drawable.item_select_bg_below);  
63.         button.setTextSize(13);  
64.         button.setTextColor(Color.argb(255, 47, 79,79));//铅灰色  
65.         button.setOnClickListener(new View.OnClickListener() {  
66.             @Override  
67.             public void onClick(View v) {  
68.                 /** 
69.                  * 点击按钮时，删除 
70.                  */  
71.                 mItemContainerRemove.removeView(v);  
72.                 addItem(((Button) v).getText().toString());  
73.    
74.                 if (mItemContainerRemove.getChildCount() == 0) {  
75.                     mContentItemRemove.setVisibility(View.GONE);  
76.                 }  
77.             }  
78.         });  
79.         mItemContainerRemove.addView(button);  
80.     }  
81.    
82.     /** 
83.      * 初始化子控件 
84.      * @param itemsAdd 已添加的子控件名数组 
85.      * @param itemsRemove 可添加的子控件名数组 
86.      */  
87.     private void initItems(String[] itemsAdd, String[] itemsRemove) {  
88.         for (String itemAdd : itemsAdd) {  
89.             addItem(itemAdd);  
90.         }  
91.         for (String itemRemove : itemsRemove) {  
92.             removeItem(itemRemove);  
93.         }  
94.     }  
95. }  

布局:

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:layout_width="match_parent"  
4.               android:layout_height="match_parent"  
5.               android:orientation="vertical">  
6.   
7.     <RelativeLayout  
8.         android:layout_width="match_parent"  
9.         android:layout_height="60dp"  
10.         android:background="@drawable/item_bg">  
11.         <LinearLayout  
12.             android:id="@+id/linearlayout_back"  
13.             android:layout_width="wrap_content"  
14.             android:layout_height="wrap_content"  
15.             android:layout_alignParentLeft="true"  
16.             android:layout_centerVertical="true"  
17.             android:layout_marginLeft="5dp"  
18.             android:gravity="center"  
19.             android:orientation="horizontal">  
20.             <ImageButton  
21.                 android:layout_width="wrap_content"  
22.                 android:layout_height="wrap_content"  
23.                 android:background="@drawable/btn_back"/>  
24.   
25.             <TextView  
26.                 android:layout_width="wrap_content"  
27.                 android:layout_height="wrap_content"  
28.                 android:text="报表"  
29.                 android:textSize="@dimen/head_left_text_size"/>  
30.         </LinearLayout>  
31.   
32.         <TextView  
33.             android:layout_width="wrap_content"  
34.             android:layout_height="wrap_content"  
35.             android:layout_centerInParent="true"  
36.             android:text="订阅"  
37.             android:textSize="@dimen/head_center_text_size"/>  
38.   
39.     </RelativeLayout>  
40.   
41.     <LinearLayout  
42.         android:layout_width="match_parent"  
43.         android:layout_height="wrap_content"  
44.         android:background="@drawable/item_bg"  
45.         android:orientation="horizontal"  
46.         android:paddingBottom="12dp"  
47.         android:paddingLeft="8dp"  
48.         android:paddingTop="12dp">  
49.   
50.         <TextView  
51.             android:layout_width="wrap_content"  
52.             android:layout_height="wrap_content"  
53.             android:text="已添加"  
54.             android:textSize="16dp"/>  
55.   
56.         <TextView  
57.             android:layout_width="wrap_content"  
58.             android:layout_height="wrap_content"  
59.             android:text="（点击删除）"  
60.             android:textSize="13dp"/>  
61.     </LinearLayout>  
62.   
63.     <com.test.shiweiwei.myproject.selfish_view.self_defined_view_group.ItemContainer  
64.         android:id="@+id/item_container_add"  
65.         android:layout_width="match_parent"  
66.         android:layout_height="wrap_content"  
67.         android:background="@drawable/item_bg">  
68.   
69.     </com.test.shiweiwei.myproject.selfish_view.self_defined_view_group.ItemContainer>  
70.   
71.     <LinearLayout  
72.         android:id="@+id/linearlayout_attention_null"  
73.         android:layout_width="match_parent"  
74.         android:layout_height="wrap_content"  
75.         android:orientation="vertical"  
76.         android:paddingTop="35dp"  
77.         android:paddingBottom="35dp"  
78.         android:gravity="center"  
79.         android:background="@drawable/item_bg"  
80.         android:visibility="gone">  
81.         <ImageView  
82.             android:layout_width="wrap_content"  
83.             android:layout_height="wrap_content"  
84.             android:src="@mipmap/attendance_null"/>  
85.         <TextView  
86.             android:layout_width="wrap_content"  
87.             android:layout_height="wrap_content"  
88.             android:textSize="13dp"  
89.             android:text="无报表信息"/>  
90.     </LinearLayout>  
91.   
92.     <ImageView  
93.         android:layout_width="match_parent"  
94.         android:layout_height="wrap_content"/>  
95.   
96.     <LinearLayout  
97.         android:id="@+id/linearlayout_remove"  
98.         android:layout_width="match_parent"  
99.         android:layout_height="wrap_content"  
100.         android:orientation="vertical">  
101.         <LinearLayout  
102.             android:layout_width="match_parent"  
103.             android:layout_height="wrap_content"  
104.             android:background="@drawable/item_bg"  
105.             android:orientation="horizontal"  
106.             android:layout_marginTop="@dimen/first_page_item_margin_top"  
107.             android:paddingBottom="12dp"  
108.             android:paddingLeft="8dp"  
109.             android:paddingTop="12dp">  
110.   
111.             <TextView  
112.                 android:layout_width="wrap_content"  
113.                 android:layout_height="wrap_content"  
114.                 android:text="可添加"  
115.                 android:textSize="16dp"/>  
116.   
117.         </LinearLayout>  
118.   
119.         <com.test.shiweiwei.myproject.selfish_view.self_defined_view_group.ItemContainer  
120.             android:id="@+id/item_container_remove"  
121.             android:layout_width="match_parent"  
122.             android:layout_height="wrap_content"  
123.             android:background="@drawable/item_bg">  
124.   
125.         </com.test.shiweiwei.myproject.selfish_view.self_defined_view_group.ItemContainer>  
126.     </LinearLayout>  
127.   
128. </LinearLayout>  

drawable下的文件：
item_bg.xml:

[html]  view plain  copy

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

item_select_bg.xml:

[html]  view plain  copy

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

item_select_bg_below.xml:

[html]  view plain  copy

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

最后感谢原创者的无私奉献精神。