1. 程式人生 > >安卓自定義View基礎-繪製點、線、矩形、圓形等

安卓自定義View基礎-繪製點、線、矩形、圓形等

為什麼要自定義View?因為我們在開發中,經常有各種各樣的需求,但是原生的控制元件畢竟只能滿足我們常用的需求,所以我們需要根據自身當前的需求來定製我們的View,話不多說,一步一步來吧。

1.建立類:

建立一個類,暫且將這個類命名為CustomView,並繼承View,此時會提示需要過載它的建構函式,我們可以看到View的建構函式如下(四種):

    public CustomView(Context context) {super(context);}
    public CustomView(Context context, @Nullable AttributeSet attrs)        
    {super
(context, attrs); } public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);} public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);}

第四個建構函式我們先不考慮,是API21新增的
第三個建構函式的第三個引數一般也用不著,暫時不看
第二個建構函式一般在layout檔案中使用的時候會呼叫,關於它的所有屬性(包括自定義屬性)都會包含在attrs中傳遞進來。
第一個建構函式一般在直接New一個View的時候呼叫。

比如說:
以下情況會呼叫第一種建構函式:

//在Activity中
CustomView customView = new CustomView(this);

以下情況會呼叫第二種建構函式:

//在layout檔案中 - 格式為: 包名.View名
<com.zmj.study.CustomView
  android:layout_width"wrap_content"
android:layout_height"wrap_content"/>

2.Canvas:

顧名思義,是一個畫布,我們可以在畫布上繪製我們想要的圖形,它可以是一個點、線、矩形、圓形等。

我們先重寫父類onDraw方法:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
}

然後我們先試試使用cancas繪製一個背景:

//繪製紅色背景
canvas.drawColor(Color.RED); 

Activity完整程式碼如下:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //在Activity中
        CustomView customView = new CustomView(this);
        setContentView(customView);
    }
}

效果如下:

2.建立畫筆:

/**
* 1.建立一個畫筆
*/
private Paint mPaint;
/**
* 2.初始化畫筆
*/
private void initPaint() {
   mPaint = new Paint();
   //設定畫筆顏色
   mPaint.setColor(Color.BLACK);
   //STROKE                //描邊
   //FILL                  //填充
   //FILL_AND_STROKE       //描邊加填充
   //設定畫筆模式
   mPaint.setStyle(Paint.Style.FILL);
   //設定畫筆寬度為30px
   mPaint.setStrokeWidth(30f);
}

建立完畫筆,就可以使用畫筆在畫布Canvas上繪製了。

3.繪製:

繪製點:

繪製一個點:

//在座標200(X),200(Y)處繪製一個點
canvas.drawPoint(200, 200, mPaint);

繪製一組點:

//繪製一組點,座標一一對應
canvas.drawPoints(new float[]{
         500, 500,
         500, 600,
         500, 700
}, mPaint);

效果如下:

繪製直線(兩點確定一線):

//繪製一條直線(兩點確定一線)
canvas.drawLine(300, 300, 500, 600, mPaint);
//繪製一組線
canvas.drawLines(new float[]{
        100,800,500,800,
        100,1000,500,1000
},mPaint);

效果如下:

繪製矩形:

//第一種:
canvas.drawRect(100, 100, 800, 400, mPaint);
//第二種:
canvas.drawRect(new Rect(100, 100, 800, 400), mPaint);
//第三種:Rect和RectF的區別就是一個是int一個是浮點型
canvas.drawRect(new RectF(100, 100, 800, 400), mPaint);

效果如下:

繪製圓形矩形:

//第一種:rx 80 ry 70
canvas.drawRoundRect(new RectF(100, 100, 800, 400), 80, 70, mPaint);
//第二種://必須>=API21
canvas.drawRoundRect(100,100,800,400,30,30,mPaint);

效果如下:

繪製橢圓:

//第一種:
canvas.drawOval(new RectF(100, 100, 800, 400), mPaint);
//第二種:
canvas.drawOval(100, 100, 800, 400, mPaint);

效果如下:

繪製圓形:

//繪製圓形:圓心座標在500*500,半徑是400
canvas.drawCircle(500, 500, 400, mPaint);

效果如下:

繪製圓弧:

//第一種:起始角度為0度,掃過90度的圓弧  false不使用中心點
canvas.drawArc(new RectF(100, 100, 600, 600), 0, 90, false, mPaint);
//第二種:起始角度為0度,掃過90度的圓弧  true使用中心點
canvas.drawArc(new RectF(100, 100, 600, 600), 0, 90, true, mPaint);

效果如下:

false不使用中心點:

true使用中心點:

總結:

上述全部是自定義View的基本用法,但是我相信那些複雜的View也是通過基礎來構思的,慢慢來吧。

原始碼下載