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


摘要

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

  • Compositional Layout 擺脫巢狀 Collection View 的限制,提供創新的介面設計模式和靈活性。
  • 它強調以用戶為中心的設計原則,能根據用戶偏好和設備螢幕尺寸優化 App 介面。
  • 透過與 Jetpack Compose 的強大整合,開發者可以建立高度互動且反應靈敏的 App 介面。
這篇文章深入探討了 Compositional Layout 如何改變傳統 UI 開發方式,並展示其在實現複雜佈局和優化效能上的潛力。

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

雖然現在談論組合佈局已經遲了5年,但傳播知識永遠不嫌晚。在這個充滿 SwiftUI 應用程式構建的世界裡,我們想稍微退一步,探討一下老派的 UI Kit 及其仍被眾多開發者廣泛使用的強大功能。你有沒有想過 iOS 13 中 ′App Store′ 的介面是如何構建的?如果有,那麼你很幸運,這篇文章就是關於如何使用 Collection View Compositional Layout 建立類似 App Store 的介面。

在引入 Compositional Layout 之前,如果我們需要製作包含水平和垂直滾動的任何 UI,就必須將一個 Collection View 巢狀在外部 Collection View 的每個單元中。這是一項繁瑣的任務。感謝 Apple 在 WWDC 2019 引入了 Compositional Layout,使得這項工作變得更簡單、更容易實現,也更易於維護。

結合 SwiftUI 與 UI Kit 的優勢:Compositional Layout 允許開發人員靈活地將 SwiftUI 檢視與 UI Kit 檢視結合在單一介面中,同時保留每個框架的優點。這提供了在設計和功能上進行更精細控制的可能性。

支援動態內容和自適應佈局:Compositional Layout 的強大功能在於它能輕鬆地處理動態內容和自適應佈局。開發人員可以定義佈區域性分,這些部分根據裝置方向、螢幕尺寸和內容大小自動調整。這確保了應用程式的介面在各種裝置上都能一致且美觀。

利用新的 Compositional Layout,不僅使我們能夠建立複雜而美觀的介面,還大幅減少了開發時間,提高了維護效率。我們將逐步講解如何實現這些功能,希望透過本文,你也能掌握並運用到自己的專案中去。

難度:中等
GitHub:https://github.com/suhasg03/compositional-layout-uikit
使用 Compositional Layout 的核心組成部分包括:
Items(專案)
Groups(群組)
Sections(區段)
Layout(佈局)

設定資料來源和委派與往常一樣。因此我會略過這部分,直接進入 ′Flow Layout′ 的設定。
我們在研究許多文章後,彙整重點如下
網路文章觀點與我們總結
  • 自動排版是一種建構適應性介面的開發工具,可以通過定義約束條件來規範App中的內容。
  • AWD(Adaptive Web Design)是自適應式網站設計方式,2010年提出,能滿足使用者需求。
  • 響應式設計(Responsive Design)能讓網頁或手機APP介面自動適應不同螢幕尺寸和解析度。
  • 三欄式自適應欄位示例:桌機3欄、平板2欄、手機1欄,搭配max-width與百分比設定。
  • RWD(Responsive Web Design)透過CSS技術,使網站在不同解析度下改變佈局和排版。
  • 卡片式佈局利用元素自身邊距及間距減少用戶認知負荷,合理安排元素位置。

隨著科技的進步,我們的數位生活也越來越方便了。無論是透過自動排版工具還是響應式設計技術,都可以讓我們的App和網站更加符合不同裝置和螢幕尺寸的需求。不僅提高了使用體驗,也讓開發者更容易管理多樣化的平台。這些技術不僅提升了效率,更讓我們享受了一個更流暢、更直觀的數位世界。

觀點延伸比較:
技術介紹適用場景最新趨勢權威觀點
自動排版 (Auto Layout)自動排版是一種建構適應性介面的開發工具,可以通過定義約束條件來規範App中的內容。移動應用程式、跨平台開發更高效的Constraint Engine和視覺化編輯器正在成為趨勢。A List Apart指出,自動排版能顯著減少開發時間,同時提高介面一致性。
AWD (Adaptive Web Design)自適應式網站設計方式,2010年提出,能滿足使用者需求。B2B網站、需要高度客製化的網頁PWA(Progressive Web Apps)以及Server-Side Rendering正成為新寵。Nielsen Norman Group強調,AWD在提升使用者體驗上具有卓越表現。
響應式設計 (Responsive Design)能讓網頁或手機APP介面自動適應不同螢幕尺寸和解析度。E-commerce網站、新聞媒體網站CWAs(Composable Web Applications)和CSS Grid Layout是目前的熱點技術。W3C表示,響應式設計已成為現代Web開發的標配技能之一。
三欄式自適應欄位示例桌機3欄、平板2欄、手機1欄,搭配max-width與百分比設定。MVP(Minimum Viable Product)、快速原型設計SASS/SCSS預處理器與Flexbox布局系統受到廣泛推崇。The Verge指出,多屏佈局已經是業界標準做法。
RWD (Responsive Web Design)透過CSS技術,使網站在不同解析度下改變佈局和排版。部落格、小企業官網CSS Variables 和Custom Properties 成為主流技術選項Smashing Magazine認為RWD 是未來前端開發不可或缺的一部分。
卡片式佈局利用元素自身邊距及間距減少用戶認知負荷, 合理安排元素位置.社交媒體平台、內容聚合網站Masonry 布局与Intersection Observer API 技術相結合逐漸普及.Medium 認為卡片式佈局具備極佳的可掃描性, 是信息密集型網站的不二之選.

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 介面


說明

組合佈局的核心組成部分如上所述。′專案′ 代表需要顯示的資料。這些專案被封裝在稱為 ′群組′ 的實體內。而這些群組又被封裝在 ′區段′ 內,區段則位於最終的實體 ′佈局′ 中。

如果我們仔細觀察 App Store,它由多個垂直滾動的區段構成,每個區段可以水平滾動。在這個例子中,我們假設每個佈局中只有一個可見專案且它是水平滾動的,其餘部分每次有四個可見專案,同樣也是水平滾動。按如下方式生成資料,並使用上述提到的組合佈局來獲得與 App Store 相同的效果。

**最新趨勢:**近年來,Compositional Layout 已廣泛運用於各種行動應用程式中,包括電子商務、影音串流和社群媒體,因其高度的客製化性和靈活性。這種版面配置有助於開發者建立更直觀且互動性強的使用者介面。

**深度要點:**Compositional Layout 提供了豐富的屬性,允許開發者精確控制專案的大小、位置和間距,同時支援水平和垂直滾動。它還支援頭尾專案的功能,例如固定標題或可滑動的底部導覽列,進一步增強使用者的體驗。


一個表示資料的結構體。

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介面設計自動適應不同的螢幕尺寸和解析度。響應式設計的 ...

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

J.K.

專家

相關討論

❖ 相關專欄