進階篇－用戶界面：5.android繪圖api自定義View（視圖）

1.自定義視圖並為其添加屬性

    我們平時用的Button啊 TextView啊都是安卓中系統自帶的控件供開發者使用，但是，這些事遠遠不夠的，有時候我們需要自定義控件。

（1）新建一個類MyView使其繼承View 類

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by lzc on 16/7/2.
 */
public class MyView extends View {

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public MyView(Context context) {
        super(context);
    }
}

這兩個構造方法是必不可少的。

（2）此時，在activity_main.xml中就可以添加我們自定義的這個控件了。

 <com.example.lzc.myrect.MyView
        android:layout_width="100dp"
        android:layout_height="100dp"
        />

它的寬度和長度分別是100dp，它目前是一個正方形

（3）在res文件夾中添加資源文件arrts.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyView">
        <attr name="rect_color"
            format="color"/>
    </declare-styleable>
</resources>

聲明一個名為rect_color的屬性，它的格式是color類型的格式。

（4）回到MyView類，為其添加默認屬性

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by lzc on 16/7/2.
 */
public class MyView extends View {

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.MyView);

        int color = ta.getColor(R.styleable.MyView_rect_color,0xffff0000);
        setBackgroundColor(color);

        ta.recycle();
    }
    public MyView(Context context) {
        super(context);
    }
}

(5)在xml中（layout）中直接使用我們剛剛聲明的屬性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:mns="http://schemas.android.com/apk/res-auto"
   
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.lzc.myrect.MainActivity">

    <com.example.lzc.myrect.MyView
        android:layout_width="100dp"
        android:layout_height="100dp"
        mns:rect_color="#ff0000ff"
        />

</LinearLayout>

這個屬性的名字為rect_color，但是需要給他加一個命名空間，我們看到所有屬性前面都有一個android：，這個android就是系統的命名空間。

我們添加一個名為mns（mynamespace可以自定義）的命名空間，在eclipse中我們要把

xmlns:android="http://schemas.android.com/apk/res/android"中的android直接改成我們的包名，但是在android studio中，只需要添加：

xmlns:mns="http://schemas.android.com/apk/res-auto"

他就會自動檢測到你在資源文件中聲明的屬性名稱。

2.自定義Button皮膚

（1）在res文件夾中添加一個drawable類型的xml文件－button_skin.xml，root element為selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@drawable/btn_normal"/>
    <item android:state_pressed="true" android:drawable="@drawable/btn_pressed"/>
</selector>

也就是按下和彈起分別加載兩張不同的背景圖片。

（2）在button標簽中添加一個background屬性

android:background="@drawable/button_skin"

把我們剛剛創建的button_skin.xml添加到background屬性中。

4.使用繪圖api自定義控件

(1)同樣的先創建一個自定義類 MyView繼承View類

public class MyView extends View {
    public MyView(Context context) {
        super(context);
        init();
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
       
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
    }
   
}

我們需要三個構造方法和一個重寫的draw()方法。

（2）在draw方法里面使用canvas進行繪制一個正方形，繪制需要一個Paint類作為工具，所以還需要定義一個Paint類。並為其指定顏色等屬性。

public class MyView extends View {
    public MyView(Context context) {
        super(context);
        init();
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init(){
        p = new Paint();
        p.setColor(Color.RED);
    }
    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        canvas.save();
        canvas.translate(200,200);
        canvas.rotate(degrees,50,50);
        canvas.drawRect(0 ,0 ,100 ,100 ,p);
        degrees ++;
        canvas.restore();
        invalidate();//清除並重繪
    }
    private Paint p;
    private float degrees=0;
}

注意init()方法需要在三個構造方法中同時添加，保證無論執行哪個構造方法都執行此方法。

在draw方法里面的操作為事這個正方形進行旋轉，這樣旋轉很耗資源，所以最好在里面加一個handle延時，使其刷新的頻率沒有這么快。

（3）在xml文件里面添加我們自定義的控件

<com.example.lzc.myapplication.MyView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

這樣運行程序我們就會看到一個旋轉的正方形！

android的繪圖api非常強大，能夠繪制出任何圖形，執行任何動畫。