iOS開發-列表檢視的基本介紹與使用

机械心發表於2024-07-04

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

UITableView

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

基本組成

  • UITableViewDataSourceUITableView的資料來源,負責提供表格資料。它是一個協議,任何實現了該協議的物件都可以作為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:一個用於展示資料集合的滾動檢視,可以高度自定義其佈局。
  • UICollectionViewCellUICollectionView中的單元格,用於展示資料項。可以自定義單元格來展示覆雜的佈局。
  • 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是一個預定義的佈局,支援建立網格和水平滾動的佈局。透過調整其屬性,如itemSizeminimumLineSpacingminimumInteritemSpacing,可以快速實現基本的佈局需求。

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(100, 100); // 設定單元格大小
layout.minimumLineSpacing = 10; // 設定行間距
layout.minimumInteritemSpacing = 10; // 設定單元格之間的最小間距
layout.scrollDirection = UICollectionViewScrollDirectionVertical; // 設定滾動方向

相關文章