Khi tôi lần đầu tiên bắt đầu xây dựng ứng dụng bằng Xcode, tôi nghĩ Storyboards là một phép thuật. Việc kéo và thả lượt xem phụ vào đúng vị trí quá đơn giản, tôi chưa bao giờ hiểu cách mọi người xây dựng lượt xem mà không có chúng.
Cuối cùng, tôi quyết định rằng để trở thành một “lập trình viên bậc thầy”, tôi cần học cách xây dựng các khung nhìn theo chương trình. Một vấn đề, viết các ràng buộc trong mã là một vấn đề khó khăn.
let horizontalConstraint = NSLayoutConstraint( item: newView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)Đó là một ràng buộc ngang sẽ căn giữa một chế độ xem phụ trên trục X của chế độ xem siêu hạng của nó. Không dễ đọc chưa kể đến cách viết mà mọi ràng buộc đều nhanh cũ. Tuy nhiên, tôi vẫn muốn loại bỏ bảng phân cảnh nên tôi đã tìm kiếm một giải pháp thay thế. Đó là khi tôi tìm thấy SnapKit.
SnapKit có một API rõ ràng và ngắn gọn giúp việc viết các ràng buộc trong mã trở nên dễ dàng. Tôi sẽ xem qua một vài ví dụ thực sự cơ bản về những gì có thể làm được trong SnapKit.
Tôi sẽ xem qua:
- Bố trí một chế độ xem phụ trong chế độ xem siêu cao của nó
- Bố trí các lượt xem phụ có liên quan đến nhau
- Các ràng buộc cập nhật và tạo hoạt ảnh
Bắt đầu
Đảm bảo bạn tải xuống SnapKit trong dự án của mình. Tôi sử dụng Cocoapods cho thư viện của bên thứ ba.
Thêm pod 'SnapKit' vào Podfile của bạn và chạy pod install . Bây giờ hãy viết import SnapKit ở đầu tệp mà bạn muốn sử dụng.
Đặt chế độ xem phụ trong chế độ xem siêu cao của nó
Trước hết, tôi sẽ ghim một chế độ xem phụ vào các cạnh của chế độ xem siêu cao của nó:
let subview = UIView()view.addSubview(subview)subview.snp.makeConstraints { (make) in make.top.equalTo(view) make.bottom.equalTo(view) make.left.equalTo(view) make.right.equalTo(view)}Điều này sẽ thiết lập các ràng buộc cho các cạnh trên, dưới, trái và phải của chế độ xem phụ với các cạnh tương ứng của chế độ xem siêu hạng của nó với hằng số là 0.
Lưu ý rằng tôi thêm chế độ xem phụ vào chế độ xem lại trước khi đặt các ràng buộc của chế độ xem phụ. Nếu bạn viết các ràng buộc cho các chế độ xem chưa được thêm vào superview, nó sẽ gây ra lỗi thời gian chạy nghiêm trọng khi chế độ xem tải.
Cú pháp SnapKit đã dễ đọc hơn rất nhiều so với thư viện tiêu chuẩn nhưng nó có thể được rút ngắn. SnapKit cung cấp một cách ngắn gọn hơn nữa để giới hạn chế độ xem ở các cạnh của chế độ xem siêu cấp của nó:
let subview = UIView()view.addSubview(subview)subview.snp.makeConstraints { (make) in make.top.bottom.left.right.equalTo(view)}Điều này sẽ bố trí lượt xem phụ của tôi theo cách giống như mã ở trên, nhưng với một dòng thay vì bốn dòng.
Tôi cũng có thể giới hạn kích thước lần xem phụ của mình. Dưới đây, tôi sẽ đặt chiều cao và chiều rộng của chế độ xem phụ và đặt nó vào tâm của chế độ xem phụ:
subview.snp.makeConstraints { (make) in make.width.equalTo(200) make.height.equalTo(200) make.centerX.equalTo(view) make.centerY.equalTo(view)}
Ví dụ đó khá đơn giản, nhưng tôi đã lặp đi lặp lại rất nhiều. Khi đặt các ràng buộc có cùng giá trị, SnapKit cho phép tôi xâu chuỗi các ràng buộc lại với nhau như sau:
subview.snp.makeConstraints { (make) in make.width.height.equalTo(200) make.centerX.centerY.equalTo(view)}Khối này sẽ dẫn đến các ràng buộc tương tự như khối ở trên. Chỉ là một cách khác mà SnapKit giúp viết mã rõ ràng hơn.
Đặt các lượt xem phụ tương đối với nhau
Khi thêm nhiều lượt xem phụ vào một chế độ xem, có thể bạn sẽ muốn bố trí các lượt xem phụ tương quan với nhau. Trong ví dụ này, tôi sẽ:
- Thêm
subview1và hạn chế nó ở cạnh trái chế độ siêu xem của nó - Thêm
subview2và giới hạn nó ở cạnh bên phải củasubview1
let subview1 = UIView()let subview2 = UIView()view.addSubview(subview1)view.addSubview(subview2)subview1.snp.makeConstraints { (make) in make.width.height.equalTo(100) make.left.equalTo(view)}subview2.snp.makeConstraints { (make) in make.width.height.equalTo(subview1) make.left.equalTo(subview1.snp.right)}
Cho đến bây giờ, tôi muốn các ràng buộc của mình bằng với ràng buộc tương ứng cho chế độ xem tương đối. Ví dụ:trong make.left.equalTo(view) SnapKit đặt left trong tổng số subview1 đến left trong tổng số view . SnapKit sẽ tự động khớp với ràng buộc tôi đặt nếu tôi không chỉ định khác.
Đối với left ràng buộc của subview2 , Tôi muốn đặt nó thành right cạnh của subview1 . Nếu tôi đã viết make.left.equalTo(subview1) SnapKit sẽ đặt left cạnh của subview2 tới left cạnh của subview1 . Thay vào đó, tôi sử dụng right cạnh của subview1 mà tôi lấy bằng cách viết subview1.snp.right .
Tôi có thể truy cập bất kỳ ràng buộc nào của bố cục chế độ xem bằng cách thêm snp như đã thấy ở trên.
Bây giờ tôi có subview2 ở bên phải của subview1 , Tôi sẽ tạo một số khoảng trống giữa chúng bằng cách thêm khoảng lệch thành subview2 .
subview2.snp.makeConstraints { (make) in make.width.height.equalTo(subview1) make.left.equalTo(subview1.snp.right).offset(50)}
Một phần bù có thể được thêm vào cuối bất kỳ equalTo() nào để thay đổi hằng số của ràng buộc đó. Hiện tại subview2 sẽ có một hằng số là 50 trên left của nó ràng buộc.
Cập nhật và tạo hoạt ảnh cho các ràng buộc
Nếu bạn muốn ứng dụng của mình trở thành #NextBigThing, mọi người đều biết rằng bạn sẽ cần thêm một chút tinh tế! SnapKit cung cấp một cách dễ dàng cập nhật các ràng buộc để tạo chế độ xem động.
Cập nhật một ràng buộc với SnapKit gần giống với việc thêm một cái mới. Tại đây, tôi sẽ cập nhật ràng buộc cho subview1 từ ví dụ trước bằng cách thay đổi left hằng số của giới hạn cạnh từ 0 đến 50:
subview1.snp.updateConstraints { (make) in make.left.equalTo(50)}Và thế là xong! Chế độ xem phụ của tôi sẽ cập nhật lên các ràng buộc mới khi khối mã được chạy.
Bạn có thể nhận thấy rằng subview2 đã di chuyển khi tôi cập nhật subview1 mặc dù tôi không cập nhật các ràng buộc của nó. subview2 bị giới hạn ở cạnh bên phải của subview1 . Khi subview1 được di chuyển, subview2 sẽ tiếp tục tôn trọng hạn chế bên trái mà nó có với subview1 .
Bây giờ tôi sẽ thêm hoạt ảnh để làm mượt quá trình chuyển đổi. Nếu bạn đã từng làm động một chế độ xem trước đây, thì cú pháp này sẽ quen thuộc:
UIView.animate(withDuration: 0.3) { subview1.snp.updateConstraints { (make) in make.left.equalTo(50) } self.view.layoutIfNeeded()}
Khi tạo hoạt ảnh cho các cập nhật về các ràng buộc của tôi, tôi cần gọi layoutIfNeeded() trên phụ huynh của lượt xem phụ. Nếu tôi đang tạo hoạt ảnh cho nhiều chế độ xem cùng một lúc, tôi sẽ cần gọi layoutIfNeeded() trên superview phổ biến nhất của lượt xem phụ.
updateConstraints() chỉ có thể cập nhật các ràng buộc hiện có. Cố gắng cập nhật một ràng buộc chưa có sẵn sẽ dẫn đến lỗi thời gian chạy nghiêm trọng.
Nếu bạn muốn thêm các ràng buộc mới vào chế độ xem phụ của mình, hãy sử dụng remakeConstraints() . remakeConstraints() sẽ xóa mọi ràng buộc hiện có mà bạn đã đặt trên chế độ xem phụ đó và cho phép bạn thêm những cái mới.
Bạn cũng có thể sử dụng deactivate() để loại bỏ một ràng buộc. Dưới đây tôi tạo, thiết lập và chúng loại bỏ một ràng buộc bằng cách sử dụng deactivate() :
var constraint: Constraint!let subview = UIView()subview.snp.makeConstraints { (make) in constraint = make.height.equalTo(100).constraint}constraint.deactivate()Bạn cũng có thể tạo hoạt ảnh cho việc loại bỏ một ràng buộc bằng cách hủy kích hoạt nó bên trong một khối hoạt ảnh.
Vì vậy, bây giờ bạn đã thành thạo trong việc viết các ràng buộc theo chương trình. Bảng phân cảnh bây giờ có vẻ như một trò đùa và không có lý do gì để quay lại với chúng, phải không?
Không hẳn vậy. Bảng phân cảnh và ngòi vẫn là cách nhanh nhất để kết hợp bộ điều khiển chế độ xem và nếu bạn đang làm việc với những người không phải là nhà phát triển, chúng là cách tốt nhất để hiển thị ứng dụng trông như thế nào mà không cần gửi phiên bản beta.
Cá nhân, tôi sử dụng cả hai. Trong ứng dụng cuối cùng tôi tạo, tôi đã thêm các ràng buộc cả trong mã với SnapKit và sử dụng Bố cục Tự động trên bảng phân cảnh và ngòi, đôi khi trên cùng một chế độ xem. Cuối cùng, bạn sẽ phải quyết định xem cái nào phù hợp nhất với chế độ xem mà bạn đang xây dựng.
Cảm ơn rất nhiều vì đã đọc! Nếu bạn thích câu chuyện này, hãy theo dõi tôi trên Twitter, nơi tôi đăng các bài viết về quản lý sản phẩm, kỹ thuật và thiết kế.