มาตีบวก Android Studio กัน — Live template

Android Studio ก็เปรียบเสมือนเคียวบาโฟใน Ragnarok มันมีความสามารถมากมาย ถ้าเราอย่างใช้มันอย่างเชี่ยวชาญ แน่นอนว่าต้องอัพ Job อัพเลเวลกันก่อน มีของดีอยู่ในมือ แต่ใช้แบบ Novice ก็ไม่เกิดผลนาจา

Live template

Blog นี้จะมานำเสนอ Feature ของ Android Studio (JetBrain IDE) — หนึ่งใน Feature ที่ผมใช้บ่อยนั้นก็คือ Live template; Live template คือการกด short cut + tab จากนั้น IDE จะ Render template ให้เรา เพื่อให้เราเขียนโค้ดน้อยลง(ขี้เกียจมากขึ้น) เช่นตัวอย่างข้างล่าง

fun0 + tab

จากรูปข้างบน เราเพียงแค่กด fun0 + tab จากนั้นต้อง Android Studio ก็จะ Render code ที่เหลือให้ เห็นมั้ย ง่ายจะตาย

มี Live Template อะไรให้ใช้บ้าง?

ถ้าอยากดู list ของ Template ให้ไปที่ Android Studio →Preferences → Editor →Live Templates

Kotlin Live Template List

นี่คือ List Short Key ที่รองรับสำหรับ Kotlin ที่ติดตัวมากับ Android Sutido เลย — แน่นอนว่าทางทีม JetBrain เองก็ไม่รู้หรอกว่าโค้ดที่เราเขียนกันในโปรเจค จะมีส่วนไหนที่เป็น Template ซ้ำๆ บ้าง เขาจะได้แต่สร้าง Template ที่เป็น Common ไว้เท่านั้นเอง

Real World Problems

แต่ปัญหาที่เราพบเจอจริงๆ คือเวลาที่เราทำ แอพนึงๆ ที่มี Business logic ของมันเองชัดเจน บางครั้งทำให้เราเขียนโค้ดบางส่วนซ้ำๆ ตัวอย่างเช่น

HackerNewsKidsList 
init {
    with(binding!!.list) {
        isNestedScrollingEnabled = true

        val pixelSize = context.resources.getDimensionPixelSize(R.dimen.gap_m)
        addItemDecoration(StartOffsetItemDecoration(pixelSize))
        addItemDecoration(EndOffsetItemDecoration(pixelSize))

        val drawable = ContextCompat.getDrawable(context, R.drawable.decor_m)
        addItemDecoration(DividerItemDecoration(drawable))
        setHasFixedSize(true)

        layoutManager = LinearLayoutManager(context)

        adapter = HackerNewsKidsAdapter(shareViewModel, activity)
    }
}
UserList 1
init {
    with(binding!!.list) {
        isNestedScrollingEnabled = true

        val pixelSize = context.resources.getDimensionPixelSize(R.dimen.gap_m)
        addItemDecoration(StartOffsetItemDecoration(pixelSize))
        addItemDecoration(EndOffsetItemDecoration(pixelSize))

        val drawable = ContextCompat.getDrawable(context, R.drawable.decor_m)
        addItemDecoration(DividerItemDecoration(drawable))
        setHasFixedSize(true)

        layoutManager = LinearLayoutManager(context)

        adapter = UserListAdapter(activity)
    }
}

จากโค้ดข้างบนทุกอย่างเหมือนกันหมดยกเว้นส่วนของ Adapter — ในแอพบางแอพ Recyclerer View อาจมีเกือบร้อย เราจะมานั้งเขียนโค้ดซ้ำๆ ก็ดูจะถึกเกินไป

เราสามารถทำ Live Template ได้เองมั้ย?

แน่นอน Android Studio คือ IDE ขั้นเทพมันทำได้อยู่แล้ว

สร้าง Live Template

ผมอยากกดแค่ setlist + tab ก็อยากจะได้ template ทั้งหมด แต่แก้ Adapter เองได้ งั้นเราไปลุยสร้าง Template กันเลย

ไปที่ Android Studio →Preferences → Editor →Live Templates เลือก Kotlin เพราะเราจะเขียน template ในภาษา Kotlin

Add Custom Live Template

จากรูปข้างบนกดเครื่องหมาย + ด้านขวา แล้วเลือก 1. Live Template จากนั้น IDE จะมี from ให้เราใส่

from สำหรับ Live Template

• Abbreviation — short cut ที่เราอยากกด ในที่นี่คือ setlist
• Description — บอกว่า Short Cut นี้ทำอะไร
• Template text — ใส่โค้ดที่เป็น template ลงไป
• Application Context — ระบุ Application Context โดยการกด Define

Template text

จากโค้ดข้างบนมีตัวแปร 2 ตัวที่เราอยากแก้ไขเมื่อ Template สร้างเสร็จ นั้นคือตัวของ Recyclerer View เอง แต่ตัวของ Adapter — เราสามารถใช้ Syntax $NAME$ เพื่อให้ Cursor ของ IDE วิ่งตามเมื่อเราสร้าง Template เสร็จ สุดท้ายจะได้โค้ดดังนี้

with($LIST$) {
    isNestedScrollingEnabled = true
val pixelSize = context.resources.getDimensionPixelSize(R.dimen.gap_m)
    addItemDecoration(StartOffsetItemDecoration(pixelSize))
    addItemDecoration(EndOffsetItemDecoration(pixelSize))
val drawable = ContextCompat.getDrawable(context, R.drawable.decor_m)
    addItemDecoration(DividerItemDecoration(drawable))
    setHasFixedSize(true)
layoutManager = LinearLayoutManager(context)
adapter = $END$
}

Note $END$ ไม่ใช่ชื่อตัวแปร แต่เป็นตัวที่บอกว่า Cursor จะไปจบตรงไหน

Application Context

เราสามารกด Define แล้วเลือก Context ที่ถูกต้องได้เลยก่อนกด Save

ตัวอย่าง Application Context

การใช้งาน

ไปยัง IDE กด setlist + tab จะได้โค้ดดังนี้

ตัวอย่างการใช้งาน

จากตัวอย่าง เมื่อ Template ถูกเขียน Cursor จะวิ่งไปที่ $LIST$ ของ Template ก่อน เมื่อระบุค่า list เสร็จกด Enter Cursor จะวิ่งไปที่ $END$ — ง่ายมะ

จากนี้ไปไม่ต้องขยันเขียนโค้ดแล้วเนอะ

สรุป

Android Studio มี Feature มากมาย เหมือน item +10 เราต้องเรียนรู้ที่จะใช้มัน การใช้เครื่องมือเป็นมีชัยไปกว่าครึ่ง มันจะทำให้เราเขียนโค้ดได้เร็วกว่าที่เคยอีกหลายเท่าตัวเลย — Live Template เป็นหนึ่งใน Feature ที่ดีของ Android Studio อย่าลืมเอาไปใช้กันน้า

ขอบคุณที่อ่านจนจบจ้าาา

— จบ —