重要：自定義view時刻牢記的模式：
1 MeasureSpec.EXACTLY：
使用measureSpec中size的值作為寬高的精確值當我們將控件的layout_width或layout_height指定為具體數值時如andorid:layout_width="50dip"，或者為FILL_PARENT是，都是控件大小已經確定的情況，都是精確尺寸。
2 MeasureSpec.AT_MOST：
使用measureSpec中size的值作為最大值，采用不超過這個值的最大允許值
當控件的layout_width或layout_height指定為WRAP_CONTENT時，控件大小一般隨著控件的子空間或內容進行變化，此時控件尺寸只要不超過父控件允許的最大尺寸即可。因此，此時的mode是AT_MOST，size給出了父控件允許的最大尺寸。
3 MeasureSpec.UNSPECIFIED是未指定尺寸，這種情況不多
<br /><br />
開始正文
繪制圓弧函數詳細分析--drawArc（）
public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
參數：（中文）
oval - 用于確定圓弧形狀與尺寸的橢圓邊界（即橢圓外切矩形）
startAngle - 開始角度（以時鐘3點的方向為0°，逆時針為正方向）
sweepAngle - *** 掃過角度***（以時鐘3點的方向為0°，逆時針為正方向）
useCenter - 是否包含圓心
paint - 繪制圓弧的畫筆 2.繪制圓弧的原理
kotlin版本
class Taiji @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : View(context, attrs, defStyleAttr) {
private var whitePaint: Paint? = null //白色畫筆
private var blackPaing: Paint? = null //黑色畫筆
private var degrees = 0f
//初始化畫筆函數
private fun initPaints() {
whitePaint = Paint()
whitePaint!!.isAntiAlias = true
whitePaint!!.color = Color.WHITE
blackPaing = Paint(whitePaint)
blackPaing!!.color = Color.BLACK
}
init {
initPaints()
}
fun setDegrees(degrees: Float) {
this.degrees = degrees
invalidate()
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
val measuredHeight = measuredHeight
}
override fun onDraw(canvas: Canvas) {
val width = width //畫布寬度 view設置的寬度
val height = height //畫布高度 view設置的高度
canvas.translate((width / 2).toFloat(), (height / 2).toFloat()) //將畫布移動到中心
canvas.drawColor(Color.GRAY) //繪制背景色
//在繪制完背景色后調用即可
canvas.rotate(degrees)
//半徑
val radius = Math.min(width, height) / 2 - 100
val rf = RectF((-radius).toFloat(), (-radius).toFloat(), radius.toFloat(), radius.toFloat())
canvas.drawArc(rf, -90f, 180f, true, whitePaint!!)
canvas.drawArc(rf, 90f, 180f, true, blackPaing!!)
//繪制兩個小圓
val smallRadius = radius / 2 //小圓半徑為大圓的一般
canvas.drawCircle(0f, (-smallRadius).toFloat(), smallRadius.toFloat(), blackPaing!!)
canvas.drawCircle(0f, smallRadius.toFloat(), smallRadius.toFloat(), whitePaint!!)
//太極的小圓
val smallcicleRadius = smallRadius / 4 //小圓半徑為大圓的一般
canvas.drawCircle(0f, (-smallRadius).toFloat(), smallcicleRadius.toFloat(), whitePaint!!)
canvas.drawCircle(0f, smallRadius.toFloat(), smallcicleRadius.toFloat(), blackPaing!!)
}
}
java版本
package com.viewtest;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by Administrator on 2017/6/19.
*/
public class TaijiView extends View{
private Paint whitePaint; //白色畫筆
private Paint blackPaing; //黑色畫筆
private float degrees = 0;
public TaijiView(Context context) {
this(context, null);
}
public TaijiView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TaijiView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaints();
}
//初始化畫筆函數
private void initPaints() {
whitePaint = new Paint();
whitePaint.setAntiAlias(true);
whitePaint.setColor(Color.WHITE);
blackPaing = new Paint(whitePaint);
blackPaing.setColor(Color.BLACK);
}
public void setDegrees(float degrees) {
this.degrees = degrees;
invalidate();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
int measuredHeight = getMeasuredHeight();
}
@Override
protected void onDraw(Canvas canvas) {
int width = getWidth(); //畫布寬度 view設置的寬度
int height = getHeight(); //畫布高度 view設置的高度
canvas.translate(width/2,height/2); //將畫布移動到中心
canvas.drawColor(Color.GRAY); //繪制背景色
//在繪制完背景色后調用即可，旋轉的關鍵
canvas.rotate(degrees);
//半徑
int radius = Math.min(width, height) / 2 - 100;
RectF rf = new RectF(-radius,-radius,radius,radius);
canvas.drawArc(rf,-90,180,true,whitePaint);
canvas.drawArc(rf,90,180,true,blackPaing);
//繪制兩個小圓
int smallRadius = radius / 2; //小圓半徑為大圓的一般
canvas.drawCircle(0, -smallRadius, smallRadius, blackPaing);
canvas.drawCircle(0, smallRadius, smallRadius, whitePaint);
//太極的小圓
int smallcicleRadius = smallRadius / 4; //小圓半徑為大圓的一般
canvas.drawCircle(0, -smallRadius, smallcicleRadius, whitePaint);
canvas.drawCircle(0, smallRadius, smallcicleRadius, blackPaing);
}
}
測試activity：
class TaijiActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_taiji)
var handler: Handler = object : Handler() {
var degree: Float = 0f
override fun handleMessage(msg: Message) {
degree += 10f
taiji.setDegrees(degree)
this.sendEmptyMessageDelayed(0, 80)
}
}
handler.sendEmptyMessageDelayed(0, 20)
}
}
自定義view的最佳開始示例
效果圖：
熟悉cavas的方法：drawArc
GIF_20170619_155609.gif
參考鏈接：http://www.gcssloop.com/customview/taiji
這位大神寫的自定義view的教程還是很清晰明了的，感謝大佬拭心
<br /><br />
最后歡迎加入Kotlin QQ群，一起討論學習：
Paste_Image.png
歡迎關注 微信公號
android頻道
