แนะนำ Library สำหรับทำ Loading Placeholder Animation แบบ Facebook!
โดยทั่วไปเมื่อเราเปิดแอปขึ้นมามักจะมีการโหลดข้อมูลจาก API กันก่อน ในจังหวะนี้ก็จะใช้เวลาสักครู่นึงในการโหลดข้อมูลให้เรียบร้อย ก่อนจะนำมาแสดงผลในแอปของเรา และโดยปกติเราก็จะคุ้นเคยกับการใช้งานพวก Spinner, Progress Bar กัน แต่บทความนี้เราจะมาแนะนำทุกท่านให้ลองใช้งาน การแสดงผลตอนกำลังโหลดข้อมูลแบบ Loading Placeholder Animation ที่ Facebook ใช้งานกันครับ
ในบทความนี้จะมาแนะนำ 2 Library ที่มีชื่อว่า Shimmer-android และ FiftyShadesOf โดยจะมีตัวอย่าง source code การใช้งานคร่าว ๆ สำหรับผู้อ่านที่สนใจได้นำไปศึกษา ลองใช้งานกันในท้ายบทความ
1. Shimmer-android
เป็น Library ที่พัฒนาโดย Facebook เอง การใช้งานก็ง่ายมาก แค่เพียงเราสร้าง layout ที่เราต้องการ และนำมาแปะไว้ภายใต้ ShimmerFrameLayout หลังจากนั้น เราก็แค่สั่ง startShimmer() เพื่อให้ Animation ทำงาน และแค่นี้เราก็จะได้การแสดงผล Loading Placeholder ของ content ในแอปของเราแล้ว สำหรับการใช้งานเพิ่มเติมสามารถอ่านได้จาก document ของ Shimmer page ได้เลย
เริ่มต้นการใช้งาน Shimmer
ก่อนอื่นก็ต้องทำการเพิ่ม dependency เข้าไปในโปรเจกของเรา ดังนี้
dependencies {
implementation 'com.facebook.shimmer:shimmer:0.5.0'
}จากนั้นก็แค่เพียงสร้าง view layout ที่เราต้องการไปวางภายใต้ com.facebook.shimmer.ShimmerFrameLayou และก็แค่สั่ง startShimmer() เพื่อให้ Animation ทำงาน นอกจากนี้เรายังสามารถสั่งให้ auto start ได้ด้วยการเติม app:shimmer_auto_start=”true” เข้าไปใน xml ได้ด้วย
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmer_view_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
...(your complex view here)...
</com.facebook.shimmer.ShimmerFrameLayout> ตัวอย่างโค้ดที่เราจะสั่งให้ Animation ทำงาน หรือหยุด ดังนี้
- startShimmer() เพื่อสั่งให้ Animation ทำงาน
- stopShimmer() สั่งให้ Animation หยุดทำงาน
ShimmerFrameLayout container =
(ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmer(); //สั่งให้ Content Placeholder Animation ทำงานcontainer.stopShimmer() //สั่งให้ animation หยุดทำงาน
2. FiftyShadesOf
สำหรับอีกหนึ่ง Library ที่จะนำมาแนะนำกัน คือ FiftyShadesOf การใช้งาน Library นี้จะแตกต่างกันกับ Shimmer เล็กน้อย แต่การแสดงผล Loading Placeholder ก็คล้าย ๆ กัน ก่อนอื่นเริ่มต้นจากการติดตั้ง Dependency เข้าไป ดังนี้
implementation 'com.github.florent37:fiftyshadesof:1.0.0'การใช้งาน FiftyShadesOf
เริ่มต้นด้วยการสร้าง View Layout ที่เราต้องการตอน Loading ขึ้นมาเช่นกัน และที่คำสั่ง on() เราสามารถนำ View ID, View Reference และ View Group เพิ่มเข้าไป และเมื่อสั่ง start() ก็จะทำให้ให้ Loading Placeholder Animation ทำงาน
FiftyShadesOf.with(context)
.on(R.id.view1, R.id.view2, R.id.view3) //views id
.on(view1, view2, view3) //views references
.on(viewGroup) //group of views
.except(view1, view2) //skip a view
.start();ตัวอย่างโปรเจกนี้สร้าง xml ขึ้นมาหน้าตาประมาณนี้ โดยจะแบ่งแต่ละ item เป็น คนละ view กัน จำนวน 3 view โดยมีชื่อไฟล์ ดังนี้ fiftyshadesof_line0.xml, fiftyshadesof_line1.xml, fiftyshadesof_line2.xml
หลังจากสร้าง view layout ของแต่ละ item เรียบร้อยแล้ว ก็นำมา include เข้าไปใน layout ของ Activity ที่เราต้องการ โดยกำหนด id ว่า layout, layout1, layout2 ตามลำดับ ทีนี้เวลาเราจะใช้งาน fiftyshadesof ก็เพียงนำ id ที่เราตั้งชื่อนี้ ไปใส่ในคำสั่ง on() ได้เลย
ตัวอย่างโค้ดการใช้งาน FiftyShadesOf ด้านล่าง เพียงเท่านี้เราก็จะได้การแสดงผล Loading Content Placeholder ในแอปของเราเรียบร้อย ซึ่งใช้งานได้ง่ายมาก
สรุป
จบบทความแนะนำการแสดงผลหน้าจอแบบ Loading Placeholder Animation แบบ Facebook เรียบร้อยแล้ว ก็หวังว่าจะเป็นประโยชน์สำหรับนักพัฒนา ที่อยากเปลี่ยนการแสดงผลตอน Loading ให้ดูดี ดูสวยงามยิ่งขึ้น แต่การแสดงผลดตอน Loading ด้วย progress bar ก็ยังคงเป็นอะไรที่ง่าย และตอบโจทย์การใช้งานอยู่ การเลือกใช้งานการแสดงผลแบบไหน อาจจะต้องดูความเหมาะสมกับ UX/UI กันอีกทีด้วยครับ
ที่มา
ตัวอย่าง Source Code
