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; // 設置滾動方向