自定義View的屬性

  在上一章中講了那麼多，這一章開始就進行實戰了。首先來一發自定義View屬性的demo。
自定義View屬性的步驟分為以下3步。
（1） 新建一個attrs.xml檔案，在這個資原始檔中定義我們需要的屬性。
（2）新建一個自定義的View,對其中的的方法進行重寫。
（3）在layout中引用這個新的控制元件。
先進行第一步。在values檔案下新建一個attrs.xml檔案。

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<resources
 
>
    <attr name="testText" format="string"/>
    <attr name="testColor" format="color"/>
    <attr name="testSize" format="dimension"/>
    <attr name="testBackGroudColor" format="color"/>
     <declare-styleable name="CustomTitleView">  
        <attr name="testText"
 
 />
        <attr name="testColor" />
        <attr name="testSize" />
        <attr name="testBackGroudColor"/>
    </declare-styleable>
</resources>

這裡我們定義了一個屬性組，包含了文字，文字顏色，文字大小以及控制元件背景色，且規定了它們的型別分別為string ,color,dimension。
  然後在自定義的View中引用這些屬性。

public class TestView
 
 extends View{

    private String testText;//文字
    private int testColor;//文字顏色
    private int testSize;//文字大小
    private int testBackGroudColor;//背景色
    private Rect mBound;
    private Paint mPaint;

    public TestView(Context context) {
        this(context, null);
    }

    public TestView(Context context,AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public TestView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
        //建構函式中引用屬性
        TypedArray ta = context.getTheme().obtainStyledAttributes(attrs,R.styleable.CustomTitleView, defStyleAttr, 0);
        int n = ta.getIndexCount();
        for (int i = 0; i < n; i++)
        {  
            int attr = ta.getIndex(i);
            switch (attr)  
            {  
            case R.styleable.CustomTitleView_testText:  
                testText = ta.getString(attr);  
                break;  
            case R.styleable.CustomTitleView_testColor:  

                testColor = ta.getColor(attr, Color.GRAY);
                break;  
            case R.styleable.CustomTitleView_testSize:

                testSize = ta.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                        TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                break;  
            case R.styleable.CustomTitleView_testBackGroudColor:
                testBackGroudColor = ta.getColor(attr, Color.BLACK);
            }  

        }  
        ta.recycle();
        mPaint = new Paint();
        mPaint.setTextSize(testSize);
        mBound = new Rect();
        mPaint.getTextBounds(testText, 0, testText.length(), mBound);  
    }

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
    {  
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
    }

    protected void onDraw(Canvas canvas)  
    {  
        mPaint.setColor(testBackGroudColor);  
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);  

        mPaint.setColor(testColor);  
        canvas.drawText(testText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint);  
    }

接下來進行最後一步，在佈局中引用自定義的View

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res/com.example.myview"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.myview.MainActivity" >
   <com.example.myview.TestView 
        android:layout_width="200dp"
        android:layout_height="100dp"
        custom:testText="12345"
        custom:testColor="#ff0000"
        custom:testSize="40sp"
        custom:testBackGroudColor="#00ff00"/>
</RelativeLayout>

注意命名控制元件的引用xmlns:custom=”http://schemas.android.com/apk/res/com.example.myview”。
具體程式碼將傳到github上，效果可自行下載後檢視。

自定可以隨意拖動的滾動View

這個Demo中包含了View的滾動和點選事件。涉及到了View自定義中的onTouchEvent onMeasure等。
先初始化一個文字

    protected void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setTextSize(80);
        Rect rect = new Rect();
        mPaint.getTextBounds(text[0], 0, text[0].length(), rect);
        textWidth = rect.width();
        textHeight = rect.height();
        x = getLeft() + getPaddingLeft();
        startY = getTop() + textHeight + getPaddingTop() - 7;// 文字基線 需要調整
        Log.d("hk", "textHeight startY  = "+textHeight+" "+startY);
        endY = startY + textHeight + getPaddingBottom();
        Log.d("hk", "endY  getPaddingBottom() "+endY+" "+getPaddingBottom());
        nextStartY = getTop() - 7;
        firstY = startY;
        secondY = nextStartY;
    }

在對這個文字的大小進行測量

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }
    private int measureHeight(int heightMeasureSpec) {
        int result = 0;
        int size = MeasureSpec.getSize(heightMeasureSpec);
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            result = (int) (getPaddingTop() + getPaddingBottom() + textHeight);
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(result, size);
            }
        }
        return result;
    }

    private int measureWidth(int widthMeasureSpec) {
        int result = 0;
        int size = MeasureSpec.getSize(widthMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            result = (int) (getPaddingLeft() + getPaddingRight() + textWidth);
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(result, size);
            }
        }
        return result;
    }

最後在onDraw中讓文字進行滾動。
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d(“HK”, “onDraw”);
//啟動滾動
if (!isScrooll) {
mHandler.sendEmptyMessageDelayed(CHANGE_SPEECH, 2000);
isScrooll = true;
}

    canvas.drawText(text[0], x, startY, mPaint);
    canvas.drawText(text[1], x, nextStartY, mPaint);
    startY += speech;
    nextStartY += speech;

    //超出View的控制元件時
    if (startY > endY || nextStartY > endY) {
        if (startY > endY) {
            //第一次滾動過後交換值
            startY = secondY;
            nextStartY = firstY;
        } else if (nextStartY > endY) {
            //第二次滾動過後交換值
            startY = firstY;
            nextStartY = secondY;
        }
        speech = 0;
        isScrooll = false;
    }
    invalidate();//重新整理View，View的刷星又會呼叫到draw ，因此可以迴圈下去
}

為了使該控制元件能夠接受拖動事件，需要重寫onTouchEvent。

    public boolean onTouchEvent(MotionEvent event) {

        float x;
        float y;
        x = event.getRawX();
        y = event.getRawY();
        switch(event.getAction()) {
        case MotionEvent.ACTION_DOWN:

            Log.d("HK", "ACTION_DOWN"+x+" "+y);
            break;
        case MotionEvent.ACTION_MOVE:
            int lefttopx = (int) (x-textWidth/2);
            int lefttopy = (int) (y-textHeight/2-180);
            int rightbottomx = (int) (lefttopx+textWidth);
            int rightbottomy = (int) (lefttopy+textHeight);
            //if(Math.abs(rightbottomx-lefttopx)>50&&Math.abs(rightbottomy-lefttopy)>20)
            layout(lefttopx, lefttopy, rightbottomx, rightbottomy);//重新佈局
            break;
        case MotionEvent.ACTION_UP:
            Log.d("HK", "ACTION_UP");
            break;
        }
        return true;
    }