Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android自定義控件---“取消”視圖

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

編輯:關於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這裡的名字可以自定義)



    

    

        

        

        
    

    

    

        

        

        
    

    

    

        

        

        
    


三、結束 分享寫完,我搬磚去了。
  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved