ViewのonDrawでいくつかアークの円を描く

onDraw()を通じて、いくつかアークの円を一緒に描きましょう。

###Viewのサブクラスを作る

class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
    }
}

###Viewを作る時、普段はdpを使います。
KotlinのExtension Functions/Propertiesでpx→dpに切替

val Float.px
    get()=TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            this,
            Resources.getSystem().displayMetrics
    )
val Int.dp
get() = this.toFloat().px

###円を作る

//丸のredius
private val RADIUS=150f.px

class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    private val paint= Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onDraw(canvas: Canvas) {
        canvas.drawArc(width/2f- RADIUS,height/2f- RADIUS,width/2f+ RADIUS,height/2f+ RADIUS
                ,0f,360f,true,paint)

    }
}

###drawArcのstartAngleとsweepAngleの属性を設定すると角度が控えます
ペンのカラーを変化します

//円のredius
private val RADIUS=150f.px
//角度の設定
private val ANGLES= floatArrayOf(60f,90f,150f,60f)
//色の設定
private val COLORS= listOf(Color.parseColor("#C21858"), Color.parseColor("#00ACC1")
        , Color.parseColor("#558B2F"), Color.parseColor("#5D4037"))
class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    private val paint= Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onDraw(canvas: Canvas) {

        //開始角度　startAngle
        //完了角度 sweepAngle
        var startAngle=0f

        for((index,angle) in ANGLES.withIndex()){
            //ペンのカラーの設定
            paint.color= COLORS[index]

            canvas.drawArc(width/2f- RADIUS,height/2f- RADIUS,width/2f+ RADIUS,height/2f+ RADIUS
                    ,startAngle,angle,true,paint)
            //開始角度の増加
            startAngle+=angle
        }


    }
}

###引き続き、一つのアークを出します。アークを出すために、角度の設定が必要です。

//丸のredius
private val RADIUS=150f.px
private val OFFSET_LENGTH=20.dp
//角度の設定
private val ANGLES= floatArrayOf(60f,90f,150f,60f)
//色の設定
private val COLORS= listOf(Color.parseColor("#C21858"), Color.parseColor("#00ACC1")
        , Color.parseColor("#558B2F"), Color.parseColor("#5D4037"))
class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    private val paint= Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onDraw(canvas: Canvas) {

        //開始角度　startAngle
        //完了角度 sweepAngle
        var startAngle=0f

        for((index,angle) in ANGLES.withIndex()){
            //ペンのカラーの設定
            paint.color= COLORS[index]
            if (index==1){
                //canvasの移動の距離計算　三角関数
                canvas.translate(OFFSET_LENGTH* cos(Math.toRadians(startAngle+angle/2f.toDouble())).toFloat(),
                        OFFSET_LENGTH* sin(Math.toRadians(startAngle+angle/2f.toDouble())).toFloat()
                )
            }



            canvas.drawArc(width/2f- RADIUS,height/2f- RADIUS,width/2f+ RADIUS,height/2f+ RADIUS
                    ,startAngle,angle,true,paint)
            //開始角度の増加
            startAngle+=angle
        }


    }
}

###何でこのようななりましたか
canvaの背景第一回を変更したあと、戻るのが必要です。
canvas.save()とcanvas.restore()を使えば解消できます。

//丸のredius
private val RADIUS=150f.px
private val OFFSET_LENGTH=20.dp
//角度の設定
private val ANGLES= floatArrayOf(60f,90f,150f,60f)
//色の設定
private val COLORS= listOf(Color.parseColor("#C21858"), Color.parseColor("#00ACC1")
        , Color.parseColor("#558B2F"), Color.parseColor("#5D4037"))
class MyPieView(context: Context?, attrs: AttributeSet?):
View(context,attrs){

    private val paint= Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onDraw(canvas: Canvas) {

        //開始角度　startAngle
        //完了角度 sweepAngle
        var startAngle=0f

        for((index,angle) in ANGLES.withIndex()){
            //ペンのカラーの設定
            paint.color= COLORS[index]
            if (index==1){
                //canvasの移動の距離計算　三角関数
                canvas.save()
                canvas.translate(OFFSET_LENGTH* cos(Math.toRadians(startAngle+angle/2f.toDouble())).toFloat(),
                        OFFSET_LENGTH* sin(Math.toRadians(startAngle+angle/2f.toDouble())).toFloat()
                )
            }
            canvas.drawArc(width/2f- RADIUS,height/2f- RADIUS,width/2f+ RADIUS,height/2f+ RADIUS
                    ,startAngle,angle,true,paint)
            //開始角度の増加
            startAngle+=angle
            if (index==1){
                canvas.restore()
            }
        }


    }
}

###具体的なソースを説明ソースに置きました。