Shimmer Placeholder while Loading Data

วันนี้จะแบ่งปันอะไรที่ได้มาจากการลองเล่นของเล่นตัวหนึ่งจาก Facebook
ถ้าใครคุ้นตา ลองเปิด Facebook App ขึ้นนะครับ (ควรจะ Kill Process ไปก่อน)

ในขณะที่กำลังโหลด News Feed อยู่นั้น คุณจะเห็นหน้าจอประมาณนี้ พร้อม Effect ที่เรียกว่า Shimmering



มาลองดูวิธีทำกันครับ ไม่ยากอย่างที่คิด เพราะ Facebook เตรียมของให้เราแล้วนั่นคือ
https://github.com/facebook/Shimmer

คราวนี้ผมจะลองสร้าง Toy Project ตัวหนึ่งที่เป็น UITableView-based ธรรมดาเลย
โดยผลลัพธ์สุดท้ายก็จะมีแค่นี้แหละ แสดงชื่อและอีเมล์


ขั้นตอนแรกให้สร้าง Prototype Cell อีกตัวขึ้นมาก่อน โดยให้มีโครงสร้างเหมือนกับ Prototype Cell ที่มีข้อมูลของเรา แต่แทนที่ Object ต่างๆ ด้วย UIView และอย่าลืมตั้งค่า Custom Class เป็น FBShimmerView ด้วยแบบนี้ ในที่นี้ผมตั้งชื่อ Cell ตัวนี้ว่า PlaceholderCell


ต่อมาเนื้อหาใน PlaceholderCell ของผมก็จะเป็นประมาณนี้


Wait for the Code ....

โดยจัดการสร้างและใส่ Content View ตอน -awakeFromNib
และให้เริ่มแสดง Shimmering effect หลังจากที่ Auto Layout ทำงานเสร็จแล้ว

คราวนี้ผมจะข้ามไปในส่วนของ UITableView DataSource เลยนะครับ
มันคล้ายกันกับการที่เรามี Cell หลายแบบเลยครับ


Wait for the Code ....

เท่านี้เราก็จะได้หน้า Loading สวยๆ แล้วครับ ลองนำไปปรับใช้กันดูนะครับ
ส่วนตัวอย่างโค้ดดูได้ที่นี่เลย https://github.com/macbaszii/ShimmerLoading

ป.ล. อย่าลืม `pod install` ก่อนนะครับ ส่วนใครยังไม่รู้จัก Cocoapods ก็กดเข้าไปอ่านได้เลย

Popular posts from this blog

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น