android 自定義控件---圓形方向盤

在做Android平台開發的時候，經常會遇到安卓原生控件無法滿足需求的情況，安卓允許開發者去繼承已經存在的控件或者實現你自己的控件。

先來看一下效果圖

 

 

采用直接集成View類，重寫onDrow方法繪制。

下面附上主要代碼。

---

1 新建一個類CircleView 繼承自View

 

 

 

package com.lennon.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
 * 自定義圓形的方向布局
 * 
 * @author 樊列龍
 * @since 2014-06-07
 */
public class CircleView extends View {

    private int circleWidth = 100; // 圓環直徑
    private int circleColor = Color.argb(150, 255, 0, 0);
    private int innerCircleColor = Color.rgb(0, 150, 0);
    private int backgroundColor = Color.rgb(255, 255, 255);
    private Paint paint = new Paint();
    int center = 0;
    int innerRadius = 0;
    private float innerCircleRadius = 0;
    private float smallCircle = 10;
    public Dir dir = Dir.UP;

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

    public CircleView(Context context) {
        super(context);

        // paint = new Paint();
    }

    public CircleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

    }

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

        int measuredHeight = measureHeight(heightMeasureSpec);
        int measuredWidth = measureWidth(widthMeasureSpec);

        setMeasuredDimension(measuredWidth, measuredHeight);

        center = getWidth() / 2;
        innerRadius = (center - circleWidth / 2 - 10);// 圓環
        innerCircleRadius = center / 3;
        this.setOnTouchListener(onTouchListener);
    }

    /**
     * 測量寬度
     * 
     * @param measureSpec
     * @return
     */
    private int measureWidth(int measureSpec) {
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        int result = 0;

        if (specMode == MeasureSpec.AT_MOST) {
            result = getWidth();
        } else if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        }
        return result;
    }

    /**
     * 測量高度
     * 
     * @param measureSpec
     * @return
     */
    private int measureHeight(int measureSpec) {

        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        int result = 0;

        if (specMode == MeasureSpec.AT_MOST) {

            result = specSize;
        } else if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        }
        return result;
    }

    /**
     * 開始繪制
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        initBackGround(canvas);
        drawDirTriangle(canvas, dir);

    }

    /**
     * 繪制方向小箭頭
     * 
     * @param canvas
     */
    private void drawDirTriangle(Canvas canvas, Dir dir) {
        paint.setColor(innerCircleColor);
        paint.setStrokeWidth(1);
        paint.setStyle(Paint.Style.FILL);

        switch (dir) {
        case UP:
            drawUpTriangle(canvas);
            break;
        case DOWN:
            drawDownTriangle(canvas);
            break;
        case LEFT:
            drawLeftTriangle(canvas);
            break;
        case RIGHT:
            drawRightTriangle(canvas);
            break;
        case CENTER:
            invalidate();
            break;
        default:
            break;
        }

        paint.setColor(backgroundColor);

        canvas.drawCircle(center, center, smallCircle, paint);
        // canvas.drawText(text, center, center+40, paint);

    }

    /**
     * 繪制向右的小箭頭
     * 
     * @param canvas
     */
    private void drawRightTriangle(Canvas canvas) {
        Path path = new Path();
        path.moveTo(center, center);
        double sqrt2 = innerCircleRadius / Math.sqrt(2);
        double pow05 = innerCircleRadius * Math.sqrt(2);
        path.lineTo((float) (center + sqrt2), (float) (center - sqrt2));
        path.lineTo((float) (center + pow05), center);
        path.lineTo((float) (center + sqrt2), (float) (center + sqrt2));
        canvas.drawPath(path, paint);
        paint.setColor(backgroundColor);
        canvas.drawLine(center, center, center + innerCircleRadius, center, paint);

        drawOnclikColor(canvas, Dir.RIGHT);
    }

    /**
     * 繪制想左的小箭頭
     * 
     * @param canvas
     */
    private void drawLeftTriangle(Canvas canvas) {
        Path path = new Path();
        path.moveTo(center, center);
        double sqrt2 = innerCircleRadius / Math.sqrt(2);
        double pow05 = innerCircleRadius * Math.sqrt(2);
        path.lineTo((float) (center - sqrt2), (float) (center - sqrt2));
        path.lineTo((float) (center - pow05), center);
        path.lineTo((float) (center - sqrt2), (float) (center + sqrt2));
        canvas.drawPath(path, paint);

        paint.setColor(backgroundColor);
        canvas.drawLine(center, center, center - innerCircleRadius, center, paint);

        drawOnclikColor(canvas, Dir.LEFT);

    }

    /**
     * 繪制向下的小箭頭
     * 
     * @param canvas
     */
    private void drawDownTriangle(Canvas canvas) {
        Path path = new Path();
        path.moveTo(center, center);
        double sqrt2 = innerCircleRadius / Math.sqrt(2);
        double pow05 = innerCircleRadius * Math.sqrt(2);
        path.lineTo((float) (center - sqrt2), (float) (center + sqrt2));
        path.lineTo(center, (float) (center + pow05));
        path.lineTo((float) (center + sqrt2), (float) (center + sqrt2));
        canvas.drawPath(path, paint);

        paint.setColor(backgroundColor);
        canvas.drawLine(center, center, center, center + innerCircleRadius, paint);

        drawOnclikColor(canvas, Dir.DOWN);
    }

    /**
     * 點擊的時候繪制黑色的扇形
     * 
     * @param canvas
     * @param dir
     */
    private void drawOnclikColor(Canvas canvas, Dir dir) {
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(100);
        switch (dir) {
        case UP:
            canvas.drawArc(new RectF(center - innerRadius, center - innerRadius, center + innerRadius, center
                    + innerRadius), 225, 90, false, paint);
            break;
        case DOWN:
            canvas.drawArc(new RectF(center - innerRadius, center - innerRadius, center + innerRadius, center
                    + innerRadius), 45, 90, false, paint);
            break;
        case LEFT:
            canvas.drawArc(new RectF(center - innerRadius, center - innerRadius, center + innerRadius, center
                    + innerRadius), 135, 90, false, paint);
            break;
        case RIGHT:
            canvas.drawArc(new RectF(center - innerRadius, center - innerRadius, center + innerRadius, center
                    + innerRadius), -45, 90, false, paint);
            break;

        default:
            break;
        }

        paint.setStyle(Paint.Style.FILL);
    }

    /**
     * 繪制像向上的箭頭
     * 
     * @param canvas
     */
    private void drawUpTriangle(Canvas canvas) {
        Path path = new Path();
        path.moveTo(center, center);
        double sqrt2 = innerCircleRadius / Math.sqrt(2);
        double pow05 = innerCircleRadius * Math.sqrt(2);

        path.lineTo((float) (center - sqrt2), (float) (center - sqrt2));
        path.lineTo(center, (float) (center - pow05));
        path.lineTo((float) (center + sqrt2), (float) (center - sqrt2));
        canvas.drawPath(path, paint);

        paint.setColor(backgroundColor);
        canvas.drawLine(center, center, center, center - innerCircleRadius, paint);

        drawOnclikColor(canvas, Dir.UP);
    }

    /**
     * 繪制基本的背景， 這包括了三個步驟：1.清空畫布 2.繪制外圈的圓 3.繪制內圈的圓
     * 
     * @param canvas
     */
    private void initBackGround(Canvas canvas) {
        clearCanvas(canvas);
        drawBackCircle(canvas);
        drawInnerCircle(canvas);

    }

    /**
     * 繪制中心白色小圓
     * 
     * @param canvas
     */
    private void drawInnerCircle(Canvas canvas) {
        paint.setColor(innerCircleColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(1);
        canvas.drawCircle(center, center, innerCircleRadius, paint);
    }

    /**
     * 繪制背景的圓圈和隔線
     * 
     * @param canvas
     */
    private void drawBackCircle(Canvas canvas) {
        paint.setColor(circleColor);
        paint.setStrokeWidth(circleWidth);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(center, center, innerRadius, paint); // 繪制圓圈

        paint.setColor(backgroundColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(4);
        canvas.drawLine(center, center, 0, 0, paint);
        canvas.drawLine(center, center, center * 2, 0, paint);
        canvas.drawLine(center, center, 0, center * 2, paint);
        canvas.drawLine(center, center, center * 2, center * 2, paint);

    }

    /**
     * 清空畫布
     * 
     * @param canvas
     */
    private void clearCanvas(Canvas canvas) {
        canvas.drawColor(backgroundColor);
    }

    OnTouchListener onTouchListener = new OnTouchListener() {

        @Override
        public boolean onTouch(View view, MotionEvent event) {
            Dir tmp = Dir.UNDEFINE;
            if ((tmp = checkDir(event.getX(), event.getY())) != Dir.UNDEFINE) {
                dir = tmp;
                invalidate();
            }
            return true;
        }

        /**
         * 檢測方向
         * 
         * @param x
         * @param y
         * @return
         */
        private Dir checkDir(float x, float y) {
            Dir dir = Dir.UNDEFINE;

            if (Math.sqrt(Math.pow(y - center, 2) + Math.pow(x - center, 2)) < innerCircleRadius) {// 判斷在中心圓圈內
                dir = Dir.CENTER;
                System.out.println("----中央");
            } else if (y < x && y + x < 2 * center) {
                dir = Dir.UP;
                System.out.println("----向上");
            } else if (y < x && y + x > 2 * center) {
                dir = Dir.RIGHT;
                System.out.println("----向右");
            } else if (y > x && y + x < 2 * center) {
                dir = Dir.LEFT;
                System.out.println("----向左");
            } else if (y > x && y + x > 2 * center) {
                dir = Dir.DOWN;
                System.out.println("----向下");
            }

            return dir;
        }

    };

    /**
     * 關於方向的枚舉
     * 
     * @author Administrator
     * 
     */
    public enum Dir {
        UP, DOWN, LEFT, RIGHT, CENTER, UNDEFINE
    }

}

 

 

 

 

2 在activity_main.xml中引用CircleView類

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > 

<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> 

<com.lennon.view.CircleView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/cv" /> 

</LinearLayout> 

</RelativeLayout>

 

 

好了 可以直接運行處結果了！

 

下面對上述代碼做一些說明：

主要的自定義控件的方法有：

1.有些基本功能原生控件都能提供，所以這個時候你只需要繼承並對控件進行擴展。通過重寫它的事件，onDraw,但是始終都保持都父類方法的調用。

2.組合控件 就是通過合並幾個控件的功能來生成一個控件。

3.完完整整創建一個新的控件。

 

 

我們這里實現的是一個完全自定義的控件，通常是繼承View或者SurfaceView ，View類提供一個Canvas（畫布）和一系列的畫的方法，還有Paint（畫筆）。使用它們去創建一個自定義的UI。你可以重寫事件，包括屏幕接觸或者按鍵按下等等，用來提供與用戶交互。

1.如果你不需要快速重畫和3D圖像的效果，那么讓View作為父類提供一個輕量級的解決方案。

2.如若不然，就需要使用SurfaceView作為父類，這樣你就可以提供一個后台線程去畫和使用OPENGL去實現你的圖像。這個就相對重量級了，如果你的視圖需要經常更新，然后由需要顯示比較復雜的圖像信息（尤其是在游戲和3D可視化），SurfaceView將是更好的選擇。

使用這這方式一般你需要重寫2個方法：
1.onMeasure

什么是onMeasure?

下面轉載一段文章：

View在屏幕上顯示出來要先經過measure（計算）和layout（布局）.
1、什么時候調用onMeasure方法？ 
當控件的父元素正要放置該控件時調用.父元素會問子控件一個問題，“你想要用多大地方啊？”，然后傳入兩個參數——widthMeasureSpec和heightMeasureSpec.
這兩個參數指明控件可獲得的空間以及關於這個空間描述的元數據.

更好的方法是你傳遞View的高度和寬度到setMeasuredDimension方法里,這樣可以直接告訴父控件，需要多大地方放置子控件.

    widthMeasureSpec和heightMeasureSpec這2個參數都是整形是出於效率的考慮，所以經常要做的就是對其解碼=>

1. int specMode = MeasureSpec.getMode(measureSpec);
2. int specSize = MeasureSpec.getSize(measureSpec);

1. 依據specMode的值，（MeasureSpec有3種模式分別是UNSPECIFIED, EXACTLY和AT_MOST）
2. 如果是AT_MOST，specSize 代表的是最大可獲得的空間；
   如果是EXACTLY，specSize 代表的是精確的尺寸；
   如果是UNSPECIFIED，對於控件尺寸來說，沒有任何參考意義。
   2、那么這些模式和我們平時設置的layout參數fill_parent, wrap_content有什么關系呢？
   經過代碼測試就知道，當我們設置width或height為fill_parent時，容器在布局時調用子 view的measure方法傳入的模式是EXACTLY，因為子view會占據剩余容器的空間，所以它大小是確定的。
   而當設置為 wrap_content時，容器傳進去的是AT_MOST, 表示子view的大小最多是多少，這樣子view會根據這個上限來設置自己的尺寸。當子view的大小設置為精確值時，容器傳入的是EXACTLY, 而MeasureSpec的UNSPECIFIED模式表示你沒有指定大小。
3. View的onMeasure方法默認行為是當模式為UNSPECIFIED時，設置尺寸為mMinWidth(通常為0)或者背景drawable的最小尺寸，當模式為EXACTLY或者AT_MOST時，尺寸設置為傳入的MeasureSpec的大小。 
   有個觀念需要糾正的是，fill_parent應該是子view會占據剩下容器的空間，而不會覆蓋前面已布局好的其他view空間，當然后面布局子 view就沒有空間給分配了，所以fill_parent屬性對布局順序很重要。以前所想的是把所有容器的空間都占滿了，難怪google在2.2版本里 把fill_parent的名字改為match_parent.
   在兩種情況下，你必須絕對的處理這些限制。在一些情況下，它可能會返回超出這些限制的尺寸，在這種情況下，你可以讓父元素選擇如何對待超出的View，使用裁剪還是滾動等技術。
4. @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int measuredHeight = measureHeight(heightMeasureSpec); int measuredWidth = measureWidth(widthMeasureSpec);
   setMeasuredDimension(measuredHeight, measuredWidth); // 記住這句可不能省。 }
   private int measureHeight(int measureSpec) { int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec);
   // Default size if no limits are specified. int result = 500;
   if (specMode == MeasureSpec.AT_MOST) { // Calculate the ideal size of your // control within this maximum size. // If your control fills the available // space return the outer bound. result = specSize; } else if (specMode == MeasureSpec.EXACTLY) { // If your control can fit within these bounds return that value. result = specSize; } return result; }
   private int measureWidth(int measureSpec) { // 代碼基本類似measureHeight }

2 onDraw

使用Canvas進行圖形的繪制

 

本文參考了：

1.http://my.oschina.net/wangjunhe/blog/99764

 

 

2.http://blog.csdn.net/ethan_xue/article/details/7313575

 

代碼下載地址

http://download.csdn.net/detail/csulennon/7462169