Android自定義控件---“取消”視圖

一、前言 好久沒更新博客了，最近一直在忙，找實習，整理畢業資料，找房子等等。現在大部分基本忙完了，這幾天在公司寫的一些自定義控件，打算發出來與大家分享。   首先看看最終的效果圖

 

這個自定義視圖的應用場景，主要用於替代對話框左上角或者右上角的取消按鈕。按照我以前的做法，都是設計師發給我一張圖片，我自己創建一個ImageView，再把圖片設置進去就結束了。如果有天產品經理看得不爽，想要圓形，或矩形，對角線想要XXX顏色。又得等設計師發圖了（本人不太會PS啊）。所以為了避免麻煩，打算自己寫一個。   二、自定義控件個人思路 創建了一個CustomCancelView類，直接繼承View。重寫裡面的onMeasure和onDraw方法。   1、重寫onMeasure方法，強制將視圖設置為寬度和高度相等。在Xml文件中只寫layout_width屬性值就可以了，layout_height屬性的值隨便寫。

@Override
 protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(widthMeasureSpec, widthMeasureSpec);
}

2、接下來比較麻煩的就是重寫onDraw方法。 在onDraw方法裡面畫一個圓形，矩形，圓矩形是不難的。 那麼要思考的問題就是怎麼畫對角線，並且這個對角線的大小要隨著該視圖的大小改變而改變。   我以畫一個圓形的左對角線為例子。 （1）首先我們假設這個矩形的黑色邊框就是我們控件的視圖邊界，設它的寬度width和高度height為100（這個黑色邊框我們不可見。）

 

（2） 再畫一個圓形，這個藍色的圓形就是我們可見的視圖。

（3） 獲取圓形的半徑，半徑為circleRadius=width/2。即半徑50（圖中的三條線為圓的半徑）

 

（4） 再畫一條紅色的垂直線，由於1,2,3邊構成的三角形很明顯就是一個等腰三角形嘛（哎，我數學不太好。），設1,2邊為X，3邊的值，我們知道是50（這是半徑值啊）。根據勾股定理解出X的值約等於35。也就是1,2邊的長度為35。 程序中的代碼為int rectangleHalf=(int)Math.sqrt((circleRadius*circleRadius)/2);

 

 

（5）接下來再計算圖中綠色點的坐標，設坐標為(leftDiagonalStartX,leftDiagonalStartY)。則 x=半徑值50-2邊的值（35）=15 y=半徑值50-1邊的值（35）=15。 所以這個綠色點坐標為（15,15） 程序代碼 leftDiagonalStartX = leftDiagonalStartY = circleRadius - rectangleHalf

 

 

（6）設這個右下角的綠色點坐標為（leftDiagonalEndX ,leftDiagonalEndY）。則 x=半徑值50+5邊的值（35）=85 y=半徑值50+6邊的值（35）=85。 所以這個綠色點坐標為（85,85） 程序代碼 leftDiagonalEndX = leftDiagonalEndY = circleRadius + rectangleHalf

 

 

根據數學定義：兩點確定一條直線。 最後調用canvas.drawLine()繪制這條左對角線出來   關於右對角線的繪制就不說了，基本思路和上面講的差不多。   關於onDraw方法的核心代碼如下

@Override
 protected void onDraw(Canvas canvas) {
    //計算圓的半徑
    circleRadius = getWidth() / 2;

    ////繪制正方形/圓形/圓矩形（注意繪制此圖形的目的是用來作為背景）。
    drawView(canvas , paintTemp) ;

    //得到圓內接矩形的長度的一半
    int rectangleHalf = (int) Math. sqrt(( circleRadius * circleRadius ) / 2) ;

    //左對角線的坐標
    int leftDiagonalStartX, leftDiagonalStartY , leftDiagonalEndX, leftDiagonalEndY;

    //計算左對角線的坐標(需要考慮paintWidth和diagonalLength對對角線的影響，覺得這兩個參數影響代碼閱讀可以暫時去掉)
    leftDiagonalStartX = leftDiagonalStartY = circleRadius - rectangleHalf + paintWidth + diagonalLength ;
    leftDiagonalEndX = leftDiagonalEndY = circleRadius + rectangleHalf - paintWidth - diagonalLength;

    //繪制左對角線
    drawDiagonal(canvas , leftDiagonalStartX, leftDiagonalStartY, leftDiagonalEndX , leftDiagonalEndY, diagonalLeftColor , paintCapRound) ;

    //右對角線的坐標
    int rightDiagonalStartX, rightDiagonalStartY , rightDiagonalEndX, rightDigonalEndY;
    //計算右對角線的坐標(需要考慮paintWidth和diagonalLength對對角線的影響，覺得這兩個參數影響代碼閱讀可以暫時去掉)
    rightDiagonalStartX = circleRadius + rectangleHalf - paintWidth - diagonalLength;
    rightDiagonalStartY = circleRadius - rectangleHalf + paintWidth + diagonalLength;
    rightDiagonalEndX = circleRadius - rectangleHalf + paintWidth + diagonalLength;
    rightDigonalEndY = circleRadius + rectangleHalf - paintWidth - diagonalLength;
    //繪制右對角線
    drawDiagonal(canvas , rightDiagonalStartX, rightDiagonalStartY, rightDiagonalEndX, rightDigonalEndY , diagonalRightColor, paintCapRound);

    //繪制正方形/圓形/圓矩形
    drawView(canvas , mPaint) ;
}

/**
* 繪制視圖
*
* @param canvas
 * @param paint
 */
public void drawView(Canvas canvas , Paint paint) {
    if (cancelViewType == SQUARE) {
        canvas.drawRect(paintWidth , paintWidth, getWidth() - paintWidth, getHeight() - paintWidth, paint) ;
    } else if (cancelViewType == CIRCLE) {
        canvas.drawCircle(circleRadius , circleRadius, circleRadius - paintWidth , paint);
    } else if (cancelViewType == ROUNDED_RECTANGLE) {
        canvas.drawRoundRect(new RectF(paintWidth, paintWidth, getWidth() - paintWidth, getHeight() - paintWidth), roundDegree, roundDegree , paint);
    } else {
        Log.e( "------------->", "視圖類型錯誤！" );
    }
}


/**
* 繪制對角線
*
* @param canvas
 * @param diagonalStartX
 * @param diagonalStartY
 * @param diagonalEndX
 * @param diagonalEndY
 */
public void drawDiagonal(Canvas canvas , int diagonalStartX, int diagonalStartY, int diagonalEndX, int diagonalEndY , int diagonalColor, boolean paintCapRound) {
    Paint diagonalPaint = new Paint();
    diagonalPaint.setAntiAlias( true);
    diagonalPaint.setColor(diagonalColor) ;
    diagonalPaint.setStrokeWidth( diagonalPaintWidth);
    diagonalPaint.setStyle(Paint.Style. STROKE);
    if (paintCapRound ) {
        //設置畫筆的半圓風格
        diagonalPaint.setStrokeCap(Paint.Cap. ROUND);
    } else {
        //設置畫筆默認值
        diagonalPaint.setStrokeCap(Paint.Cap. SQUARE);
    }
    //繪制對角線
    canvas.drawLine(diagonalStartX , diagonalStartY, diagonalEndX, diagonalEndY , diagonalPaint);
}

（7）XML文件布局 注意在XML文件一定要添加這句xmlns:app="http://schemas.android.com/apk/res-auto"（其中xmlns:=xxx這裡的名字可以自定義）

三、結束 分享寫完，我搬磚去了。