iOS开发-列表视图的基本介绍与使用
在iOS开发中,UITableView和UICollectionView是两个非常核心的用于展示集合数据的UI组件。它们都能以列表的形式展示数据,但各自的特点和使用场景有所不同。UITableView
UITableView用于展示和管理垂直滚动的单列数据列表。它是以行的形式展示数据,每行(cell)可以展示相同或不同范例的数据。UITableView广泛用于展示数据集合,如接洽人列表、设置菜单、视频音乐列表等。
https://img2024.cnblogs.com/blog/3451917/202407/3451917-20240704171857207-212835585.png
基本组成
[*]UITableViewDataSource:UITableView的数据源,负责提供表格数据。它是一个协议,任何实现了该协议的对象都可以作为UITableView的数据源。重要方法包括提供行数、单元格(cell)内容等。
[*]UITableViewDelegate:处理用户与UITableView交互的事件,如选择某行、设置行高等。它也是一个协议。
[*]UITableViewCell:表格的行,是显示数据的单元格。可以自定义单元格的样式、添加视图等。
基本使用
[*]创建UITableView:可以通过Storyboard拖拽或代码创建。
UITableView *tableView = [ initWithFrame:self.view.bounds style:UITableViewStylePlain];
;
[*]设置数据源和代理:
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 = ;
if (cell == nil) {
cell = [ initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
}
// 配置cell...
cell.textLabel.text = ;
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提供了更高的自定义本领,支持多列数据展示,以及各种复杂的布局,如网格视图、瀑布流、旋转木马等。
https://img2024.cnblogs.com/blog/3451917/202407/3451917-20240704172247888-281362821.png
基本概念
[*]UICollectionView:一个用于展示数据集合的滚动视图,可以高度自定义其布局。
[*]UICollectionViewCell:UICollectionView中的单元格,用于展示数据项。可以自定义单元格来展示复杂的布局。
[*]UICollectionViewLayout:定义了UICollectionView中单元格的组织和分列方式。UICollectionViewFlowLayout是一个预定义的布局,支持网格和线性布局。
[*]DataSource (UICollectionViewDataSource):提供UICollectionView所需的数据,如单元格的数量和内容。
[*]Delegate (UICollectionViewDelegate):处理UICollectionView中的用户交互事件,如单元格的选择。
[*]DelegateFlowLayout (UICollectionViewDelegateFlowLayout):一个可选的协议,用于调整布局属性,如单元格的巨细和间距(仅在使用UICollectionViewFlowLayout时)。
基本使用步骤
[*]创建UICollectionView:可以通过Storyboard或代码创建。如果是通过代码创建,必要指定一个布局对象。
UICollectionViewFlowLayout *layout = [ init];
UICollectionView *collectionView = [ initWithFrame:self.view.bounds collectionViewLayout:layout];
collectionView.backgroundColor = ;
;
[*]注册单元格:在使用单元格之前,必要注册单元格类或nib。
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 = ;
// 配置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 = [ init];
layout.itemSize = CGSizeMake(100, 100); // 设置单元格大小
layout.minimumLineSpacing = 10; // 设置行间距
layout.minimumInteritemSpacing = 10; // 设置单元格之间的最小间距
layout.scrollDirection = UICollectionViewScrollDirectionVertical; // 设置滚动方向
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]