自定義視圖

Android提供了一個精緻而強大的組件化模式來創建你的用戶界面，基於基礎的佈局類：視圖 View和視圖組ViewGroup。平臺包含了多種預定義視圖和視圖組子類-分別稱爲部件和佈局-這些可以用來構造你的用戶界面。

一部分可用部件包括按鈕Button，文本視圖TextView，編輯文本框EditText，列表視圖ListView，組合框CheckBox, 單選按鈕RadioButton, 畫廊Gallery, 微調器Spinner,以及一些用於特定場合的自動補全文本視圖AutoCompleteTextView,圖片切換器ImageSwitcher, 和文本切換器TextSwitcher.

可用佈局有線性佈局LinearLayout,框架佈局FrameLayout, 相對佈局RelativeLayout, 以及其他。更多例子，參見常用佈局對象Common LayoutObjects.

如果這些預定義的部件或佈局不能滿足你的需求，你可以創建你自己的視圖類。如果你只需要在現有的部件或佈局上做些調整，你只需要子類化這個部件或佈局並重寫它的方法。

創建自己的視圖子類讓你可以精確控制界面元素的外形和功能。爲了對這種控制有個大概的印象，下面是一些例子說明你可以用它們做什麼：

·你可以把一組視圖組件組合進一個單獨的組件裏，如在gridView中，自定義Item的佈局，是其包含一個ImageView和一個TextView等等。

·你可以創建一個完全自定義繪製的視圖類型，比如一個條形統計圖。

第一種是自定義佈局組合視圖，可以參考RUI代碼中的AppIcon這個類。第二種是重寫父類的方法自定義視圖，可以參考RUI代碼中的BubbleTextView和CellLayout這兩個類。第二種的實現相對要求對View類的相關API瞭解的更加深入一些，因此，實現的難度比第一種大。在此，主要介紹第二種方法來繪製一個條形統計圖。

結果演示：

圖1 原始圖

圖 2 繪製圖

在結果演示當中的原始圖是國外的調查機構發佈的調查結果，繪製圖是根據原始圖，在重寫OnDraw（）方法繪製出來的。

相關源碼：

MyView類:

public class MyView extends View {
    private Paint myPaint; 
    private static final String mTitle = "最受開發者喜愛的平臺"; 
    private static final String mSource = "來源：http://www.52rd.com/S_TXT/2012_3/TXT34667.HTM"; 
    
    public MyView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }
    public MyView(Context context,AttributeSet attr) { 
        super(context,attr); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
        // TODO Auto-generated method stub 
        super.onDraw(canvas);
        myPaint = new Paint();  
        //繪製標題
        myPaint.setColor(Color.BLACK); //設置畫筆顏色
        myPaint.setTextSize(18);//設置文字大小
        canvas.drawText(mTitle, 20, 20, myPaint); 
        //繪製座標軸
        canvas.drawLine(50, 80, 50, 500, myPaint);//縱座標軸       
        canvas.drawLine(50, 500, 800, 500, myPaint);//橫座標軸
        int[] arrayInt = new int[]{0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100};
        int[] DrawableIds = new int[]{R.drawable.ios, R.drawable.android, R.drawable.wp7, R.drawable.bb};
        //繪製縱座標刻度
        myPaint.setTextSize(10);//設置文字大小
        canvas.drawText("百分比", 20, 70, myPaint); 
        for (int i = 0; i < arrayInt.length; i++) {
            canvas.drawLine(50, 500 - arrayInt[i] * 4, 54, 500 - arrayInt[i] * 4, myPaint);
            canvas.drawText(arrayInt[i] + "", 20, 500 - arrayInt[i] * 4, myPaint);
        }
        //繪製橫座標文字
        String[] arrayName = new String[]{"IOS", "Android", "WP7", "BlackBerry"};
        for (int i = 0; i < arrayName.length; i++) {
//            canvas.drawText(arrayName[i], arrayInt[i] * 15 + 80, 520, myPaint);
            canvas.drawBitmap(BitmapFactory.decodeResource(this.getResources(), DrawableIds[i]),
                    arrayInt[i] * 15 + 80, 520, myPaint);
        }
        //繪製條形圖
        myPaint.setColor(Color.BLUE); //設置畫筆顏色 
        myPaint.setStyle(Style.FILL); //設置填充 
        canvas.drawRect(new Rect(80, 500 - (40 * 9), 110, 500), myPaint);//畫一個矩形,前兩個參數是矩形左上角座標，後兩個參數是右下角座標        
        canvas.drawRect(new Rect(230, 500 - (40 * 8), 260, 500), myPaint);//第二個矩形     
        canvas.drawRect(new Rect(380, 500 - (int) (40 * 3.7), 410, 500), myPaint);//第三個矩形    
        canvas.drawRect(new Rect(530, 500 - (int) (40 * 1.6), 560, 500), myPaint);//第四個矩形
        myPaint.setColor(Color.BLACK); //設置畫筆顏色
        canvas.drawText("90%", 80, 500 - (40 * 9 + 5), myPaint);//第一個矩形的數字說明
        canvas.drawText("80%", 230, 500 - (40 * 8 + 5), myPaint);
        canvas.drawText("37%", 380, 500 - (int) (40 * 3.7 + 5), myPaint);
        canvas.drawText("16%", 530, 500 - (int) (40 * 1.6 + 5), myPaint);
        //繪製出處
        myPaint.setColor(Color.BLACK); //設置畫筆顏色
        myPaint.setTextSize(16);//設置文字大小        
        canvas.drawText(mSource, 20, 600, myPaint); 
    } 
}

佈局文件 main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <com.android.syl.myview.MyView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"/>
</LinearLayout>

注意事項：

1.     大家細看佈局文件，就會發現MyView和其它的View（TextView等等）有所不同，是因爲前面加了包名。這樣在Activity中就不用在做它的任何設置，只需在OnCreate（）方法中使用setContentView(R.layout.main)即可。

2.     設備中的繪圖座標是左上角爲座標原點，向下爲y軸，向右爲x軸。如下圖所示：

圖中的ABC三點就是有下面兩句代碼確定的

        canvas.drawLine(50,80, 50, 500, myPaint);//縱座標軸      

        canvas.drawLine(50, 500, 800, 500,myPaint);//橫座標軸