เข้าใจการทำ Selector แบบ Ripple effect

Android developer ทุกคนคงไม่มีใครไม่รู้จัก selector กันเนาะย้อนไปตอน android lollipop เรามีสิ่งที่เรียกว่า Material Design เกิดขึ้น ทำให้เรามี design guidelines ใหม่ให้เราได้ follow กัน ไม่ว่าจะเป็นเรื่อง สี, layout, animation และอื่นๆอีกเยอะแยะ ทำให้ผู้ใช้มีประสบการณ์การงานแอปเราดียิ่งขึ้น (UX) ตามต่อกันได้ที่

Introduction - Material Design

ซึ่งหนึ่งในเรื่องที่เราจะหยิบมาพูดในวันนี้คือ ripple effect ใน material design นั่นเองว่ามันมีหลักการเขียน selector อย่างไร 😎

ภาพด้านซ้ายเป็น selector แบบธรรมดาไม่มีอะไร พอเป็นด้านขวาเราใส่ selector แบบ ripple effect เข้าไปก็

ทำให้ UX ในการใช้ ดูดีขึ้น ดูมีมิติ น่ากดมากขึ้น

ซึ่งใครหลายคนอาจมองข้ามจุดนี้ไป บอกเลยว่าแอบสำคัญมากนะมันสามารถเปลี่ยนอารมณ์การใช้งานเราทั้งแอปได้เลย

แต่มีข้อแม้อย่างหนึ่งของการใช้คือ ต้องเป็น api version 21 ขึ้นไปนะ

เพราะมันเป็น feature ที่มาพร้อมกับ android lollipop

น่าจะพอเห็นความสำคัญของมันกันไม่มากก็น้อย ต่อไปก่อนจะลงโค้ดกันเราต้องเข้าใจเรื่อง mask เสียก่อน

Clipping mask (หน้ากาก)

ภาพจาก Korean sister juney ❤️

concept ของ mask ใครเคยใช้ photoshop หรือ illustrator มามันคือสิ่งเดียวกันเลย ซึ่งทาง android ก็ใช้เทคนิคนี้ในการทำ selector แบบ ripple effect เช่นกัน

มันคือการตัดภาพให้เท่ากับรูปร่างของ shape ด้านบนนั่นเอง

(ไม่สนเรื่องสีนะสีอะไรก็ได้)

แค่นี้แหละง่ายมาก

มาดูในโค้ดกัน

ไฟล์ที่เราใช้ตามนี้ตามหลักของการทำ selector

• normal state
• focused state
• presses state

ให้สังเกตที่ไฟล์ lollipop_round_primary_selector.xml แยกไว้สองที่เพื่อแยก selector แบบธรรมดา กับ selector แบบ ripple effect นั่นเอง

drawable-v21/lollipop_round_primary_selector

ดูบรรทัดที่ 5

android:id="@android:id/mask" (ทำให้ item เป็น mask)

เราแปะ mask item ไว้ด้านบนสุดเพื่อให้ ripple effect มันอยู่ในกรอบของ “@drawable/lollipop_round_primary_mask” นั่นเอง

drawable-v21/lollipop_round_primary_mask

ซึ่ง shape ที่เราเอามาทำเป็น mask คือ rectangle shape สีดำธรรมดา (จริงสีอะไรก็ได้ไม่มีผลอะไร)

พอทำเสร็จเราก็จะได้ออกมาเป็น ripple สวยงามแบบนี้

คำถามคือถ้าเราเปลี่ยน mask เป็นอย่างอื่นหละมันจะเป็นอย่างไร

งั้นเรามาลองเปลี่ยนเป็นวงกลมธรรมดากัน

don’t do this

ripple effect จะอยู่แค่ในวงกลมนั่นเองซึ่งไม่ควรทำเนาะ

สรุป: เพราะฉะนั้น ripple effect มันจะอยู่ในกรอบ ของ mask เท่านั้น 😎

Summary

UX ของผู้ใช้เป็นเรื่องที่สำคัญมากที่เราควรตระหนักกันให้มากๆนะ

การเปลี่ยนอะไรนิดหน่อยในแอปเรา ไม่ว่าจะเป็น สี layout หรือ animiation ต่างๆ ก็สามารถส่งผลต่อผู้ใช้ได้โดยตรง อาจะทำให้แย่ลงหรือดีขึ้นก็ขึ้นอยู่กับว่าเราใช้มันถูกที่ถูกเวลาหรือไม่มันจึงเกิด design guidelines ต่างๆให้เราได้ follow กันซึ่งเราไม่ควรมองข้ามนะ

วันนี้พอแค่นี้เจอกันบล็อคหน้าเนาะ 😎

เข้าไปติดตามกันได้ https://www.facebook.com/thekhaeng.io/

อย่าลืม 👏 ข้างล่าง และ share ให้มนุษย์ Android คนอื่นด้วยหละ 😎