之前只是零散的學習過自定義View的相關知識,過後就忘的差不都了,從今天起,記錄下自己學過的自定義View知識,可能寫的比較簡單
自定義View 起步
創建一個類繼承至View ,重寫它的構造方法
public class PracticeView extends View {
public PracticeView(Context context) {
this(context,null);
}
public PracticeView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public PracticeView(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
這就完成了一個簡單的自定義View,在OnDraw()方法中就可以根據我們的需求來繪製各種內容了。關於onMeasure()和onLayout()方法之後在講解,今天只關注第三個方法onDraw();
在自定義View中Canvas 就相當於一個畫布,其中繪製圖形我們還需要一個重要的工具畫筆
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
一般在第三個構造方法中 去new 一個Paint 對象,加上Paint.ANTI_ALIAS_FLAG參數的意思就是開啓抗鋸齒來讓圖形和文字的邊緣更加平滑,另外,你也可以使用 Paint.setAntiAlias(boolean aa) 來動態開關抗鋸齒。抗鋸齒的效果如下:![這裏寫圖片描述]()
在未開啓的時候就有一種毛邊的效果,大多數情況下它都應該是開啓的;但在極少數的某些時候,你還真的需要把它關閉。
使用Canvas 繪製基礎圖形
Canvas.drawColor(@ColorInt int color) 顏色填充
整個繪製區域統一塗上指定的顏色。
canvas.drawColor(Color.RED)
類似的方法還有 drawRGB(int r, int g, int b) 和 drawARGB(int a, int r, int g, int b) ,它們和 drawColor(color)作用都是一樣的
int a, int r, int g, int b
ARGB 是一種色彩模式,也就是RGB色彩模式附加上Alpha(透明度)
a 透明度 r RED 紅色 g GREEN 綠色 b BLUE 藍色
通過 r g b 三原色+透明度 來組成各種顏色值
drawCircle(float centerX, float centerY, float radius, Paint paint) 畫圓
參數解釋 : 1 圓心 x 座標 ,2 圓心 y 座標 ,3 圓的半徑 4 畫筆
paint.setStyle(Paint.Style.FILL)
paint.setColor(Color.BLACK)
canvas.drawCircle(200,150,100,paint)
繪製一個圓心爲(200,150),半徑爲100,黑色的圓
![這裏寫圖片描述]()
Paint.setColor(int color) 設置畫筆顏色
Paint 最常用的方法之一,用來設置繪製內容的顏色
Paint.setStyle(Style style) 設置繪製模式
- paint.setStyle(Paint.Style.STROKE) 畫線模式(即勾邊模式)
- paint.setStyle(Paint.Style.FILL); 填充模式
- paint.setStyle(Paint.Style.FILL_AND_STROKE); 上述兩模式的合集,一起作用
如果你想繪製空心圓(或者叫環形)
paint.setStyle(Paint.Style.STROKE)
paint.setColor(Color.BLACK)
canvas.drawCircle(500,150,100,paint)
![這裏寫圖片描述]()
Paint.setStrokeWidth(float width)
設置線條的寬度
在上述代碼中加上一句
paint.setStyle(Paint.Style.STROKE)
paint.setColor(Color.BLACK)
paint.setStrokeWidth(20)
canvas.drawCircle(500,150,100,paint)
![這裏寫圖片描述]()
drawRect(float left, float top, float right, float bottom, Paint paint) 畫矩形
參數 left 矩形左上角頂點 x座標
top 矩形左上角頂點 y座標
right 矩形右下角頂點 x座標
bottom 矩形右下角頂點 y座標
paint.setStyle(Paint.Style.FILL)
canvas.drawRect(100, 100, 500, 500, paint)
paint.setStyle(Paint.Style.STROKE)
canvas.drawRect(700, 100, 1100, 500, paint)
![這裏寫圖片描述]()
重載方法
drawRect(RectF rect, Paint paint) 和 drawRect(Rect rect, Paint paint)
Rect rect = new Rect(100, 100, 500, 500);
canvas.drawRect(rect, paint);
RectF rectF = new RectF(700, 100, 1100, 500);
canvas.drawRect(rectF, paint);
drawPoint(float x, float y, Paint paint) 畫點
paint.setStrokeCap(Paint.Cap.ROUND)
paint.setStrokeWidth(20)
canvas.drawPoint(200,200,paint)
![這裏寫圖片描述]()
paint.setStrokeCap(Paint.Cap.BUTT)
paint.setStrokeWidth(20)
canvas.drawPoint(400,200,paint)
![這裏寫圖片描述]()
drawOval(float left, float top, float right, float bottom, Paint paint) 畫橢圓
paint.setStyle(Paint.Style.STROKE)
RectF rectF= new RectF(200,200,600,400)
canvas.drawOval(rectF,paint)
![這裏寫圖片描述]()
drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 畫線
canvas.drawLine(200,200,600,60,paint)
![這裏寫圖片描述]()
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 畫圓角矩形
參數 left 矩形左上角頂點 x座標
top 矩形左上角頂點 y座標
right 矩形右下角頂點 x座標
bottom 矩形右下角頂點 y座標
rx 和 ry 是圓角的橫向半徑和縱向半徑。
canvas.drawRoundRect(200,200,600,400,20,20,paint)
![這裏寫圖片描述]()
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 繪製弧形或扇形
drawArc() 是使用一個橢圓來描述弧形的。left, top, right, bottom 描述的是這個弧形所在的橢圓;startAngle 是弧形的起始角度(x 軸的正向,即正右的方向,是 0 度的位置;順時針爲正角度,逆時針爲負角度),sweepAngle 是弧形劃過的角度;useCenter 表示是否連接到圓心,如果不連接到圓心,就是弧形,如果連接到圓心,就是扇形。
paint.setStyle(Paint.Style.FILL)
canvas.drawArc(200, 100, 800, 500, -110, 100, true, paint)
canvas.drawArc(200, 100, 800, 500, 20, 140, false, paint)
paint.setStyle(Paint.Style.STROKE)
canvas.drawArc(200, 100, 800, 500, 180, 60, false, paint)
![這裏寫圖片描述]()