Android自訂控制項之我的電話小鍵盤

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

1、MyPhoneCard.java

/** *  * 自訂一個4*3的撥打到電話的布局控制項, * * */public class MyPhoneCard extends ViewGroup{private static final int COLUMNS = 3;private static final int ROWS = 4;private static final int NUM_BUTTON = COLUMNS*ROWS;private View[] mButtons = new View[NUM_BUTTON];private int mButtonWidth;private int mButtonHeight;private int mPaddingLeft;private int mPaddingRight;private int mPaddingTop;private int mPaddingBottom;private int mWidthInc;private int mHeightInc;private int mWidth;private int mHeight;public MyPhoneCard(Context context) {super(context);}public MyPhoneCard(Context context, AttributeSet attrs){super(context,attrs);}public MyPhoneCard(Context context, AttributeSet attrs, int defStyle){super(context,attrs,defStyle);}/** * 當從xml將所有的控制項都調入記憶體後，觸發的動作 * 在這裡擷取控制項的大小，並計算整個ViewGroup需要的總的寬和高 */@Overrideprotected void onFinishInflate(){super.onFinishInflate();final View[] btns = mButtons;for(int i=0; i<NUM_BUTTON; i++){btns[i] = this.getChildAt(i);btns[i].measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);}//緩衝大小final View child = btns[0];mButtonWidth = child.getMeasuredWidth();mButtonHeight = child.getMeasuredHeight();mPaddingLeft = this.getPaddingLeft();mPaddingRight = this.getPaddingRight();mPaddingTop = this.getPaddingTop();mPaddingBottom = this.getPaddingBottom();mWidthInc = mButtonWidth + mPaddingLeft + mPaddingRight;mHeightInc = mButtonHeight + mPaddingTop + mPaddingBottom;mWidth = mWidthInc*COLUMNS;mHeight = mHeightInc*ROWS;Log.v("Finish Inflate:", "btnWidth="+mButtonWidth+",btnHeight="+mButtonHeight+",padding:"+mPaddingLeft+","+mPaddingTop+","+mPaddingRight+","+mPaddingBottom);}/** * 這個方法在onFinishInflate之後，onLayout之前調用。這個方面調用兩次 */@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);Log.v("ViewGroup SIZE：width=", mWidth+"");Log.v("ViewGroup SIZE: height=",mHeight+"");final int width = resolveSize(mWidth, widthMeasureSpec);//傳入我們希望得到的寬度，得到測量後的寬度final int height = resolveSize(mHeight,heightMeasureSpec);//傳入我們希望得到的高度，得到測量後的高度Log.v("ViewGroup Measured SIZE: width=", width+"");Log.v("ViewGroup Measured SIZE: height=", height+"");//重新計算後的結果，需要設定。下面這個方法必須調用setMeasuredDimension(width, height);}/** * 這個方法在onMeasure之後執行，這個自訂控制項中含有12個子控制項（每個小鍵），所以，重寫這個方法， * 調用每個鍵的layout，將他們一個一個布局好 * 就是4*3的放置，很簡單，一個嵌套迴圈搞定 */@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {final View[] buttons = mButtons;int i = 0;Log.v("BOTTOM:", bottom+"");Log.v("TOP", top+"");int y = (bottom - top) - mHeight + mPaddingTop;//這裡其實bottom-top=mHeight,所以y=mPaddingTopLog.v("Y=", y+"");for(int row=0; row<ROWS; row++){int x = mPaddingLeft;for(int col = 0; col < COLUMNS; col++){buttons[i].layout(x, y, x+mButtonWidth, y+mButtonHeight);x = x + mWidthInc;i++;}y = y + mHeightInc;}}}

2、布局檔案：

<?xml version="1.0" encoding="utf-8"?><demo.phone.card.MyPhoneCard  xmlns:android="http://schemas.android.com/apk/res/android"   android:id = "@+id/dialpad"   android:paddingLeft="7dp"   android:paddingRight="7dp"   android:paddingTop="6dp"   android:paddingBottom="6dp"   android:layout_gravity="center"   android:layout_width="wrap_content"  android:layout_height="wrap_content"   android:layout_marginBottom="5dp">    <ImageButton android:id="@+id/one"   android:src="@drawable/dial_num_1_no_vm"   style="@style/dial_btn_style"   />    <ImageButton android:id="@+id/two"   android:src="@drawable/dial_num_2"   style="@style/dial_btn_style"/>      <ImageButton android:id="@+id/three"   android:src="@drawable/dial_num_3"   style="@style/dial_btn_style"/>      <ImageButton android:id="@+id/four"   android:src="@drawable/dial_num_4"   style="@style/dial_btn_style"/>      <ImageButton android:id="@+id/five"   android:src="@drawable/dial_num_5"   style="@style/dial_btn_style"/>    <ImageButton android:id="@+id/six"   android:src="@drawable/dial_num_6"   style="@style/dial_btn_style"/>     <ImageButton android:id="@+id/seven"   android:src="@drawable/dial_num_7"   style="@style/dial_btn_style"/>    <ImageButton android:id="@+id/eight"   android:src="@drawable/dial_num_8"   style="@style/dial_btn_style"/>    <ImageButton android:id="@+id/nine"   android:src="@drawable/dial_num_9"   style="@style/dial_btn_style"/>      <ImageButton android:id="@+id/star"   android:src="@drawable/dial_num_star"   style="@style/dial_btn_style"/>       <ImageButton android:id="@+id/zero"   android:src="@drawable/dial_num_0"   style="@style/dial_btn_style"/>       <ImageButton android:id="@+id/pound"   android:src="@drawable/dial_num_pound"   style="@style/dial_btn_style"/>                                    </demo.phone.card.MyPhoneCard>

這樣，就實現了的小鍵盤。這個例子參考Android內建電話應用的實現。可見，在開發中，靈活運用自訂的控制項，可以實現獨特而富有魅力的效果！