iOS开发-列表视图的基本介绍与使用

在iOS开发中，UITableView和UICollectionView是两个非常核心的用于展示集合数据的UI组件。它们都能以列表的形式展示数据，但各自的特点和使用场景有所不同。
UITableView

UITableView用于展示和管理垂直滚动的单列数据列表。它是以行的形式展示数据，每行（cell）可以展示相同或不同范例的数据。UITableView广泛用于展示数据集合，如接洽人列表、设置菜单、视频音乐列表等。

基本组成

• UITableViewDataSource：UITableView的数据源，负责提供表格数据。它是一个协议，任何实现了该协议的对象都可以作为UITableView的数据源。重要方法包括提供行数、单元格（cell）内容等。
  
• UITableViewDelegate：处理用户与UITableView交互的事件，如选择某行、设置行高等。它也是一个协议。
  
• UITableViewCell：表格的行，是显示数据的单元格。可以自定义单元格的样式、添加视图等。
  

基本使用

• 创建UITableView：可以通过Storyboard拖拽或代码创建。
  1. UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
  2. [self.view addSubview:tableView];

  复制代码
• 设置数据源和代理：
  1. tableView.dataSource = self;
  2. tableView.delegate = self;

  复制代码
• 实现UITableViewDataSource方法：最基本的有两个方法，分别是提供行数和单元格内容。
  1. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  2.     // 返回行数
  3.     return 10;
  4. }
  6. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  7.     // 为每行创建或重用UITableViewCell对象
  8.     static NSString *cellIdentifier = @"Cell";
  9.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
  10.     if (cell == nil) {
  11.         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
  12.     }
  13.    
  14.     // 配置cell...
  15.     cell.textLabel.text = [NSString stringWithFormat:@"Row %ld", (long)indexPath.row];
  16.    
  17.     return cell;
  18. }

  复制代码
• 实现UITableViewDelegate方法（可选）：例如，处理行的选择事件。
  1. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
  2.     NSLog(@"Selected row at index path: %@", indexPath);
  3. }

  复制代码

自定义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或代码创建。如果是通过代码创建，必要指定一个布局对象。
  1. UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
  2. UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
  3. collectionView.backgroundColor = [UIColor whiteColor];
  4. [self.view addSubview:collectionView];

  复制代码
• 注册单元格：在使用单元格之前，必要注册单元格类或nib。
  1. [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];

  复制代码
• 设置DataSource和Delegate：
  1. collectionView.dataSource = self;
  2. collectionView.delegate = self;

  复制代码
• 实现DataSource方法：提供必要的数据信息，如单元格的数量和怎样配置每个单元格。
  1. - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
  2.     return 20; // 返回单元格数量
  3. }
  5. - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
  6.     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
  7.     // 配置cell...
  8.     return cell;
  9. }

  复制代码
• 实现Delegate方法（可选）：处理用户交互，如单元格的选择。
  1. - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
  2.     NSLog(@"Selected item at section %ld, item %ld", (long)indexPath.section, (long)indexPath.item);
  3. }

  复制代码

自定义布局

UICollectionView的强大之处在于其布局的高度可定制性。你可以通过继承UICollectionViewLayout或其子类UICollectionViewFlowLayout来创建自定义布局。自定义布局允许你控制单元格的分列方式、方向、巨细和间距等。
示例：使用UICollectionViewFlowLayout

UICollectionViewFlowLayout是一个预定义的布局，支持创建网格和程度滚动的布局。通过调整其属性，如itemSize、minimumLineSpacing和minimumInteritemSpacing，可以快速实现基本的布局需求。

1. UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
2. layout.itemSize = CGSizeMake(100, 100); // 设置单元格大小
3. layout.minimumLineSpacing = 10; // 设置行间距
4. layout.minimumInteritemSpacing = 10; // 设置单元格之间的最小间距
5. layout.scrollDirection = UICollectionViewScrollDirectionVertical; // 设置滚动方向

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。