iOS-列表檢視

机械心發表於2024-07-04
iOS

在iOS開發中，UITableView和UICollectionView是兩個非常核心的用於展示集合資料的UI元件。它們都能以列表的形式展示資料，但各自的特點和使用場景有所不同。

UITableView

UITableView用於展示和管理垂直滾動的單列資料列表。它是以行的形式展示資料，每行（cell）可以展示相同或不同型別的資料。UITableView廣泛用於展示資料集合，如聯絡人列表、設定選單、影片音樂列表等。

基本組成

  • UITableViewDataSource：UITableView的資料來源，負責提供表格資料。它是一個協議，任何實現了該協議的物件都可以作為UITableView的資料來源。主要方法包括提供行數、單元格（cell）內容等。
  • UITableViewDelegate：處理使用者與UITableView互動的事件，如選擇某行、設定行高等。它也是一個協議。
  • UITableViewCell：表格的行，是顯示資料的單元格。可以自定義單元格的樣式、新增檢視等。

基本使用

  1. 建立UITableView：可以透過Storyboard拖拽或程式碼建立。

    UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
[self.view addSubview:tableView];

  2. 設定資料來源和代理：

    tableView.dataSource = self;
tableView.delegate = self;

  3. 實現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;
}

  4. 實現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時）。

基本使用步驟

  1. 建立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];

  2. 註冊單元格：在使用單元格之前，需要註冊單元格類或nib。

    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];

  3. 設定DataSource和Delegate：

    collectionView.dataSource = self;
collectionView.delegate = self;

  4. 實現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;
}

  5. 實現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; // 設定滾動方向

相關文章