自定义view基础知识——drawArc()

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