自定义视图

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);//横坐标轴