在iOS開發中,UITableView和UICollectionView是兩個非常核心的用於展示集合資料的UI元件。它們都能以列表的形式展示資料,但各自的特點和使用場景有所不同。
UITableView
UITableView
用於展示和管理垂直滾動的單列資料列表。它是以行的形式展示資料,每行(cell)可以展示相同或不同型別的資料。UITableView
廣泛用於展示資料集合,如聯絡人列表、設定選單、影片音樂列表等。
基本組成
- UITableViewDataSource:
UITableView
的資料來源,負責提供表格資料。它是一個協議,任何實現了該協議的物件都可以作為UITableView
的資料來源。主要方法包括提供行數、單元格(cell)內容等。 - UITableViewDelegate:處理使用者與
UITableView
互動的事件,如選擇某行、設定行高等。它也是一個協議。 - UITableViewCell:表格的行,是顯示資料的單元格。可以自定義單元格的樣式、新增檢視等。
基本使用
-
建立UITableView:可以透過Storyboard拖拽或程式碼建立。
UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain]; [self.view addSubview:tableView];
-
設定資料來源和代理:
tableView.dataSource = self; tableView.delegate = self;
-
實現UITableViewDataSource方法:最基本的有兩個方法,分別是提供行數和單元格內容。
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // 返回行數 return 10; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // 為每行建立或重用UITableViewCell物件 static NSString *cellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier]; } // 配置cell... cell.textLabel.text = [NSString stringWithFormat:@"Row %ld", (long)indexPath.row]; return cell; }
-
實現UITableViewDelegate方法(可選):例如,處理行的選擇事件。
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"Selected row at index path: %@", indexPath); }
自定義UITableViewCell
為了展示更豐富的內容,您可能需要自定義UITableViewCell
。這可以透過Storyboard設計或程式碼實現。自定義單元格允許您在單元格中新增圖片、標籤、按鈕等UI元件,以滿足複雜的佈局需求。
ICollectionView
UICollectionView
用於展示和管理資料集合的有序排列。與UITableView
相比,UICollectionView
提供了更高的自定義能力,支援多列資料展示,以及各種複雜的佈局,如網格檢視、瀑布流、旋轉木馬等。
基本概念
- UICollectionView:一個用於展示資料集合的滾動檢視,可以高度自定義其佈局。
- UICollectionViewCell:
UICollectionView
中的單元格,用於展示資料項。可以自定義單元格來展示覆雜的佈局。 - UICollectionViewLayout:定義了
UICollectionView
中單元格的組織和排列方式。UICollectionViewFlowLayout
是一個預定義的佈局,支援網格和線性佈局。 - DataSource (
UICollectionViewDataSource
):提供UICollectionView
所需的資料,如單元格的數量和內容。 - Delegate (
UICollectionViewDelegate
):處理UICollectionView
中的使用者互動事件,如單元格的選擇。 - DelegateFlowLayout (
UICollectionViewDelegateFlowLayout
):一個可選的協議,用於調整佈局屬性,如單元格的大小和間距(僅在使用UICollectionViewFlowLayout
時)。
基本使用步驟
-
建立UICollectionView:可以透過Storyboard或程式碼建立。如果是透過程式碼建立,需要指定一個佈局物件。
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout]; collectionView.backgroundColor = [UIColor whiteColor]; [self.view addSubview:collectionView];
-
註冊單元格:在使用單元格之前,需要註冊單元格類或nib。
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
-
設定DataSource和Delegate:
collectionView.dataSource = self; collectionView.delegate = self;
-
實現DataSource方法:提供必要的資料資訊,如單元格的數量和如何配置每個單元格。
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 20; // 返回單元格數量 } - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath]; // 配置cell... return cell; }
-
實現Delegate方法(可選):處理使用者互動,如單元格的選擇。
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"Selected item at section %ld, item %ld", (long)indexPath.section, (long)indexPath.item); }
自定義佈局
UICollectionView
的強大之處在於其佈局的高度可定製性。你可以透過繼承UICollectionViewLayout
或其子類UICollectionViewFlowLayout
來建立自定義佈局。自定義佈局允許你控制單元格的排列方式、方向、大小和間距等。
示例:使用UICollectionViewFlowLayout
UICollectionViewFlowLayout
是一個預定義的佈局,支援建立網格和水平滾動的佈局。透過調整其屬性,如itemSize
、minimumLineSpacing
和minimumInteritemSpacing
,可以快速實現基本的佈局需求。
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(100, 100); // 設定單元格大小
layout.minimumLineSpacing = 10; // 設定行間距
layout.minimumInteritemSpacing = 10; // 設定單元格之間的最小間距
layout.scrollDirection = UICollectionViewScrollDirectionVertical; // 設定滾動方向