發揮 Compositional Layout 的威力——告別巢狀 Collection Views！

摘要

Compositional Layout 為 UI 設計帶來了革命性的變革，它讓開發者擁有更多靈活性和控制權，以打造更複雜且自適應的 App 介面。 歸納要點:

• Compositional Layout 擺脫巢狀 Collection View 的限制,提供創新的介面設計模式和靈活性。
• 它強調以用戶為中心的設計原則,能根據用戶偏好和設備螢幕尺寸優化 App 介面。
• 透過與 Jetpack Compose 的強大整合,開發者可以建立高度互動且反應靈敏的 App 介面。

使用 Compositional Layout 建立複雜、靈活且適應性高的 iOS 介面。

我們在研究許多文章後,彙整重點如下

override func viewDidLoad() {         super.viewDidLoad()                  // Set delegate and data source         self.clCollectionView.dataSource = self         self.clCollectionView.setCollectionViewLayout(self.compositionalLayout(), animated: true)     }  private func compositionalLayout() -> UICollectionViewLayout {         let layout = UICollectionViewCompositionalLayout { (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in             if sectionIndex == 0 {                 let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))                 let item = NSCollectionLayoutItem(layoutSize: itemSize)                                  let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.8), heightDimension: .absolute(300.0))                 let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])                 group.contentInsets = NSDirectionalEdgeInsets(top: 5.0, leading: 5.0, bottom: 5.0, trailing: 5.0)                                  let section = NSCollectionLayoutSection(group: group)                 section.orthogonalScrollingBehavior = .groupPaging                 return section             } else {                 let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.5))                 let item = NSCollectionLayoutItem(layoutSize: itemSize)                 item.contentInsets = NSDirectionalEdgeInsets(top: 5.0, leading: 5.0, bottom: 5.0, trailing: 5.0)                                  let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .absolute(120))                 let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])                 group.contentInsets = NSDirectionalEdgeInsets(top: 5.0, leading: 5.0, bottom: 5.0, trailing: 5.0)                                  let secondGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .absolute(120))                 let secondGroup = NSCollectionLayoutGroup.vertical(layoutSize: secondGroupSize, subitems: [item])                 secondGroup.contentInsets = NSDirectionalEdgeInsets(top: 5.0, leading: 5.0, bottom: 5.0, trailing: 5.0)                                  let finalGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(120))                 let finalGroup = NSCollectionLayoutGroup.horizontal(layoutSize: finalGroupSize, subitems: [group, secondGroup])                                  let section = NSCollectionLayoutSection(group: finalGroup)                 section.orthogonalScrollingBehavior = .groupPaging                 return section             }         }         return layout     }

掌握 Compositional Layout 的精髓：以使用者為中心，設計直觀且互動性強的 App 介面

struct HomeScreenModel: Codable, Hashable {     var id: String     var name: String     var image: String }

private func generateDataSource() {         self.collectionViewDataSource.removeAll()         for num in 0..<10 {             var dataToAppend: [HomeScreenModel] = []             dataToAppend.removeAll()             for number in 0..<10 {                 let random_number = Int.random(in: 0..

透過 UICollectionView 掌握自適應版面配置

我們透過 NSCollectionLayoutSize（） 設定專案大小。這個函式接收兩個引數，一個是寬度引數，另一個是高度引數。有三種方式可以設定寬度和高度的尺寸。我們在此使用的是「fractional」（比例）寬度和高度。另外兩種方式分別是：「absolute」（絕對值）和「estimated」（估算值）。完成這一步後，我們使用 NSCollectionLayoutItem（） 建立專案本身。

下一步是建立群組大小。這依然使用 NSCollectionLayoutSize（）。如果你注意到程式碼，在此我們利用了「absolute」來設定群組的高度，並將寬度設為 80％。

接下來就是建立群組，把已建立的專案嵌入到群組中。請記住，我們把專案的高和寬尺寸都設定為 100％（1．0），這意味著該專案會佔據整個群組所佔用的空間，即 80％ 的寬度和 300 的高度。

隨後的一步是透過將群組嵌入其中來建立區段，使用 NSCollectionLayoutSection（） 並啟用 orthogonalScrollingBehavior（正交滾動行為）以實現分頁功能。（有五種變體可供選擇：continuous、paging、groupPagingCentered、continuousGroupLeadingBoundary 和 groupPaging，否則不設定）。完成區段後，我們返回它以便建立第一部分的佈局。

上述步驟同樣適用於其餘部分。在第一部分中，我們建立了一個專案、一個群組、一個區段以及一個佈局。但對於其餘部分，我們需要建立四個專案。如果看看最終產品，每一佈局需要四個專案。我們可以透過將多層次的群組巢狀在一起輕鬆實現這一點。

**最新趨勢：自適應版面配置**

近來，自適應版面配置技術備受重視，它能自動調整版面以適應不同裝置和螢幕尺寸。在 UICollectionView 中，自適應版面配置可確保專案的大小和位置在各種裝置上都能呈現最佳狀態。

**深入要點：效能最佳化**

最佳化 UICollectionView 的效能至關重要，特別是在處理大量資料時。可以透過減少不必要的佈局計算、暫存運算結果以及使用離螢幕セル技術來提升效能。離螢幕セル技術可將暫時不在畫面上方顯示的セル移除，以節省記憶體和處理資源。

let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .absolute(120)) let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item]) group.contentInsets = NSDirectionalEdgeInsets(top: 5.0, leading: 5.0, bottom: 5.0, trailing: 5.0)                  let secondGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .absolute(120)) let secondGroup = NSCollectionLayoutGroup.vertical(layoutSize: secondGroupSize, subitems: [item]) secondGroup.contentInsets = NSDirectionalEdgeInsets(top: 5.0, leading: 5.0, bottom: 5.0, trailing: 5.0)                  let finalGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(120)) let finalGroup = NSCollectionLayoutGroup.horizontal(layoutSize: finalGroupSize, subitems: [group, secondGroup])

結合 Compose，提升使用者體驗：強大、快速、直觀

在上述程式碼片段中，我們建立了兩個不同的群組 ′group′ 和 ′secondGroup′，並包含子專案。每個專案的高度設定為 50％，允許將兩個專案嵌入到群組中，並利用程式碼中的 ′．vertical′ 函式將它們上下排列。我們建立了一個嵌入這兩個先前建立的群組的最終群組。這兩個群組 ′group′ 和 ′secondGroup′ 的寬度均設定為 50％，以便能夠在一個佈局內容納這兩個群組。後續步驟與之前提到的步驟相似。

Compositional Layouts 確實非常強大，能夠大量減少複雜 UI 的建立時間和編碼工作，而且最大的優點是其快速且易於維護。使用 Compositional Layout 來建立令人驚豔的使用者介面，並結合 Diffable Data Sources，可以使應用程式更加快速和直觀。我希望這篇文章能幫助你更清晰地構建使用者介面。

**專案1：採用 Diffable Data Sources 提升效能**

Compose 搭配 Diffable Data Sources 可讓應用程式更快速、直觀。Diffable Data Sources 能夠追蹤資料集的變化，並只更新必要的 UI 元素，從而最佳化效能。

**專案2：整合資料繫結框架，打造動態 UI**

Compose 可與資料繫結框架（例如 Data Binding 或 StateFlow）無縫整合，允許開發人員建立動態更新的 UI。透過資料繫結，應用程式可以根據資料變更自動調整 UI，提供更好的使用者體驗。

參考來源

HIG iOS 翻譯Visual Design｜視覺設計. Adaptivity and Layout 適應性 ...

自動排版. 自動排版是建構適應性介面的開發工具。使用自動排版，你可以定義約束條件*¹來規範App中的內容。舉例，你可以約束一個按鈕永遠是水平置中，且 ...

來源： Medium

RWD 響應式網頁是什麼？5 種響應式網頁模板與3 大範例介紹

... 自動改變排版佈局的技術名稱。 這個名詞是2010年時由 ... 使用者的需求。 ... AWD是「自適應式網站」的英文簡稱，全名為Adaptive Web Design，也是一種響應式網站的設計方式。

來源： Welly SEO

網站頁面設計：多個RWD 網頁版面架構範例（含觀念＋設計軟體）

這篇文章，會告訴你「 網站頁面設計」是什麼，以及進行網頁版面設計流程、常見的版面設計有哪些、設計案例參考、軟體使用、版型套用等.

來源： 犬哥網站

【UI設計是什麼】搞懂UI/UX！介面設計教學+UI 設計師必備技能

響應式設計（Responsive Design）. 響應式設計是一種流動性的布局策略，能夠讓網頁或手機APP介面設計自動適應不同的螢幕尺寸和解析度。響應式設計的 ...

來源： websitebuilder.com.tw

RWD|常見佈局設定+UI設計注意細節 - iT 邦幫忙

網頁排版個人學習筆記系列第23 篇. echocarrie. 5 年前 ... 三欄式自適應欄位延伸示意圖. 版面設定：桌機3欄、平版2欄、手機1欄; 搭配max-width 與％ 範例. 無論是幾欄式設計 ...

來源： iT 邦幫忙

製作網站不能沒有談到的功能- RWD響應式設計(自適應網頁) - 進度條

RWD響應式設計全名為Responsive Web Design，也有人稱自應性設計，主要是透過CSS的技術，讓你的網站可以在不同解析度下，來改變網頁頁面的佈局以及排版， ...

來源： progressbar.tw

RWD 響應式v.s AWD 自適應網頁有何不同？手機版網頁設計怎麼選？

為什麼架設網站，都說要使用RWD 響應式設計製作手機版網頁？」本篇告訴你什麼是響應式設計，以及和它很相似的自適應設計，還有用哪一種方式設計手機版 ...

來源： Hahow 好學校

UI設計技巧：頁面排版佈局時需要注意哪些技巧- inspirroutlet新聞資料頻道

閉合性是透過合理佈局元素自身的邊距以及元素間的間距，以減少用戶的認知負荷。現在流行的卡片式佈局就利用這一排版佈局原則，將元素整合到卡片內，合理安排元素的間距來 ...

來源： inspirroutlet.com