重要：自定义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频道
网友评论