Building Custom UI with @IBDesignable

IBDesignable and IBInspectable

@IBDesignable และ @IBInspectable เป็น keyword ใหม่ที่ถูกใส่เข้ามาใน Xcode 6 เพื่อที่จะแสดงผล Custom View ที่เราสร้างขึ้นผ่าน Interface Builder (Storyboard) โดยตรง ซึ่งจะมีประโยชน์มากๆ ในการทดสอบก่อนการแสดงผลจริง ช่วยให้เร็วขึ้น เนื่องจากเมื่อก่อน ก็จะเป็น UIView เฉยๆ ใน Storyboard แล้วเราจำเป็นต้องรันแอปเพื่อให้มันเรนเดอร์ ตอนนี้ไม่ต้องแล้ว

วิธีการก็คือ เราจะใส่ @IBDesignable ไว้ข้างหน้า class ที่เป็น UIView Subclasses เพื่อบอก Interface Builder ว่า Custom View นี้จะมีการแสดงผลผ่านที่นั่นทันทีนะ


จากนั้นก็ใส่ @IBInspectable ให้ property ที่เราจะทำการเปลี่ยนแปลงค่าใน Inspector View โดยตรง


โค้ดที่ต้องเขียนก็จะมีประมาณนี้ สิ่งที่เราจะเห็นใน Inspector View ซึ่งนี่เป็นตัวอย่างของวันนี้ คือนี่


และใน Storyboard เราก็จะเห็นการแสดงผลของ Custom View บน ViewController เหมือนกับอุปกรณ์บน UIKit ได้ทันทีแบบนี้ด้วย

Let's Code

สิ่งที่เราจะทำกันในวันนี้เหมือนภาพด้านบนนะ เราจะมาทำ Gradient View ที่มีคุณสมบัติตามนี้
  1. สามารถไล่พื้นหลังสีโดยใช้สี 2 สี
  2. สามารถเลือกได้ว่าจะไล่เป็นแนวนอน หรือแนวตั้ง
  3. สามารถปรับความมนของมุมสี่เหลี่ยมได้
Build Your Framework

อย่าพึ่งกลัวไป การสร้าง Framework บน Xcode 6 นั้นง่ายมาก ง่ายจนไม่รู้จะพูดยังไงแล้ว และถ้าอยากเข้าใจว่า Framework ทำงานยังไงให้ไปดู Session 416 "Building modern Framworks" งาน WWDC'14 เราจะพูดแค่ว่าการสร้าง Framework คือการห่อหุ้มโค้ดและสิ่งต่างๆ ที่เกี่ยวข้องกันไว้ด้วยกัน เพื่อให้ง่ายต่อการนำไปใช้ทั้งภายใน และภายนอก

วิธีการสร้าง Framework ให้ไปที่
File -> New -> Target
ในพาเนลดานซ้ายให้เลือก
iOS -> Framework & Library -> Cocoa Touch Framework

จากนั้นก็ตั้งชื่อให้เรียบร้อย แล้วเลือกเป็นภาษา Swift เท่านั้นนะ
เมื่อสร้าง Framework เรียบร้อย เราจะเห็นโฟลเดอร์ชื่อที่เราตั้งเมื่อสักครู่ขึ้นมาที่ด้านซ้าย ให้เพิ่ม Cocoa Touch class ลงไปในโฟลเดอร์นี้
File -> New -> iOS/Source -> Cocoa Touch Class
ซึ่งชื่อที่ผมเลือกคือ OZGradientView เรียบร้อยแล้วก็จะได้แบบนี้


อย่างที่บอกในตอนต้น ใน class นี้เราก็ใส่ @IBDesignable ไว้หน้าชื่อ class และใส่ @IBInspectable ไว้ที่ property ที่เราต้องการเปลี่ยนแปลงค่าผ่าน Inspector View ใน Storyboard


โดยในแต่ละ property ก็จะเขียน didSet observer เพื่อทำการรีเฟรช Custom View ด้วย
จากนั้นก็เขียนฟังก์ชั่น setupView และสร้าง property ของ layer บน Custom View


ไม่มีอะไรซับซ้อนเลยใช่ไหม ? ฟังก์ชั่นก็เพียงแค่ตั้งค่าสี และความมนของมุม gradientLayer ที่เราอ้างอิงถึง จากนั้นก็ตรวจสอบค่าว่าจะให้ไล่สีเป็นแนวนอน หรือแนวตั้ง แล้วก็สั่งอัพเดททันที เมื่อมีการเปลี่ยนแปลงค่า

ต่อไปก็ต้องทำการ Override ฟังก์ชั่นตั้งค่าเริ่มต้นบางตัว เพื่อที่จะใช้ class อื่นนำไปใช้ได้อย่างสะดวกโยธิน และทำการเปลี่ยน Layer Class ให้เป็น CAGradientLayer ด้วย (ปกติจะเป็น CALayer) เฉยๆ


เรียบร้อย!

คราวนี้ลองสลับไปที่ Storyboard นะ ลาก UIView เข้ามาใน Controller แล้วเลือก Custom Class เป็นตัวที่เราสร้างขึ้นมาแบบนี้


 พอเปลี่ยนมาที่ Inspector View ก็จะมีส่วนที่เอาไว้เปลี่ยนแปลงค่าต่างๆ ที่เราได้ใส่ @IBInspectable ไว้แล้วล่ะ ง่ายไหม :)


ลองนำไปใช้ดูนะครับ ชีวิตง่ายขึ้นเยอะเลย :)
แน่นอนว่า อ่านมาจนจบ ถ้าใครติดปัญหาอะไร โค้ดอยู่นี่ https://github.com/macbaszii/CustomUI

Popular posts from this blog

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

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

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