iMacbaszii's Blog

วันนี้จะแบ่งปันอะไรที่ได้มาจากการลองเล่นของเล่นตัวหนึ่งจาก 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 ทำงานเสร็จแล้ว คราวนี้ผมจะข้ามไปในส่...

บน iOS 7 นั้น Apple ได้เสนอแนวคิดการออกแบบที่เรียกว่า Depth (ความลึก) ซึ่งสิ่งที่ได้ชัดคือ การทำให้ View ที่อยู่ด้านหลังเบลอมาเป็น Background เราจะเห็นแทบทุกๆ ที่บน iOS 7 เลย ตัวอย่างที่ชัดมากๆ ก็คือ Notification Center และ Control Center นี่แหละ และก็ต้องพูดคำนี้อีกละ "ทำไมไม่ทำให้มันง่ายๆ ตั้งแต่ iOS 7 ฟระ" บน iOS 7 นั้นเป็น Private API และไม่เปิดให้นักพัฒนาใช้กันอย่างแพร่หลายเนื่องจากกังวลเรื่องการใช้เยอะเกินไป ทำให้เกิดปัญหาด้านประสิทธิภาพ เนื่องจากการทำ Blur นั้น เราต้องทำแบบ Real Time กับภาพ Background ปัจจุบัน ซึ่งก็มีหลายคนเขียน Blur Algorithm ขึ้นมาใช้งานเอง และก็มี Library ที่ Apple แจกให้กับนักพัฒนาด้วย แต่บน iOS 8 นั้น Apple ได้ทำการใส่ Official API สำหรับการทำ Blur Effect มาให้ด้วย (แน่นอนว่าใช้ร่วมกับ iOS 7 ไม่ได้) ว่ากันเรื่องเบลอ... วิธีการทาง Image Processing ในการทำภาพให้เบลอ มีหลากหลายวิธี ถ้าใครเคยเรียนมา และวิธีที่เป็นที่นิยม และใช้กันอย่างแพร่หลายนั่นคือ Gaussian วิธีการก็คือ "ในแต่ละ Pixel ของภาพ เราจะนำ Pixel รอบข้างมาหาค่าเฉลี่ยแล้วเ...