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 ก็กดเข้าไปอ่านได้เลย

Comments

Post a Comment

Popular posts from this blog

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

Image
ใครหลายคนมักตั้งคำถามว่า "จะดื่มกาแฟแก้วละเกือบ 200 ไปทำไม ดื่มแล้วได้อะไร?" ผมพบเจอบทความหนึ่งจาก Internet เกี่ยวกับอีกสิ่งสำคัญของ Starbucks นอกจากกาแฟ นั่นคือ ระบบการบริการลูกค้า (Customer Service) ที่เป็นหัวใจที่สำคัญยิ่งของกาแฟแบรนด์ดังที่ชื่อว่า Starbucks จากวิสัยทัศน์ของผู้บริหารกาแฟ Starbucks ที่มุ่งเน้นไปที่การบริการลูกค้าให้ดีที่สุด ซึึ่งมาจากพนักงานที่ยอดเยี่ยมที่สุดจากทาง Starbucks และมีความเชื่อมั่นและให้ความใส่ใจกันองค์กรเป็นอย่างยิ่ง ซึ่งสำหรับผู้ที่ดื่มกาแฟ Starbucks เป็นปกติอยู่แล้วก็จะได้รับการบริการด้วยไมตรีจิตที่ดีจากพนักงานหรือเรียกอีกอย่างว่า “partners” ที่แฝงไว้ซึ่งคุณภาพภายใต้การสวมใส่ผ้ากันเปื้อนสีเขียว เราจะมาดูกันครับว่า 12 วิธีการบริการลูกค้าร้านกาแฟที่เป็นหัวใจที่สำคัญของทาง Starbucks นั้นมีอะไรบ้าง 1. สอบถามความต้องการลูกค้าเพื่อช่วยตัดสินใจ การเริ่มต้นด้วยคำถามที่เป็นการช่วยลูกค้าตัดสินใจ เมื่อลูกค้าเข้าร้านมา อย่างเช่น “สวัสดีค่ะ คุณจะรับชาหรือกาแฟดีคะ”, “ไม่ทราบว่าคุณจะรับเป็นเครื่องดื่มร้อนหรือว่าเย็นดีคะ” หรือ อาจจะเป็นคำถ
Read more

Command Line Compiling C/C++ ,Java [Windows, Mac]

Image
ผมเขียน Blog นี้เพราะน้องในคณะให้มาสอนเรื่อง Command Line Argument  และผมทำกับ Editor สำเร็จรูปพวกนั้นไม่เป็น ก็ Command Line Argument นี่นา ก็ต้องใส่ผ่าน Command Line สิ มันถึงจะ make sense ขอพูดถึงฝั่ง Mac ก่อนนะครับ เพราะมันง่ายกว่า... ทางฝั่ง Mac นั้น เพียงลง Xcode [Developer Tools] ก็เพียงพอแล้ว  สามารถโหลดได้ฟรีจาก Mac App Store ณ ปัจจุบันเป็นเวอร์ชั่น 4.2 จากนั้นให้เปิด Terminal ขึ้นมา แล้วไปที่ที่ ไฟล์ที่เราต้องการ  แล้วใช้คำสั่งตามนี้ครับ  C Compile: gcc filename.c  Run: ./a.out หรือ Compile: gcc filename.c -o exefilename Run: ./exefilename C++   Compile: g++ filename.cpp Run: ./a.out หรือ  Compile: g++ filename.cpp -o exefilename Run: ./exefilename ตัวอย่างการ Compile C++ : Balance Parentheses using Stack Java Compile: javac filename.java Run: java filename ตัวอย่างการ Compile ภาษา Java: Random Number สำหรับภาษา Java นั้นทั้ง Mac และ Windows ใช้คำสั่งเดียวกันเลยครับ จากนั้นมาฝั่ง Windows กั
Read more

การเขียนโปรแกรมแก้ปัญหา "โจทย์รูปทรงสมมาตร"

Image
ผมรู้จักมันในสิ่งที่ผมเรียกว่า "โจทย์ดาว" คิดว่าทุกคนน่าจะได้เรียนตอนที่เรียน Nested Loop ในวิชา Computer Programming ซึ่งเป็นสิ่งทีผมไม่ชอบเอามากๆ ... แต่โจทย์จำพวกนี้เรามักจะเจอใน "คอมพิวเตอร์ โอลิมปิค" และในวันนี้ผมก็ขอหยิบโจทย์หนึ่งใน "การแข่งขันคอมพิวเตอร์ โอลิมปิค" (ลืมปี) ที่มีชื่อว่า "ฝุ่นธุลีล้อมดาว" พร้อมกับ Algorithm ที่ผมได้มาจากท่านอาจารย์คนหนึ่งนั่นคือ อาจารย์ภิญโญ แท้ประสาทสิทธิ์ อาจารย์ประจำภาควิชาคอมพิวเตอร์ มหาวิทยาลัยศิลปากร  ซึ่ง Algorithm นี้สามารถนำไปประยุกต์ใช้กับ "โจทย์ดาว" ที่เป็น "รูปทรงสมมาตร" ได้หลายๆ อันเลย (ณ ตอนนี้ผมไม่มีโจทย์อยู่ในมือ เลยอาจจะได้แค่ 3 - 4 ข้อ) ว่ากันต่อโจทย์ "ฝุ่นธุลีล้อมดาว" ที่ผมกล่าวถึงเนี่ยจะมีลักษณะ input และ output เป็นแบบนี้ครับ เรามาดูเรื่องของ Algorithm กันก่อนนะครับ (อาจจะในภาษาที่ผมเข้าใจ) ขั้นแรกให้วาดตารางครอบคลุมปัญหาย่อยๆ ของเราก่อน  ในที่นี้ผมเลือก Input เป็น 3 เราจะนับจำนวนได้ด้านละ 5 ช่อง โดยถ้าดูแบบ Array 2 มิติ
Read more