เมื่อดีไซร์เนอร์ชอบความโค้ง ปุ่มโค้ง Viewโค้ง ไซ้โค้ง iOS Dev อย่างเราจะจัดการกับมันอย่างไร ให้มันแจ่มแจ้งแดงแจ๋

ออฟฟิศผมเนี้ย เวลาดีไซร์เนอเอาแบบมาให้ดู มักจะพบเจอกับดีไซร์ ที่มีสัดส่วนของ วัตถุโค้ง ตลอดเวลา เวลาเราจะทำ View แบบนั้น เราก็มักจะไป Set ค่า layer.cornerRadiusไว้ในCode ซึ่งผมเองเป็นคนไม่ชอบทำอะไรใน code เยอะ ชอบจัดการ View ให้มันจบใน Inteface builder พอมาเจอแบบนี้บ่อยๆก็เลยต้องหาทางจัดการกับมัน

ถ้าดีขึ้นมาหน่อยสมัยก่อนเราก็ใช้ User Defined Runtime Attributes

อะไรเยี่ยงนี้ แต่ปัญหาของมันคือ Key Path เนี้ยมันเป็น key-value coded มันต้องพิมพ์เอง เลยทำให้เกิดความเสี่ยงพิมพ์ผิดพิมถูกได้

ซึ่งใน Xcode เวอร์ชัน 6 ก็เลยมี

@IBInspectable 

ซึ่งทำให้ Interface Builder สามารถ เซตค่าต่างๆของ View ผ่านทาง แทบ Inspector ได้

ด้วยความขี้เกียจของผม ผมก็เลย ทำ Extension จาก UIView มันซะเลย ไหนๆก็ชอบ โค้งมันแล้วหละก็

โดย 3 ค่าหลักๆที่ผมทำไว้ก็คือ Corner Radius, Border Width, Border Color
ความฉลาด ของ XCode ก็คือ มันจะเปลี่ยน camel case ไปเป็น title case ให้เราเองอัตโนมัติ และอะไรที่เกี่ยวข้องกันจะทำการ Group ให้เราด้วย

แทบ Inspector นะครัช

ซึ่งเท่านี้เราก็จะสามารถ ปรับค่าต่างๆได้จาก Interface Builder แล้ว

แต่ แต่เดี๋ยวก่อน มันยังไม่หมดเท่านี้ ถ้าทำได้แค่นี้มันก็ยังไม่ค่อย Cool เท่าไหร่ ผมอยากได้ปรับแล้วเห็นการเปลี่ยนแปลง บน canvas ด้วย ทำอย่างไรหละ

@IBDesignable

มันเลยมีเจ้านี้เกิดขึ้นมา เอาเจ้านี้ไปไว้หน้า Sub Class ของ UIView มันจะทำให้ Interface Builder รู้ว่า มันจะต้อง Render View นี้ขึ้นมา ตามที่เราปรับค่าไว้ (จริงๆมันแอบ Compile แหละ)

@IBDesignable
class IBDesignableView: UIView {
    ...
}

ลองสร้าง View มาแล้ว Custom Class ด้วย IBDesignableView

ลองปรับค่า ต่างๆดูจะเห็นว่ามันเปลี่ยนเองอัตโนมัติ

ถ้าเราต้องการ Class อื่น เช่น Label, ImageView, Button ก็ทำได้เช่นกันนะครับ
หรือลองเข้าไปดูได้ที่ https://github.com/rpzzzzzz/IBDesignableView