自定義View

自定義View分類

• 自定義View的步驟：
  1.在res/values/中定義View的屬性，這裏包括字體顏色、修字體大小等
  2.重寫View的構造方法，並獲取我們在res/values/中自定義的屬性
  3.重寫onMesure()方法
  4.重寫onDraw()方法

時鐘案例

• 1.首先創建一個JAVA類繼承於View，裏面有四個構造器，一般情況下調用前2個構造器，
• 2.進行繪製圖形操作（詳細見代碼部分）
• 3.繪製完成後爲了實現秒針、分針和時針的走動，需要不斷的向UI線程發送消息從而進行重新繪製，這就需要用到Handler向UI線程不斷髮送消息，同時不斷得到當前系統時間刷新繪圖的位置。必須要調用invalidate();方法提醒UI線程進行重新繪製
  4.在佈局文件中要調用自定義View需要寫上包名+路徑，這樣纔可以被真正的調用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.my.mywidget.widget.MyView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

public class MyView extends View{
    private int width;
    private int heigth;
    private Paint mPaintLine;
    private Paint mPaintCircle;
    private Paint mPaintText;
    private Paint mPaintPoint;
    private Calendar mCalendar;
    public static final int NEED_REFRESH=0x23;
    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case NEED_REFRESH:
                    mCalendar=Calendar.getInstance();
                    invalidate();//提醒UI線程重新繪製
                    handler.sendEmptyMessageDelayed(NEED_REFRESH,1000);//相當於迭代，每隔1s就發送一個空消息，告訴UI線程進行重繪操作
                    break;
            }
        }
    };
//    View有4個構造器
    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mCalendar=Calendar.getInstance();//初始化Calendar，得到當前時間

        mPaintLine=new Paint();
        mPaintLine.setColor(Color.BLACK);//設置顏色
        mPaintLine.setAntiAlias(true);//設置抗鋸齒
        mPaintLine.setStrokeWidth(10);//設置線條寬度

        mPaintCircle=new Paint();
        mPaintCircle.setStrokeWidth(10);//設置線條寬度
        mPaintCircle.setColor(Color.BLACK);//設置顏色
        mPaintCircle.setAntiAlias(true);//設置抗鋸齒
        mPaintCircle.setStyle(Paint.Style.STROKE);//設置爲空心

        mPaintText=new Paint();
        mPaintText.setColor(Color.BLUE);//設置顏色
        mPaintText.setTextAlign(Paint.Align.CENTER);//設置對齊方式
        mPaintText.setAntiAlias(true);//設置抗鋸齒
        mPaintText.setTextSize(30);//設置字體大小

        mPaintPoint=new Paint();
        mPaintPoint.setAntiAlias(true);//設置抗鋸齒
        mPaintPoint.setStyle(Paint.Style.FILL);//設置爲FILL
        mPaintPoint.setStrokeWidth(10);//設置寬度
        mPaintPoint.setColor(Color.BLACK);//設置顏色

        handler.sendEmptyMessage(NEED_REFRESH);//向Handler發送一個空消息
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width=getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);//得到系統默認的寬度
        heigth=getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);//得到系統默認的高度
        setMeasuredDimension(width,heigth);//將默認寬高設置上去
    }
    //onDraw是有UI線程調用，不需要做其他處理
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        canvas.drawLine(0,600,600,600,mPaintLine);
//        canvas.drawCircle(300,300,100,mPaintCircle);
        canvas.drawCircle(width/2,heigth/2,300,mPaintCircle);
        canvas.drawCircle(width/2,heigth/2,10,mPaintPoint);
        //利用for循環繪製時鐘的時刻信息
        for (int i=1;i<=12;i++){
            // canvas.save();和canvas.restore();需要配合使用
            //先保存，然後進行旋轉，然後畫線，最後在轉到初始位置，
            canvas.save();//保存當前畫布狀態
            canvas.rotate(360/12*i,width/2,heigth/2);//第一參數代表旋轉角度，第二和第三個參數代表旋轉中心
            canvas.drawLine(width/2,heigth/2-300,width/2,heigth/2-280,mPaintLine);//前兩個表示起始位置，第三和第四個表示末位置，最後一個表示畫筆
            canvas.drawText(""+i,width/2,heigth/2-250,mPaintText);//第一個是文本內容，第二和第三個表示顯示文本位置
            canvas.restore();//恢復到保存的畫布狀態
        }

            int minutes = mCalendar.get(Calendar.MINUTE);//得到當前時間的分鐘數
            int hours = mCalendar.get(Calendar.HOUR);//得到當前時間的小時數
            int second=mCalendar.get(Calendar.SECOND);//得到當前時間的秒數

            canvas.save();
            Float minutesDegree = minutes / 60f * 360;//得到當前分鐘數所佔的角度
            canvas.rotate(minutesDegree, width / 2, heigth / 2);
            canvas.drawLine(width / 2, heigth / 2 - 200, width / 2, heigth / 2 + 20, mPaintLine);
            canvas.restore();

            canvas.save();
            Float hoursDegree = (hours * 60 + minutes) / 12f / 60 * 360;//得到當前小時數所佔的角度
            canvas.rotate(hoursDegree, width / 2, heigth / 2);
            canvas.drawLine(width / 2, heigth / 2 - 100, width / 2, heigth / 2 + 30, mPaintLine);
            canvas.restore();

            canvas.save();
            Float secondDegree = second/60f*360;//得到當前小時數所佔的角度
            canvas.rotate(secondDegree, width / 2, heigth / 2);
            canvas.drawLine(width / 2, heigth / 2 - 240, width / 2, heigth / 2 + 40, mPaintLine);
            canvas.restore();

    }
}

圓形ImageView

package com.xc.xcskin.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * 自定義的圓形ImageView，可以直接當組件在佈局中使用。
 * @author caizhiming
 *
 */
public class XCRoundImageView extends ImageView{

    private Paint paint ;

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

    public XCRoundImageView(Context context, AttributeSet attrs) {  
        this(context, attrs,0);  
    }  

    public XCRoundImageView(Context context, AttributeSet attrs, int defStyle) {  
        super(context, attrs, defStyle); 
        paint = new Paint();

    }  

    /**
     * 繪製圓形圖片
     * @author caizhiming
     */
    @Override  
    protected void onDraw(Canvas canvas) {  

        Drawable drawable = getDrawable();  
        if (null != drawable) {  
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();  
            Bitmap b = getCircleBitmap(bitmap, 14);  
            final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight());  
            final Rect rectDest = new Rect(0,0,getWidth(),getHeight());
            paint.reset();  
            canvas.drawBitmap(b, rectSrc, rectDest, paint);  

        } else {  
            super.onDraw(canvas);  
        }  
    }  

    /**
     * 獲取圓形圖片方法
     * @param bitmap
     * @param pixels
     * @return Bitmap
     * @author caizhiming
     */
    private Bitmap getCircleBitmap(Bitmap bitmap, int pixels) {  
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),  
                bitmap.getHeight(), Config.ARGB_8888);  
        Canvas canvas = new Canvas(output);  

        final int color = 0xff424242;

        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());  
        paint.setAntiAlias(true);  
        canvas.drawARGB(0, 0, 0, 0);  
        paint.setColor(color);  
        int x = bitmap.getWidth(); 

        canvas.drawCircle(x / 2, x / 2, x / 2, paint);  
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));  
        canvas.drawBitmap(bitmap, rect, rect, paint);  
        return output;  


    }  
}

完成這個自定義類後，就可以使用這個類了，就是把這個當組件在佈局中使用即可