Chế độ xem bộ sưu tập hiện đại

• Trong thời quan 2 năm từ iOS13-iOS14 chúng ta đã thấy một số thay đổi đến từ Apple về UICollectionView và các type liên quan đến nó. Không những API mới được giới thiệu mà một số các concept, khái niệm đã từng được sử dụng để build collectionview đã được thay đổi và cập nhập theo các mô hình programming mới. Ở bài viết này chúng ta sẽ cumgf tìm hiểu các mô hình mới để hiểu thêm các collection này hoạt động ra sao.

1: Diffable data sources:

• Một trong những vấn đề chúng ta thường gặp lúc làm việc với collection view trên hệ thống từ trước iOS13 đến từ các trường hợp trong thực tế khi tất cả các cập nhật cần phải được triển khai thủ công bởi các developer( như cách sử dụng performBatchUpdates). Cách triển khai thủ công trên thường gây ra crash app khi mà các update kết thức không đông thời với các data model đang được sử dụng.

• Sử dụng UICollectionViewDiffableDataSource đồng nghĩa với việc chúng ta sẽ cho class đó tính toán sự thay đổi trạng thái của collection view và tự động thay đổi update các thay đổi cần thiết cho việc hiển thị data.

• Chúng ta lấy ví dụ về ProductListViewController hiển thị các product. Để viewcontroller sử dụng DiffableDataSource thì đầu tiên chúng ta phải khởi tạo một cellProvider closure để chuyển các indexPath cho UICollectionViewCell như sau:

• Sử dụng Swift strong type như cách trên vừa đảm bảo type safe cho các model data cũng như cho phép chúng ta có thể custom các type Hashable định nghĩa cho các Section thay vì luôn sử dụng Int:

• Điều cần làm bây giờ là chúng ta cần assign data cho collection view như cách chúng ta đã sử dụng trước đó:

• Khi các data model đã được update chúng ta cần thêm describe các state của current view cho dataSource để các cell có thể tự động theo dõi và update khi cần.

• Chúng ta sẽ sử dụng khái niệm snapshop cho các section đã được định nghĩa và update cho từng section từ data model. Cuối cùng chúng ta sử dụng snapshot cho dataSource bằng cách cập nhật collection view sau khi so sánh sự thay đổi trước đó:

• Nên lưu ý ở đây là chúng ta đang chuyển model Product trực tiếp cho dataSource bằng cách confirm Hashable. Cách làm trên có vấn đề nếu chúng ta có data model không thể confirm các protocol trên nên chúng ta có thể chuyển một số định dạng cho dataSource và sau đó sẽ tiến hành cho các model hoàn chỉnh trong cellProvider closure.

2: Cell registrations:

• Cell registrations là một concept mới trong iOS14 cho pháp chúng ta có thể định danh việc sử dụng subclass UICollectionViewCell cũng như hỗ trợ cách chúng ta tùy chỉnh collectionview cell với các object phức tạp. Chúng ta sẽ không cần nhớ tới việc phải khai báo chính các các loại cell cho công việc reuse identifier và các cell sẽ không cần type casting.

• Chúng ta sẽ sử dụng API mới để implement việc registration và configuration cho collectionview cell với ProductListViewController như sau:

• Chúng ta có thể xem lại method makeDataSource và thay đổi cellProvider như sau:

• Chúng ta vừa cải thiện đáng kể đoạn code trước đó với cellProvider closure đảm nhận trực tiếp việc cell registration. Chúng ta sẽ cần thêm một extension ở đây:

• Với extension trên chúng ta đã giảm số dòng code trên như sau:

3: Compositional layouts:

• Trước iOS13 chúng ta có 2 cách lựa chọn để tùy chỉnh layout cho UICollectionView. Cách đầu tiên là sử dụng UICollectionViewFlowLayout và chúng ta sẽ cùng thực hiện từ những bước đầu tiên cho lựa chọn này:

• Chúng ta cần định nghĩa rõ cho các compositional layout bao gồm: items, groups, sections. Item cho việc layout các cell, group cho việc layout các cell với nhau và các sectionsex bao gồm các section cho collectionview.

• Chúng ta muốn layout cho các product list view với các featured và onSale section đang sử sựng 2 column grid trong khi các section đang sử dụng full-width:

• Điểm mạnh của compositional layout là chúng ta có thể sử dụng nhiều layout cho trong một viewcontroller cũng như có thể describe layout mong muốn của chúng ta sử dụng fractional values:

• Để tối ưu đoạn code trên chúng ta sẽ sử dụng NSCollectionLayoutSection để lấy section index theo dạng Int:

• Điều cuối cùng chúng ta cần làm là inject đoạn code trên mỗi khi collectionView được khởi tao:

4: List views and content configurations:

• Ở iOS14 chúng ta hoàn toàn có thể build table view bằng cách sử dụng UICollectionView. Để render các section chúng ta đơn giản có thể sử dụng các định nghĩa list trước đó thay vì tự tạo riêng: