Bối cảnh & Truyện ngắn về chủ đề này

Là người mới bắt đầu học phát triển ứng dụng iOS, chúng ta hẳn đã biết hoặc học về cách tạo chế độ xem bằng cách sử dụng bảng phân cảnh và bố cục tự động. Lần đầu tiên tôi tìm hiểu về cách tạo một ứng dụng iOS, tôi đã học cách sử dụng bảng phân cảnh bao gồm cả việc đặt bố cục cho các thành phần trong chế độ xem. Tuy nhiên, bạn phải biết rằng việc sử dụng bảng phân cảnh là rất không hiệu quả để thực hiện trong các dự án khá lớn, đặc biệt nếu công việc được thực hiện với một nhóm. Bằng cách sử dụng bảng phân cảnh, chúng ta sẽ khó hợp nhất & giải quyết xung đột khi cộng tác, khó điều hướng, khó tái cấu trúc mã, v.v.

Cuối cùng tôi đã quyết định tìm hiểu về cách tạo giao diện người dùng theo chương trình bằng cách sử dụng UIKit khi làm việc với dự án của mình và nó trở nên dễ dàng hơn nhiều về mặt cộng tác. Vì lý do này, tôi đã khám phá một số điều, bao gồm học cách khai báo một thành phần, điều chỉnh thành phần, đặt nó trong một dạng xem khi cần và cũng như điều chỉnh bố cục của các thành phần khác nhau trong một dạng xem.

Từ những gì tôi đã khám phá, có nhiều bài học khác nhau mà tôi đã học được nhưng có 2 điều có vẻ đơn giản nhưng rất hữu ích, bao gồm những điều liên quan đến cài đặt thực sự cần thiết để tạo nhãn có thể tự động xuống dòng theo nội dung và cũng có nhiều cách để thiết lập bố cục cho một thành phần trong dạng xem, nhưng cho đến nay đối với tôi, cách dễ nhất mà tôi từng thử triển khai là sử dụng thư viện SnapKit.

Vì vậy, ở đây tôi muốn chia sẻ cách để làm điều đó bằng cách giải thích nó thông qua việc triển khai mà tôi đã thực hiện trong dự án của nhóm mình.

Giới thiệu về dự án của nhóm tôi

Vì vậy, đây là ứng dụng mà tôi và nhóm của mình đã tạo ra, có tên là “Healo”.
Healo là một ứng dụng iOS trò chuyện ẩn danh kết nối những người đang cố gắng chữa lành vết thương của cha mẹ (được gọi là Người tìm kiếm) với người có thể lắng nghe những câu chuyện họ chia sẻ và nhắc nhở họ tiếp tục có động lực để tự sửa chữa (được gọi là Người lắng nghe ).

Khi chúng tôi muốn trở thành người lắng nghe, sẽ có các trang đánh giá chứa giải thích về một số chủ đề cũng như các câu hỏi mà họ phải trả lời và họ phải vượt qua bài kiểm tra để đảm bảo rằng họ có thể được chấp nhận sử dụng ứng dụng.

Thực ra chúng ta chỉ cần tạo một trang đánh giá, nhưng nội dung nhãn trên trang đó sẽ hiển thị nhiều văn bản khác nhau và cũng khác nhau tùy theo số câu hỏi. Bản thân câu hỏi và mô tả này được lấy từ cơ sở dữ liệu chứ không phải được viết và lưu trữ trực tiếp trong dự án Xcode. Do đó, tất nhiên, nội dung của văn bản và số lượng từ cũng sẽ khác nhau.

Trên thực tế, chúng tôi có thể làm cho giao diện của mình gọn gàng mà không cần phải thực hiện một số cài đặt nhất định trong chế độ xem. Chúng ta có thể làm điều này bằng cách thiết lập nó trên dữ liệu văn bản mà chúng ta truy xuất từ ​​cơ sở dữ liệu bằng cách thêm \n cho một số văn bản nhất định phải ở trên một dòng mới, chẳng hạn như “Xin chào, \nTôi yêu lập trình.” Nhưng điều đó rất bất tiện nếu có nhiều văn bản yêu cầu những bổ sung này và chúng ta luôn phải thực hiện thủ công.

Để làm được điều đó, tôi sẽ chỉ cho bạn cách tôi thực hiện cài đặt trên nhãn mô tả sao cho độ dài của nội dung mà chúng tôi lấy từ cơ sở dữ liệu là bao nhiêu, sẽ có một dòng mới được tự động thêm vào nếu độ dài của văn bản vượt quá giới hạn của chế độ xem nhãn đã được đặt bằng SnapKit.

Triển khai dự án

Để sử dụng thư viện SnapKit, trước khi chúng tôi bắt đầu làm dự án, hãy đảm bảo rằng chúng tôi đã cài đặt CocoaPods. ( Đây là hướng dẫn cài đặt CocoaPods. )

Sau khi chúng tôi đã cài đặt CocoaPod, đây là cách cài đặt SnapKit từng bước:
1. Chúng tôi phải đi tới thư mục dự án Xcode của mình và mở thiết bị đầu cuối từ đó (Nhấp chuột phải + Chọn “Thiết bị đầu cuối mới tại thư mục”).
2. Khi thiết bị đầu cuối mở ra, chúng tôi nhập “pod init” và nó sẽ tạo một tệp pod mới trong thư mục của chúng tôi.

3. Mở Podfile đó và gõ:

Sau đó, lưu Podfile

4. Quay lại terminal và gõ “pod install”. Nếu không có lỗi, điều đó có nghĩa là SnapKit đã được cài đặt thành công.

5. Mở tệp Xcworkspace và bắt đầu viết mã ở đó.

Bạn cũng có thể đọc thêm giải thích về cài đặt SnapKit tại đây .

Tôi cho rằng bạn đã biết về thiết lập cần thiết để tạo toàn bộ giao diện người dùng theo cách lập trình. Nếu vậy, chúng ta hãy bắt đầu ngay lập tức.

Trước tiên , để đảm bảo rằng sau này bạn có thể sử dụng SnapKit để bố trí, bạn cần nhập thư viện đó vào tệp bạn muốn sử dụng.

Thứ hai , chúng ta chỉ cần khai báo nhãn của mình bên trong lớp của bộ điều khiển chế độ xem (Đối với dự án này, tôi vẫn đang tạo chế độ xem bên trong bộ điều khiển chế độ xem chứ không phải trong các tệp riêng biệt dành riêng cho từng chế độ xem). Trong quá trình khai báo nhãn, điều quan trọng nhất mà bạn không được quên là thêm nhãn.numberOfLines = 0 và nhãn.lineBreakMode = .byWordWrapping.

Những thứ này thực sự để làm gì?

Dựa trên những gì tôi đã đọc trên Tài liệu của Apple, đây là những gì tôi có thể chia sẻ:

Số dòng thực sự được sử dụng để kiểm soát số dòng tối đa được sử dụng để khớp văn bản nhãn vào hình chữ nhật bao quanh nó. Nếu chúng ta đặt giá trị là 0 có nghĩa là không có giới hạn số dòng và chúng ta có thể sử dụng bao nhiêu dòng tùy theo nội dung của văn bản.

Chế độ ngắt dòng thực sự được sử dụng để ngắt dòng và cắt bớt văn bản của nhãn. Có sẵn một số chế độ, nhưng đối với chế độ được sử dụng thường xuyên nhất là NSLineBreakMode.byWordWrapping. Nếu chúng ta sử dụng chế độ này, nó sẽ làm cho từ tiếp theo bị cắt/chuyển sang dòng mới nếu từ đó không vừa trong 1 dòng.

Bạn có thể đọc thêm về điều này trên Tài liệu dành cho nhà phát triển của Apple: Giải thích về số dòng & Giải thích về chế độ ngắt dòng .

Tiếp theo, chúng ta có thể tạo 3 chức năng như setupData, setupView và setupLayout. Đây là những gì bên trong mỗi chức năng (tôi không hiển thị kỹ lưỡng, chỉ hiển thị những gì có liên quan):

1. chức năng setupData:

2. chức năng setupView:

Bên trong chức năng này, chúng tôi có thể đặt màu nền của chế độ xem và chúng tôi cũng phải thêm nhãn mô tả của mình vào chế độ xem để đảm bảo rằng nó sẽ xuất hiện trên chế độ xem của chúng tôi.

3. Hàm setupLayout:

Bên trong chức năng này, chúng ta có thể thiết lập bố cục của nhãn sao cho nhãn ở đúng vị trí (như ý muốn của chúng ta).

Đây là cách đặt bố cục bằng SnapKit:
1. Nhập tên của thành phần mà chúng tôi muốn đặt bố cục. Trong trường hợp này, tôi muốn đưa ra bố cục trên nhãn topicDesc của mình. Đây là mã:

}

2. Viết ra tất cả các ràng buộc mà chúng tôi muốn. Trong trường hợp này, tôi muốn đặt vị trí nhãn topicDesc bên dưới tiêu đề chủ đề (với khoảng cách 21 pixel so với tiêu đề chủ đề dưới cùng). Đây là mã:

topicDesc.snp.makeConstraints { thực hiện trong
make.top.equalTo(topicTitle.snp.bottom).offset(21)
}

Tôi cũng muốn đặt vị trí nhãn topicDesc có khoảng cách 27 pixel từ bên trái và bên phải của superview . Đây là mã:

topicDesc.snp.makeConstraints { tạo trong
make.top.equalTo(topicTitle.snp.bottom).offset(21)
make.left.equalToSuperview().offset(27)
make.right.equalToSuperview().offset(-27)
}

Một số mẹo bổ sung khi sử dụng SnapKit:

Giá trị offset phải > 0 cho phần đệm trên cùng và bên trái/hàng đầu.
Giá trị offset phải < 0 cho phần đệm phía dưới và bên phải/ở cuối.

Chúng ta có thể sử dụng inset cho mã trong một hàng nếu khoảng cách bằng nhau, ví dụ:
topicDesc.snp.makeConstraints { make in
make.left.right.equalToSuperview().inset(27)
}

Cuối cùng , chúng ta phải gọi tất cả các chức năng mà chúng ta đã tạo trên view đã tải và chạy dự án để kiểm tra xem mọi thứ có chạy tốt và như mong muốn hay không.

Đáng kinh ngạc! Cuối cùng, chúng ta đã tìm hiểu về cách tự động chèn dòng mới cho nhãn theo nội dung văn bản & thiết lập bố cục bằng SnapKit trong Ứng dụng iOS. Bản thân việc sử dụng SnapKit đã thực sự giúp ích cho tôi trong việc bố cục khi làm việc với dự án của mình và bạn cũng có thể dùng thử. Nếu bạn tò mò và muốn biết thêm về SnapKit, bạn có thể đọc thêm về nó tại đây ).

Ngoài ra, nếu bạn tò mò và muốn biết thêm về dự án của nhóm tôi (Healo), bạn có thể dùng thử ứng dụng của chúng tôi trên Testflight ( Nhấp vào đây để kiểm tra ứng dụng của chúng tôi ).

Tôi hy vọng bài viết này có thể hữu ích cho bạn và nếu vậy, vui lòng giúp chia sẻ bài đăng này với bạn bè hoặc đồng nghiệp của bạn, những người cũng có thể thấy nó hữu ích cho họ và cũng có thể đưa ra bất kỳ phản hồi hoặc nhận xét nào. Cảm ơn bạn.

© 2022 Elvina Jacia. Đã đăng ký Bản quyền.