1.繼承View並複寫建構方法(第一種 new時調用 第二種在xml時調用 第三種在有設定屬性時調用)

class CircleView(context: Context, attrs: AttributeSet?, defStyle: Int) : View(context, attrs, defStyle) {
constructor(context: Context) : this(context, null, 0)
constructor(context: Context, attrs: AttributeSet) : this(context, attrs, 0)
}

2.複寫onDraw方法來繪製自己想要的View

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

   val paddingLeft = paddingLeft
   val paddingRight = paddingRight
   val paddingTop = paddingTop
   val paddingBottom = paddingBottom

   val width = width - paddingLeft - paddingRight
   val height = height - paddingTop - paddingBottom

   val r = min(width, height) / 2
   canvas?.apply {
      drawCircle((paddingLeft + width)/2.toFloat(), (paddingTop + height)/2.toFloat(), r.toFloat(), paint)
   }
}

3.設定自定義屬性之前先建立/values/xml 之後就可以在xml調用

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleView">
      <attr name="circle_color" format="color"/>
   </declare-styleable>
</resources>

4.要讓自定義屬性有用 需要在程式碼裡面聲明

val type = context.obtainStyledAttributes(attrs, R.styleable.CircleView)
val color = type.getColor(R.styleable.CircleView_circle_color, Color.RED)
type.recycle()
setColor(color)
strokeWidth = 5f
style = Paint.Style.FILL

5.kotlin&xml完整程式碼

kotlin

class CircleView(context: Context, attrs: AttributeSet?, defStyle: Int) : View(context, attrs, defStyle) {
 constructor(context: Context) : this(context, null, 0)
 constructor(context: Context, attrs: AttributeSet) : this(context, attrs, 0)

  private val paint = Paint()
    init {
         paint.apply {
             val type = context.obtainStyledAttributes(attrs, R.styleable.CircleView)
             val color = type.getColor(R.styleable.CircleView_circle_color, Color.RED)
             type.recycle()
             setColor(color)
             strokeWidth = 5f
             style = Paint.Style.FILL
        }
  }

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

       val paddingLeft = paddingLeft
       val paddingRight = paddingRight
       val paddingTop = paddingTop
       val paddingBottom = paddingBottom

       val width = width - paddingLeft - paddingRight
       val height = height - paddingTop - paddingBottom

       val r = min(width, height) / 2
       canvas?.apply {
           drawCircle((paddingLeft + width)/2.toFloat(), (paddingTop + height)/2.toFloat(), r.toFloat(), paint)
      }
    }
}

xml

<view
   android:id="@+id/view"
   app:circle_color="#ffff00"
   class="com.fly.fingertest.CircleView"
   android:layout_width="wrap_content"
   android:layout_height="200dp"
   android:padding="20dp"
   android:background="#000000"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintHorizontal_bias="1.0"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent" />

自定義屬性xml

<resources>
  <declare-styleable name="CircleView">
     <attr name="circle_color" format="color"/>
  </declare-styleable>
</resources>