BUILDING CUSTOM UI ELEMENTS WITH IBDESIGNABLE

Nội dung

• Giới thiệu
• IBInspectable
• IBDesignable
• Kết Luận

Giới thiệu

Từ Xcode 6 có 2 thuộc tính khai báo của interface builder mới được giới thiệu đó là IBInspectable and IBDesignable. Trong đó IBInspectable thể hiện properties của class trong interface builder Attribute Inspector và IBDesignable cập nhật view realtime. Đó quả thật là một điều tuyệt vời giúp chúng ta thiết kế, chỉnh sửa giao diện ngay trong interface builder.

Nào chúng ta cùng tìm hiểu nhé!

Step 0: IBInspectable

IBInspectable properties cung cấp một cách truy cập mới vào một tính năng cũ : user-defined runtime attributes. Hiện tại truy cập từ identity inspector, những phương thức này đã available trước khi
Interface Builder được integrated vào Xcode. Họ cung cấp một cơ chế mạnh mẽ cho việc cấu hình một vài key-value mã hóa property của một instance in a NIB, XIB, or storyboard:

Dưới đây là những valid types cho IBInspectable :

Int
CGFloat
Double
String
Bool
CGPoint
CGSize
CGRect
UIColor
UIImage

Ví dụ:

class OverCustomizableView : UIView {
    @IBInspectable var integer: Int = 0
    @IBInspectable var float: CGFloat = 0
    @IBInspectable var double: Double = 0
    @IBInspectable var point: CGPoint = CGPointZero
    @IBInspectable var size: CGSize = CGSizeZero
    @IBInspectable var customFrame: CGRect = CGRectZero
    @IBInspectable var color: UIColor = UIColor.clearColor()
    @IBInspectable var string: String = "We ❤ Swift"
    @IBInspectable var bool: Bool = false
}

Trong Attribute Inspector bạn sẽ nhìn thấy ở phần trên:

Tất cả được thêm vào một vài thuộc tính định nghĩa người dùng runtime được cài đặt giá trị khởi tạo của view khi nó load lên.

IBDesignable

Khi bạn Applied vào một UIView hoặc NSView subclass, @IBDesignable định nghĩa rõ cho Interface Builder biết rằng nó nên render view trực tiếp trên canvas. Điều này cho phép nhìn thấy những gì bạn custom view xuất hiện mà không cần build hoặc run app sau mỗi lần change.

Để đánh dấu một custom view là IBDesignable, thêm vào trước class name với prefix là @IBDesignable.

@IBDesignable
class MyCustomView: UIView {
    ...
}

Kết hợp với IBInspectable properties, người thiết kế hoặc developer có thể dễ dàng chỉnh cái render của custom control để lấy chính xác kết quả họ muốn.

Khi custome view không có đầy đủ nội dung của app khi render trong Interface Builde, bạn có thể cần sinh ra mock data để hiển thị như là: ảnh default user profile hoặc dữ liệu chung thời tiết.

Có 2 cách để thêm code cho context đặc biệt:

• prepareForInterfaceBuilder(): Method này comply với code của bạn nhưng nó chỉ thực hiện khi chuẩn bị hiển thị trong Interface Builder.

• TARGET_INTERFACE_BUILDER: The #if TARGET_INTERFACE_BUILDER xử lý macro sẽ làm việc 1 trong 2 là Objective-C or Swift để điều kiện compile đúng code cho tình huống

#if !TARGET_INTERFACE_BUILDER
    // this code will run in the app itself
#else
    // this code will execute only in IB
#endif

Kết Luận

IBDesignable đã giúp cho việc tạo một custome class một cách dễ dàng hơn bằng cách developer có thể dễ dàng thay đổi trong interface builder.

http://nshipster.com/ibinspectable-ibdesignable/
http://www.thinkandbuild.it/building-custom-ui-element-with-ibdesignable/