Android自定義控件之我的電話小鍵盤

關於Android的自定義控件，之前也寫了兩個，一個是簡單地繼承View，另一個通過繼承Layout實現一個省市聯動控件。這篇，將通過繼承ViewGroup來實現一個電話撥打小鍵盤。本人一貫風格，懶得羅裡吧嗦講一大堆，直接上圖上代碼，一切盡在注釋中！

1、MyPhoneCard.java

1. /** 
2.  *  
3.  * 自定義一個4*3的撥打電話的布局控件, 
4.  * 
5.  * 
6.  */  
7. public class MyPhoneCard extends ViewGroup{  
8.       
9.     private static final int COLUMNS = 3;  
10.     private static final int ROWS = 4;  
11.     private static final int NUM_BUTTON = COLUMNS*ROWS;  
12.       
13.     private View[] mButtons = new View[NUM_BUTTON];  
14.       
15.     private int mButtonWidth;  
16.     private int mButtonHeight;  
17.     private int mPaddingLeft;  
18.     private int mPaddingRight;  
19.     private int mPaddingTop;  
20.     private int mPaddingBottom;  
21.     private int mWidthInc;  
22.     private int mHeightInc;  
23.     private int mWidth;  
24.     private int mHeight;  
25.   
26.     public MyPhoneCard(Context context) {  
27.         super(context);  
28.     }  
29.       
30.     public MyPhoneCard(Context context, AttributeSet attrs){  
31.         super(context,attrs);  
32.     }  
33.       
34.     public MyPhoneCard(Context context, AttributeSet attrs, int defStyle){  
35.         super(context,attrs,defStyle);  
36.     }  
37.       
38.     /** 
39.      * 當從xml將所有的控件都調入內存後，觸發的動作 
40.      * 在這裡獲取控件的大小，並計算整個ViewGroup需要的總的寬和高 
41.      */  
42.     @Override  
43.     protected void onFinishInflate(){  
44.         super.onFinishInflate();  
45.         final View[] btns = mButtons;  
46.           
47.         for(int i=0; i<NUM_BUTTON; i++){  
48.             btns[i] = this.getChildAt(i);  
49.             btns[i].measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);  
50.         }  
51.           
52.         //緩存大小   
53.         final View child = btns[0];  
54.         mButtonWidth = child.getMeasuredWidth();  
55.         mButtonHeight = child.getMeasuredHeight();  
56.         mPaddingLeft = this.getPaddingLeft();  
57.         mPaddingRight = this.getPaddingRight();  
58.         mPaddingTop = this.getPaddingTop();  
59.         mPaddingBottom = this.getPaddingBottom();  
60.         mWidthInc = mButtonWidth + mPaddingLeft + mPaddingRight;  
61.         mHeightInc = mButtonHeight + mPaddingTop + mPaddingBottom;  
62.           
63.         mWidth = mWidthInc*COLUMNS;  
64.         mHeight = mHeightInc*ROWS;  
65.           
66.         Log.v("Finish Inflate:", "btnWidth="+mButtonWidth+",btnHeight="+mButtonHeight+",padding:"+mPaddingLeft+","+mPaddingTop+","+mPaddingRight+","+mPaddingBottom);  
67.   
68.           
69.           
70.     }  
71.       
72.     /** 
73.      * 這個方法在onFinishInflate之後，onLayout之前調用。這個方面調用兩次 
74.      */  
75.     @Override  
76.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){  
77.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
78.         Log.v("ViewGroup SIZE：width=", mWidth+"");  
79.         Log.v("ViewGroup SIZE: height=",mHeight+"");  
80.         final int width = resolveSize(mWidth, widthMeasureSpec);//傳入我們希望得到的寬度，得到測量後的寬度   
81.         final int height = resolveSize(mHeight,heightMeasureSpec);//傳入我們希望得到的高度，得到測量後的高度   
82.         Log.v("ViewGroup Measured SIZE: width=", width+"");  
83.         Log.v("ViewGroup Measured SIZE: height=", height+"");  
84.         //重新計算後的結果，需要設置。下面這個方法必須調用   
85.         setMeasuredDimension(width, height);  
86.     }  
87.   
88.     /** 
89.      * 這個方法在onMeasure之後執行，這個自定義控件中含有12個子控件（每個小鍵），所以，重寫這個方法， 
90.      * 調用每個鍵的layout，將他們一個一個布局好 
91.      * 就是4*3的放置，很簡單，一個嵌套循環搞定 
92.      */  
93.     @Override  
94.     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {  
95.         final View[] buttons = mButtons;  
96.         int i = 0;  
97.         Log.v("BOTTOM:", bottom+"");  
98.         Log.v("TOP", top+"");  
99.           
100.         int y = (bottom - top) - mHeight + mPaddingTop;//這裡其實bottom-top=mHeight,所以y=mPaddingTop   
101.         Log.v("Y=", y+"");  
102.         for(int row=0; row<ROWS; row++){  
103.             int x = mPaddingLeft;  
104.             for(int col = 0; col < COLUMNS; col++){  
105.                 buttons[i].layout(x, y, x+mButtonWidth, y+mButtonHeight);  
106.                 x = x + mWidthInc;  
107.                 i++;  
108.             }  
109.             y = y + mHeightInc;  
110.         }  
111.     }  
112.   
113. }  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <demo.phone.card.MyPhoneCard  
3.   xmlns:android="http://schemas.android.com/apk/res/android"   
4.   android:id = "@+id/dialpad"   
5.   android:paddingLeft="7dp"   
6.   android:paddingRight="7dp"   
7.   android:paddingTop="6dp"   
8.   android:paddingBottom="6dp"   
9.   android:layout_gravity="center"   
10.   android:layout_width="wrap_content"  
11.   android:layout_height="wrap_content"   
12.   android:layout_marginBottom="5dp">  
13.     
14.     <ImageButton android:id="@+id/one"   
15.         android:src="@drawable/dial_num_1_no_vm"   
16.         style="@style/dial_btn_style"   
17.         />  
18.           
19.     <ImageButton android:id="@+id/two"   
20.         android:src="@drawable/dial_num_2"   
21.         style="@style/dial_btn_style"/>    
22.           
23.     <ImageButton android:id="@+id/three"   
24.         android:src="@drawable/dial_num_3"   
25.         style="@style/dial_btn_style"/>    
26.           
27.     <ImageButton android:id="@+id/four"   
28.         android:src="@drawable/dial_num_4"   
29.         style="@style/dial_btn_style"/>    
30.           
31.     <ImageButton android:id="@+id/five"   
32.         android:src="@drawable/dial_num_5"   
33.         style="@style/dial_btn_style"/>  
34.           
35.     <ImageButton android:id="@+id/six"   
36.         android:src="@drawable/dial_num_6"   
37.         style="@style/dial_btn_style"/>   
38.           
39.     <ImageButton android:id="@+id/seven"   
40.         android:src="@drawable/dial_num_7"   
41.         style="@style/dial_btn_style"/>  
42.           
43.     <ImageButton android:id="@+id/eight"   
44.         android:src="@drawable/dial_num_8"   
45.         style="@style/dial_btn_style"/>  
46.           
47.     <ImageButton android:id="@+id/nine"   
48.         android:src="@drawable/dial_num_9"   
49.         style="@style/dial_btn_style"/>    
50.           
51.     <ImageButton android:id="@+id/star"   
52.         android:src="@drawable/dial_num_star"   
53.         style="@style/dial_btn_style"/>     
54.           
55.     <ImageButton android:id="@+id/zero"   
56.         android:src="@drawable/dial_num_0"   
57.         style="@style/dial_btn_style"/>     
58.           
59.     <ImageButton android:id="@+id/pound"   
60.         android:src="@drawable/dial_num_pound"   
61.         style="@style/dial_btn_style"/>                                                                                                        
62.       
63. </demo.phone.card.MyPhoneCard>