ถ้ามั่นใจว่าไม่มี 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 ดูได้จาก
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)
}
}
<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