SwiftUI – Phần 10 : Grid Layout

Chào mừng bạn đến với Fx Studio. Chúng ta lại gặp nhau trong chặn đường mới trong vũ trụ SwiftUI bất tận này. Phần mới này sẽ liên quan tới một bố cục giao diện theo dạng lưới (hay ô) và chắc bạn đã quen thuộc với CollectionView trong UIKit rồi. Còn với SwiftUI, chúng nó được gọi là Grid Layout. Bạn sẽ lần lượt khám phá các vấn đề với Grid Layout & tối ưu giao diện hiển thị đẹp hơn cho ứng dụng của bạn.

Nào, bây giờ thì …

Bắt đầu thôi!

1. Giới thiệu

1.1. Chuẩn bị

Dành cho các bạn chưa đọc 9 phần của series SwiftUI Notes này, thì có thể truy cập ở link sau đây:

1. 1. Làm quen với SwiftUI
   2. Cơ bản về ứng dụng SwiftUI App
   3. Tích hợp SwiftUI và UIKit
   4. Apple Ecosystem
   5. Multiplatform App
   6. Basic UI Controls
   7. State & Data Flow
   8. Working with List
   9. Routing in SwiftUI

Về mặt chuẩn bị, chúng ta sẽ vẫn là những yêu cầu cơ bản từ phần một. Nếu như bạn có thể cập nhật tất cả lên version mới nhất thì càng tốt. Còn sau đây là cấu hình đề xuất cho bạn:

• • Xcode 13
  • Swift 5.5
  • SwiftUI 3.0

Về mặt kiến thức, bạn cần biết trước các kiến thức cơ bản với SwiftUI & SwiftUI App. Tham khảo các bài viết sau, nếu bạn chưa đọc qua SwiftUI:

• • Làm quen với SwiftUI
  • Cơ bản về ứng dụng SwiftUI App

(Mặc định, mình xem như bạn đã biết về cách tạo project với SwiftUI & SwiftUI App rồi.)

1.2. Grid Layout

Để hiển thị một danh sách, bạn có đối tượng List. Ngoài ra, bạn còn có thêm một kiểu bố cục giao diện cho danh sách. Đó là Grid hay Grid Layout. Đây là phiên bản của UICollectionView trong UIKit. Còn với SwiftUI, bạn sẽ có tới 2 đại diện là LazyVGrid & LazyHGrid.

Vì kiểu giao diện này cũng phá phổ biến trong các ứng dụng mobile. Ví dụ như: xem danh sách các album ảnh, danh sách video, photos … hoặc cách giao diện bạn biến đổi từ iPhone sang iPad. Thì sự lựa chọn Grid hầu như sẽ tối ưu hơn dạng List.

Grid Layout là cho giao diện của Row/Item/Cell bên trong không bị phá vỡ. Chúng vẫn như vậy và sẽ được ráp thêm hoặc bớt số lượng trên cùng một hàng mà thôi. Còn với List, bạn sẽ thấy các Row bị kéo dài ra, đi theo là các layout trong cũng bị ảnh hưởng.

Và các đối tượng Grid trong SwiftUI vẫn kế thừa mạnh mẽ lại các tinh hoa của UICollectionView từ UIKit. Tuy nhiên, nó sẽ mang tới cho bạn một trải nghiệm mới. Đó là:

EZ!

Kể cả cho các giao diện Grid phức tạp, như: Grid trong Grid, biến đổi bố cục … Thì SwiftUI cũng đơn giản hóa thao tác của bạn rất nhiều. Đây cũng là điều mà bạn sẽ cảm nhận được rõ nhất với chương thứ 10 này.

(Chúng ta sẽ dần dần khám phá tiếp thông qua danh sách các bài viết dưới đây.)

2. Danh sách

Các bài viết trong phần Grid Layout này sẽ tập trung nhiều vào thực hành là chính. Các kiến thức lý thuyết hầu như không mới. Bạn sẽ áp dụng lại được nhiều từ các các phần trước, nhất là Working with List. Do đó, bạn sẽ tiếp cận và nắm bắt được chúng rất nhanh.

Danh sách như sau:

1. 1. Basic Grid Layout
   2. GridItem & Configuring GridLayout
   3. Section in Grid
   4. Switching Grid Layout
   5. Multiple Grids

Về mặt các project demo cho các bài viết, bạn có thể checkout lại đây. Bạn cũng không cần quá lo lắng về thiết kế giao diện. Vì chúng rất đơn giản & cơ bản. Và nếu bạn sáng tạo hơn thì sẽ rất tốt. Hy vọng bạn sẽ kết hợp thêm các kiến thức từ các phần trước, để xây dựng một ứng dụng hoàn chỉnh hơn nữa.

Lưu ý

Công nghệ mỗi ngày là một thay đổi và bạn phải dành ra nhiều thời gian để cập nhất nó hằng ngày. Do đó, các bài viết sẽ mang tính chất giới thiệu và ở mức độ cơ bản mà thôi. Và cho đúng thời điểm hiện tại với SwiftUI 3.0. Có thể trong quá trình nghiên cứu thêm, mình sẽ bổ sung thêm các phần lý thuyết cho chương này của series.

3. Thông tin và trạng thái

3.1. Thông tin

• • Website: Fx Studio
  • Link seri: https://fxstudio.dev/tag/swiftui-notes/
  • Github: https://github.com/fx-studio/swiftui-notes
  • Trạng thái: đang cập nhật

Nếu bạn có đóng góp hay nhận xét về series này, cách viết bài, cũng như nội dung truyền tải. Thì mình rất rất cảm ơn. Nếu có bất cứ vấn đề gì, thì bạn có thể liên lạc theo các địa chỉ dưới đây.

• • Website: https://fxstudio.dev/contact/
  • Email: lephuongtien.dev@gmail.com

3.2. Bản quyền

Về bản quyền của series SwiftUI Notes là của Fx Studio, bao gồm các bài viết trên website & mã nguồn trên GitHub. Và chúng hoàn toàn miễn phí cho các mục đích phi lợi nhuận và học tập. Tất cả các hành vi sao chép hay sử dụng vì mục đích thương mại đều là vi phạm.

Vui lòng để lại link bài viết gốc, nếu bạn muốn sử dụng & cũng như trích dẫn các nội dụng từ các bài viết trong series SwiftUI Notes này.

3.3. Các phần khác trong series:

1. Làm quen với SwiftUI
2. Cơ bản về ứng dụng SwiftUI App
3. Tích hợp SwiftUI và UIKit
4. Apple Ecosystem
5. Multiplatform App
6. Basic UI Controls
7. State & Data Flow
8. Working with List
9. Routing in SwiftUI
10. Grid Layout
11. …

Cảm ơn bạn đã ủng hộ Fx Studio và series SwiftUI Notes!

Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!