เบื้องหลังการสร้าง UI สำหรับคูปองเพื่อใช้งานในแอป LINE MAN ที่เป็นมิตรต่อเพื่อนร่วมทีม — ตอนที่ 1
สวัสดีผู้อ่านประจำสำนักพิมพ์ LINE MAN Wongnai ทุก ๆ คนครับ ผมชื่อ “สมเกียรติ กิจวงศ์วัฒนะ” หรือจะเรียกว่า “เอก” ก็ได้นะ เป็น Senior Software Engineer ที่คอยดูแลและพัฒนาแอป LINE MAN บน Android
และบทความนี้ก็เป็นบทความแรกของผมในฐานะนักเขียนบน LINE MAN Wongnai ก็ขอฝากเนื้อฝากตัวด้วยนะครับ
บทความทั้งหมดของชุดนี้
ย้อนกลับไปเมื่อปี 2020 (ปีที่แล้ว)
ทีมของผมได้รับภารกิจให้ทำฟีเจอร์ใหม่ในแอป LINE MAN ที่มีชื่อว่า Coupon Book เพื่อให้ผู้ใช้จัดการกับคูปองได้สะดวกมากขึ้น ดูรายละเอียดในการใช้คูปอง และสามารถเลือกคูปองที่ต้องการใช้งานไว้ล่วงหน้าได้
ทั้งนี้ก็เพราะว่าคูปองก็เป็นหนึ่งในหัวใจสำคัญของการใช้งานแอป LINE MAN เพราะในแต่ละวันก็จะมีผู้ใช้ที่สั่งอาหารพร้อมกับใช้คูปองสำหรับส่วนลดค่าอาหารเป็นจำนวนมาก ดังนั้นการมีระบบที่จะช่วยให้ผู้ใช้จัดการกับคูปองได้ง่ายขึ้น ก็จะช่วยเพิ่มโอกาสในการสั่งอาหารให้เยอะมากขึ้น อีกทั้งยังช่วยลดขั้นตอนในการสั่งอาหารที่มีการใช้คูปองส่วนลดได้อีกด้วย
เมื่อผู้ใช้เข้าหน้าแรกของบริการส่งอาหารใน LINE MAN ก็จะพบว่ามี UI Component สำหรับแสดงจำนวนคูปองของผู้ใช้อยู่ด้วย โดยสามารถกดเพื่อเปิดหน้า Coupon Book เพื่อดูรายละเอียดของคูปองแต่ละอัน และเลือกคูปองที่ต้องการใช้งานไว้ล่วงหน้าได้ ซึ่งคูปองที่ถูกเลือกก็จะแสดงอยู่ที่หน้าแรกของบริการส่งอาหารนั่นเอง
และเพื่อให้ขั้นตอนในการสั่งอาหารไม่มีการสะดุด จึงมีปุ่มให้ใส่คูปองอยู่ที่หน้าสรุปรายการอาหารด้วย เผื่อสำหรับกรณีที่ผู้ใช้ลืมเลือกคูปองหรือจะเปลี่ยนเป็นคูปองใบอื่นก็ได้
และนั่นก็คือที่มาของบทความนี้ที่จะมาเล่าถึงเบื้องหลังในการสร้าง UI Component ที่เป็นคูปองเพื่อใช้งานในฟีเจอร์นี้นั่นเองครับ
สร้าง UI สำหรับคูปองด้วยวิธีไหนดีนะ?
เมื่อดู UI ในแต่ละหน้าที่ต้องทำเพิ่มเข้ามาใหม่ ก็จะมี UI Component ที่เป็นลักษณะของคูปองอยู่ทั้งหมด 3 แบบด้วยกัน
และสิ่งที่ต้องทำเป็นอย่างแรกสุดก็คือพื้นหลังที่เป็นรูปคูปอง เพราะความยากไม่ได้อยู่ที่ Content ข้างใน แต่เป็นพื้นหลังรูปคูปองที่ผมจะต้องตัดสินใจก่อนว่าจะใช้วิธีไหนดี
ซึ่งพื้นหลังที่ว่านี้จะเป็น ViewGroup (View Container) เพื่อที่จะได้จัด View ที่อยู่ข้างในได้ตามใจชอบ
ใช้ภาพแบบ 9-Patch
การใช้ไฟล์ภาพนั้นเป็นวิธีที่สะดวกที่สุดในการสร้าง UI Component ซักตัว แต่สำหรับกรณีนี้การใช้ภาพที่ทำเป็น 9-Patch จะตอบโจทย์ได้ดีกว่า เพราะสามารถรองรับ Responsive ได้ดีกว่าภาพแบบทั่ว ๆ ไป โดยภาพจะยืดเฉพาะบริเวณที่เรากำหนดไว้เท่านั้น ซึ่งจะช่วยให้จุดสำคัญอย่างมุมโค้งหรือส่วนโค้งเว้าของภาพไม่ถูกยืดจนผิดสัดส่วน
โดยจะต้องเตรียมภาพคูปองทั้งหมด 4 ส่วนด้วยกัน ถึงแม้ว่าจะเป็น UI Component แค่ 3 ตัวก็ตาม เพราะมีตัวนึงที่ต้องแยกระหว่างหัวคูปองกับตัวคูปองออกเป็น 2 ส่วน เพื่อให้กำหนดความกว้างของแต่ละส่วนได้ง่าย
และการใช้ภาพในแอปบนแอนดรอยด์นั้นก็จะต้องเตรียมภาพอย่างน้อย 4 ขนาดด้วยกันเพื่อให้รองรับกับขนาดหน้าจอหลาย ๆ ขนาด (MDPI, HDPI, XHDPI และ XXHDPI)
นั่นหมายความว่าจะต้องเตรียมภาพอย่างน้อย 16 ภาพ
นอกจากนี้ก็ยังต้องเอาภาพเหล่านี้มาทำให้เป็น 9-Patch ด้วย NinePatch Editor บน Android Studio ต่อ เพราะว่า UI Design Tools ส่วนใหญ่ไม่ได้รองรับการ Export ภาพเป็นแบบ 9-Patch ในตัว จึงทำให้เสียเวลาในขั้นตอนนี้พอสมควร
และถ้ามีการเปลี่ยนแปลงภาพในภายหลังก็ต้องเสียเวลาในขั้นตอนนี้ทุก ๆ ครั้ง จึงทำให้การใช้ภาพแบบ 9-Patch ดูไม่ค่อยสะดวกซักเท่าไร
หา Open-source Library มาใช้
วิธีนี้น่าจะเป็นตัวเลือกอันดับแรกของใครหลาย ๆ คน แต่จากที่ผมได้ลองค้นหาดูก็พบว่าไม่มีตัวไหนตอบโจทย์ตามความต้องการได้ครบทั้งหมด ถึงจะหยิบ Library มาใช้ก็ต้อง Fork มาเพิ่มโค้ดเข้าไปอยู่ดี ซึ่งจะมี Trade-off สำหรับการดูแลโค้ดเหล่านั้นในอนาคตด้วย
โดยปกติแล้ว ถ้าสิ่งที่ต้องการใช้เวลาสร้างนานมาก ผมก็คงเลือก Library ซักตัวที่ตอบโจทย์มากที่สุด แต่สำหรับ UI Component ซักตัวที่มีหน้าตาเป็นรูปคูปอง มันไม่ได้ใช้เวลานานขนาดนั้นนี่นา
วาดด้วย Canvas API ไปเลยสิ
ในเมื่อไฟล์ภาพดูไม่ค่อยตอบโจทย์ ส่วน Library ของนักพัฒนาคนอื่นก็ไม่ได้ตอบโจทย์ความต้องการทั้งหมด ถ้าแบบนั้นก็วาดด้วย Canvas API ไปเลยสิ
บางคนอาจจะคิดว่าการใช้ Canvas API นั้นดูดิบเถื่อนไปหน่อย แต่จริง ๆ แล้ว Custom UI บางตัวที่ใช้งานกันในทุกวันนี้ก็ถูกสร้างมาจาก Canvas API อยู่แล้ว ดังนั้นจึงไม่ใช่เรื่องแปลกอะไรที่จะใช้ Canvas API เพื่อสร้างพื้นหลังรูปคูปองขึ้นมา
รวมไปถึงข้อดีอีกมากมายที่ทำให้ Canvas API ดูตอบโจทย์มากกว่าด้วย ไม่ว่าจะเป็น
- สร้างขึ้นมาแค่ตัวเดียว แต่สามารถใช้กับ UI Component ได้ทั้ง 3 แบบ และรองรับได้ทุกขนาดหน้าจอ
- อยากจะเปลี่ยนสีพื้นหลัง เปลี่ยนสีขอบ หรืออื่น ๆ ก็ทำได้ง่าย
- ข้อมูลของโค้ดมีขนาดเล็กกว่าการใช้ไฟล์ภาพ
- โค้ดของ Canvas API ไม่ได้ยากอย่างที่ใครหลาย ๆ คนเข้าใจ
จึงทำให้ผมตัดสินใจจะสร้าง Custom View ที่มีหน้าตาเป็นรูปคูปองขึ้นมาด้วย Canvas API
Scope ของ UI ที่จะต้องทำ
- Custom View ที่ใช้พื้นหลังเป็นรูปคูปอง
- เป็น ViewGroup จะได้ใส่ Child View ข้างในได้ตามใจชอบ
- Android Dev ในทีมต้องสามารถนำไปใช้งานได้ด้วย
(เพราะแบ่งกันทำคนละหน้า) - กำหนดสีของเส้นขอบ (Border) โดยแยกสีตาม View State ได้
- กำหนดความหนาของเส้นขอบได้
- กำหนดสีของพื้นหลัง (Background) โดยแยกสีตาม View State ได้
- กำหนดความโค้งของแต่ละมุมได้ (Corner Radius)
- กำหนดมุมที่ต้องการให้เป็นมุมโค้งแค่บางมุมได้
- กำหนดรอยแหว่งครึ่งวงกลม (Semicirle Edge) ทั้ง 4 ด้านได้
- กำหนดรัศมีของรอยแหว่งครึ่งวงกลมได้
- เป็น Custom View ที่สามารถจัดการกับ View State ของตัวเองได้
- สามารถลักษณะของคูปองกำหนดผ่าน View Attribute หรือ Style Resource ได้เพื่อลดโค้ด Kotlin ที่ไม่จำเป็นต้องเขียนทุกครั้ง
View State คือสถานะต่าง ๆ ที่แสดงให้ผู้ใช้รับรู้หรือผู้ใช้กระทำต่อ UI Component ตัวนั้น ๆ เช่น Normal State, Disable State หรือ Pressed State เป็นต้น
จึงทำให้ UI ตั้งต้นถูกออกแบบมาในลักษณะแบบนี้
จะเห็นว่ามีรอยแหว่งครึ่งวงกลมที่ขอบบนและล่างด้วย ซึ่งเป็นการทำเผื่อไว้ล่วงหน้า เนื่องจากเป็นขั้นตอนที่เพิ่มเข้ามาแต่ไม่ได้ทำให้เสียเวลามากนัก เพราะใช้หลักการเดียวกับขอบซ้ายขวา เพื่อให้ Custom View สามารถนำไป Reuse ใช้งานในรูปแบบที่แตกต่างออกไปเล็กน้อยได้ง่ายขึ้น
และสำหรับขั้นตอนในการเขียนโค้ดเพื่อสร้าง UI ที่มีหน้าตาแบบที่ต้องการก็ติดตามอ่านกันต่อได้ในบทความตอนที่ 2 นะครับ 😉
ถ้าคุณชอบบทความนี้ก็สนับสนุนด้วยการกด Clap หรือ Share ให้บทความของผม แต่ถ้าอยากมาเป็นส่วนหนึ่งของทีมพัฒนาแอป LINE MAN ผู้ช่วยส่วนตัวในชีวิตประจำวันของคนไทย ก็สามารถเข้ามาดูรายละเอียดของงานในแต่ละตำแหน่งกันได้ที่ careers.lmwn.com นะครับ 😉
