Android - 2 Type of CustomView

ถ้ามั่นใจว่าไม่มี Library ที่ตอบโจทย์ หรืออยากจะสร้าง View ตัวนึงไว้แสดงใน Layout 

( และช่วยป้องกันไฟล์ View XML ของเรา จากการ Decompile ให้แกะยากขึ้นไปอีก ) ก็มีทางเลือกก็คือการทำ CustomView นี้เอาเองนี้แลครับ 


การสร้าง Custom UI Component 2 วิธี

วิธีแรก - ใช้วิธีสืบทอดจากคลาสแม่เช่น
EditText , DialogFragment , Button, TextView , RecyclerView
CheckBox,  RadioButton, Gallery, Spinner บลาๆ 
เราไม่จำเป็นต้องวาดมุมมองทั้งหมด
และเราสามารถ override method จากคลาสแม่เพื่อ customize view ต่อได้ (อยู่ล่างๆนะ)

วิธีที่สอง - สืบทอดจากคลาสชื่อ "View" โดยตรง
ต้องใช้ onDraw() เพื่อวาด View ใหม่ทั้งหมด

เพิ่มเติม Drawing an extended View



เริ่มที่ วิธีแรก - Customizing a View subclass

เราสามารถใช้คลาสที่จะสร้างนี้เพื่อกำหนด appearance (รูปทรง) และ attributes (คุณสมบัติ)
โดยเราสามารถ override methods ที่มีจากคลาสแม่ 
(ใครอ่านแล้วงง แนะนำศึกษาเรื่อง OOP ก่อนนะครับ) 



จากตัวอย่างโค้ดด้านล่าง (โค้ดเก่า ดูพอเป็นตัวอย่างนะครับ)
เช่น AppCompatEditText  มีคลาส TextView เป็นคลาสแม่


ดูได้จากในนี้ : https://developer.android.com/reference/android/support/v7/widget/AppCompatEditText

เราสามารถย้อนกลับไปใช้ setCompoundDrawablesRelativeWithIntrinsicBounds 

ซึ่งเป็น Public Method ของ TextView ดูได้จาก


class EditTextWithClear : AppCompatEditText {

    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
        if(text?.length == 1){

            val mClearButtonImage = ResourcesCompat.getDrawable(resources, R.drawable.ic_cancel, null)

            setCompoundDrawablesRelativeWithIntrinsicBounds(
                null,          // Start of text.
                null,          // Above text.
                mClearButtonImage// End of text.
                null        // below text.
            )
        }
        return super.onKeyDown(keyCode, event)
    }
}


วิธีนำไปใช้ใน Layout file

<com.example.trymycustomview.EditTextWithClear
      android:maxLength="6"
      android:layout_width="300dp"
      android:layout_height="wrap_content"
      android:id="@+id/edtWithClear"/>



Ref : https://google-developer-training.github.io/android-developer-advanced-course-concepts/unit-5-advanced-graphics-and-views/lesson-10-custom-views/10-1-c-custom-views/10-1-c-custom-views.html#customizing-subclass