Layout giao diện bằng thư viện Stevia

(Website tài trợ bởi: cong tu dong)

Chào Các bạn, chúng ta đều biết rằng, dụng cụ sách học lập trình Xcode mang thể giúp chúng ta sở hữu thể thiết kế giao diện trực giác và mau chóng, lúc ấy chúng ta dùng storyboard hay xib, nhưng rộng rãi lúc bạn cần viết giao diện bằng code. Nếu như bạn nắm được bí quyết viết giao diện bằng code bạn mang thể hiểu sâu hơn những khó khăn khi làm cho giao diện.

bữa nay mình sẽ hướng dẫn khiến giao diện bằng code nhé, để hiểu được phải code như thế nào thì chúng ta sẽ đi từ việc kéo thả giao diện:

Đã xong, không cần viết một loại code, chúng ta vẫn hoàn tất được giao diện login, vậy khi code thì chúng ta sẽ code chiếc gì.

Trước khi sử dụng thư viện, mình chỉ dẫn Cả nhà code chay nhé:

đầu tiên chúng ta muốn chiếc gì xuất hiện trên giao diện thì chúng ta phải khởi tạo mẫu ấy, ở đây mình khởi tạo đối tượng username và usernameTextField:

một thuộc tính rất quan yếu khi bạn khởi tạo đối tượng là bạn phải thiết lập translatesAutoresizingMaskIntoConstraints bằng false, mặc định là true theo tọa độ thường nhật là frame và dùng AutoresizingMask.

Tiếp theo, chúng ta layout cho đối tượng:

Ở đây khi layout cho đối tượng, mình đã tiêu dùng NSLayoutAnchor thay vì NSLayoutConstraint, vì lúc tiêu dùng NSLayoutAnchor, bạn sẽ thấy ngắn gọn và dễ hiểu hơn, và nó cũng tương đối dễ để hình dung (gần giống sở hữu việc AutoLayout trên Storyboard)

Để thấy nó ngắn hơn như thế nào bạn có thể xem đoạn code sau đây:

Qua ví dụ trên mang thể thấy rõ các ưu thế học lập trình php đã nêu của NSLayoutAnchor. Cách thức tiêu dùng cũng rất đơn giản, ở đây heightAnchor là: NSLayoutDimension chính là các thuộc tính sẽ được sử dụng để layout, ngoài heightAnchor ra có đông đảo những thuộc tính khác như widthAnchor, topAnchor, leftAnchor, rightAnchor, bottomAnchor, ... (Chỉ cần gõ ten_doi_tuong.anchor XCode sẽ suggest ra những thuộc tính).

Quay lại với bài của chúng ta, khi mỗi đối tượng chúng ta đều phải layout lặp đi lặp lại và mã code sẽ trở thành rất kềnh càng, dưới đây là đầy đủ đoạn code để ra giao diện như chúng ta đã thấy ban đầu

Woa, để hiển thị được một tí giao diện mà phải code rất chi là dông dài, thế nên mình sẽ giới thiệu mang Cả nhà cách khác ngắn hơn nhé.

Xem thêm =>> https://mindx.edu.vn/blog/post/lap-trinh-web-nen-hoc-ngon-ngu-nao

Chúng ta sẽ dùng thư viện Stevia - 1 thư viện Layout dành cho iOS:

Để sử dụng những thư viện ngoài thì máy tính của bạn cần phải cài đặt Cocoa Pod:

Stevia là thư viện ngoài thế nên chúng ta cần thực hiện một vài bước trước lúc bắt tay vào code.

B1: Cài đặt Cocoa Pod (bước này chỉ cài lần đầu, máy đã cài Cocoa Pod thì bỏ qua bước này nhé):

B2: Tạo project (cái này easy phải không)

B3: Bật Terminal cd đến thư mục project vừa tạo và enter

B4: Gõ lệnh pod init

B5: Mở Pod file trong project

B6: Thêm lệnh sau vào Podfile :

tương tự là chúng ta đã layout xong giao diện Login dưới sự hỗ trợ của thư viện, giả dụ bạn là developer iOS, bạn sẽ thích cách nào