Một phút cho quảng cáo

Trong lập trình IOS nói riêng và mobile nói chung, kỹ năng code giao diện là phần rất quan trọng. Độ phức tạp của một task và thời gian thực hiện phụ thuộc nhiều vào UI bạn làm. UI đơn giản thì làm nhanh, UI khó thì làm lâu. Kĩ năng tạo giao diện cần được các thợ code mobile trau dồi, rèn luyện thật kĩ. Nhất là đối với những người lười như mình :)), việc build những style dùng chung sẽ giảm thời gian làm xuống, tăng thời gian chơi lên. YOLO mà. Nhưng làm thế nào để dùng chung đâu phải là việc đơn giản. Người thợ code lại phải lên đường tìm cách gỡ rối tơ lòng.

Tìm đường cách mệnh

Cách hiệu quả nhất là ta tạo những func dùng chung, ví dụ như muốn làm đậm chữ một label, sau đó cho background màu xanh, rùi cuối cùng là bo cái label đấy nó hơi cong chút xíu. Ta có thể viết mã giả như sau

1
2
3
4
5
6
7
8
9

setBold(lbl)
setBlackBackground(lbl)
setRound(lbl)

styleLabel(lbl) {
  setBold(lbl)
  setBlackBackground(lbl)
  setRound(lbl)
}

Cách giải quyết rất đơn giản phải không nào. Tuy nhiên bạn đang dùng swift mà, hãy làm nó theo phong cách swift.

Show me the code

Đầu tiên ta định nghĩa ra một struct làm chức năng wrap style. Trong struct có chứa hàm callback thực hiện thao tác với UI

img1

Tiếp theo định nghĩa tiếp hàm compose, compose này làm nhiệp vụ tổng hợp lại các thao tác với UI thành một hàm duy nhất có dạng (T) -> Void. Trong đó T đóng vai trò UI được truyền vào.

img2

Ta đã có function để tổng hợp lại các bước thao tác với UI, bước tiếp theo là run nó thôi. Ta định nghĩa một function làm việc này.

img3

OK! done, giờ ta sẽ tạo example đơn giản để thấy hiệu quả của việc này. Ta tạo 3 style từ struct định nghĩa ở trên làm các nhiệm vụ: tạo đường cong cho label, đổi background của label thành màu đen, cho chữ được bôi đậm nữa.

img4

Rồi tổng hợp chúng lại như sau

img5

Cách overload toán tử

Chúng ta có thể overload toán tử để nhìn phép toán gọn gàng, sáng sủa hơn.

img6

Và kết quả sẽ được là

1
2

let compositeStyle2 = borderStyle + blackBgStyle + titleBoldStyle
compositeStyle2.apply(to: lbl2)

:D Đơn giản như đan rổ ấy nhỉ?

Hướng functional

Theo huớng này thì ta định nghĩa ra toán tử <>

img7

Và hàm + ở trên có thể sửa lại thành

1
2
3

static func + (lhs: StyleComposite, rhs: StyleComposite) -> StyleComposite {
    return StyleComposite(styling: lhs.styling <> rhs.styling)
}

Thậm chí ta có thể không cần dùng struct nữa mà qui thành function hết. Mã giả như sau

1
2
3
4
5
6
7
8

func setBold(lbl) { ... }
func setRound(lbl) { ... }
func setBlackBg(lbl) { ... }

let style = setBold <> setRound <> setBlackBg

// in your UI code
style(lbl) // run style

Vậy là mình đã trình bày xong 3 cách để tái sử dụng code trong việc style UI :). Bạn có cách nào hay không? Show me the code.