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

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

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

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

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

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

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

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

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

Clipping mask (หน้ากาก)

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 นั่นเอง

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

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

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

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

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

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

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