iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
1
Software Development

Kotlin 2018連續開發30天系列 第 18

Kotlin 2018連續開發30天 day 16 圓型進度條

  • 分享至 

  • xImage
  •  

自定義圓形進度條的原始碼

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import kotlinx.android.synthetic.main.activity_fingerprint2.view.*

class TextProgressCircle @JvmOverloads constructor(private val mContext: Context, attr:AttributeSet?=null):View(mContext,attr) {

val paintBack:Paint = Paint()
val paintFore:Paint = Paint()
val paintText:Paint = Paint()
var lineWidth = 50
var lineColor = Color.GREEN
var mTextSize = 50.0f
lateinit var mRect: RectF
var mProgress = 0


init {
    paintBack.isAntiAlias = true
    paintBack.color = Color.LTGRAY
    paintBack.strokeWidth = lineWidth.toFloat()
    paintBack.style = Paint.Style.STROKE

    paintFore.isAntiAlias = true
    paintFore.color = lineColor
    paintFore.strokeWidth = lineWidth.toFloat()
    paintFore.style = Paint.Style.STROKE

    paintText.isAntiAlias = true
    paintText.color = Color.BLUE
    paintText.textSize = mTextSize

}

override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)
    val width = measuredWidth
    val height =measuredHeight
    if(width <=0 || height <=0){
        return
    }
    val diameter = Math.min(width,height)
    mRect = RectF(((width - diameter)/2+lineWidth).toFloat(),((height - diameter)/2+lineWidth).toFloat(),((width + diameter)/2-lineWidth).toFloat(),((height + diameter)/2-lineWidth).toFloat())
    canvas!!.drawArc(mRect,0f,360f,false,paintBack)
    canvas!!.drawArc(mRect,0f,(mProgress*360/100).toFloat(),false,paintFore)
    val text = "${mProgress.toString()}%"
    val rect = Rect()
    paintText.getTextBounds(text,0,text.length,rect)
    val x = getWidth()/2 - rect.centerX()
    val y = getHeight()/2- rect.centerY()
    canvas.drawText(text,x.toFloat(),y.toFloat(),paintText)



}
fun setProgress(progress:Int,textSize:Float){
    mProgress=progress
    if(textSize >0){
        mTextSize = textSize
        paintText.textSize = mTextSize
    }
    invalidate()
}

fun setProgressStyle(line_width:Int,line_color:Int){
    if(line_width>0){
        lineWidth=line_width
        paintFore.strokeWidth=lineWidth.toFloat()
    }
    if(line_color>0){
        lineColor = line_color
        paintFore.color = lineColor
    }
    invalidate()
}

fun setOnNumchange(progress:Int){


}

}

XML中插入自定義view

<com.example.likunlin.firebase7.TextProgressCircle
    android:id="@+id/tpc_progress"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
    

因為要更動到UI所以必須使用到handler

private val mHandler = object: Handler(){
    override fun handleMessage(msg: Message?) {
        when(msg!!.what){
            1-> {
                tv_start.text = count.num.toString()
                tpc_progress.setProgress(count.num,100f)

            }


        }

        super.handleMessage(msg)
    }
}

最後再給予一個執行緒不斷給hander數值即可
private val text = object : Thread(){
override fun run() {
super.run()

        for (i in 0 ..100){

            try {
                Thread.sleep(10)
                val msg = Message()
                msg.what = 1
                count.num = i
                mHandler.sendMessage(msg)
            }catch (e:InterruptedException){
                e.printStackTrace()
            }

        }


    }
}


上一篇
Kotlin 2018連續開發30天 設計模式 Android 原始碼解析
下一篇
# Kotlin 2018連續開發30天 day19 第三方library Nice-spinner 下拉式選單
系列文
Kotlin 2018連續開發30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言