UI学习——UITableView
文章目录
- 一、UITableView基础
-
- 1.基本概念
- 2.基本用法
- 二、UITableView协议
-
- 三、UITableView高级协议和单元格
- 总结
一、UITableView基础
1.基本概念
UITableView是iOS开发中的一个控件，用于展示列表数据。它类似于HTML中的表格（table），但更加强大和灵活。UITableView可以支持滚动、选中、插入、删除等各种操作，并且可以高度自定义。
2.基本用法
（1）创建UITableView实例；
（2）设置UITableView的delegate和dataSource；
（3）实现UITableViewDelegate和UITableViewDataSource协议中的方法；
（4）将UITableView添加到视图中。
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
<
//实现数据视图的普通协议
//数据视图的普通事件处理
UITableViewDelegate,
//实现数据视图的数据代理协议
//处理数据视图的数据代理
UITableViewDataSource
>
{
//定义一个数据视图对象
//数据视图用来显示大量相同格式的信息的视图
//例如：电话通讯录、QQ好友、微信朋友圈
UITableView* _tableview;
}
@end
ViewController.m
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//创建数据视图
//P1:数据视图的位置
//P2:数据视图的风格
//UITableViewStylePlain普通风格
//UITableViewStyleGrouped分组风格
_tableview = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
//设置数据视图的代理对象
_tableview.delegate = self;
//设置数据视图的数据源对象
_tableview.dataSource = self;
[self.view addSubview:_tableview];
}
//下面三个函数是必须要实现的协议函数
//获取每组元素的行数
//程序在显示数据视图时会调用此函数
//函数返回值：表示每组元素的行数
//P1:数据视图对象本身
//P2:哪一组需要的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 5;
}
// 设置数据视图的组数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 5;
}
//创建单元格对象函数
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString* cellStr = @"cell";
UITableViewCell* cell = [_tableview dequeueReusableCellWithIdentifier:cellStr];
if (cell == nil) {
//创建一个单元格对象
//参数一：单元格样式
//参数二：单元格的复用标记
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellStr];
}
//section表示组，row表示行
NSString* str = [NSString stringWithFormat:@"第%ld组， 第%ld行", indexPath.section, indexPath.row];
//将单元格的主文字内容赋值
cell.textLabel.text = str;
return cell;
}
@end
二、UITableView协议
前面已经介绍了UITableView协议中三个必须实现的函数，下面介绍其协议中剩下可选择实现的函数。
//获取高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 100;
}
//获取头部标题
- (NSString*)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
return @"头部标题";
}
//获取每组尾部标题
-(NSString*)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section {
return @"尾部标题";
}
//获取头部高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 40;
}
//获取尾部高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
return 60;
}
下面是具体的代码实现：
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>
{
//定义数据视图对象
UITableView* _tableView;
NSMutableArray* _arrayData ;
}
@end
ViewController.m
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//创建数据视图对象
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 40, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStyleGrouped];
//设置代理对象
_tableView.delegate = self;
//设置数据代理对象
_tableView.dataSource = self;
//数据视图显示
[self.view addSubview:_tableView];
_arrayData = [[NSMutableArray alloc] init];
for (int i = 'A'; i <= 'Z'; i++) {
//定义一个小数组
NSMutableArray* arraySmall = [[NSMutableArray alloc] init];
for (int j = 0; j <= 5; j++) {
NSString* str = [NSString stringWithFormat:@"%c%d",i,j];
[arraySmall addObject:str];
}
//生成一个二维数组
[_arrayData addObject:arraySmall];
}
}
//获取组数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return _arrayData.count;
}
//获取每组的元素个数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
NSInteger numRow = [[_arrayData objectAtIndex:section] count];
return numRow;
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString* cellStr = @"cell";
UITableViewCell* cell = [_tableView dequeueReusableCellWithIdentifier:cellStr];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellStr];
}
cell.textLabel.text = _arrayData[indexPath.section][indexPath.row];
return cell;
}
//获取高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 100;
}
//获取头部标题
- (NSString*)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
return @"头部标题";
}
//获取每组尾部标题
-(NSString*)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section {
return @"尾部标题";
}
//获取头部高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 40;
}
//获取尾部高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
return 60;
}
@end
三、UITableView高级协议和单元格
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>
{
//数据视图
UITableView* _tableView;
//数据源
NSMutableArray* _arrayData;
//添加导航按钮
UIBarButtonItem* _btnEdit;
UIBarButtonItem* _btnFinish;
UIBarButtonItem* _btnDelete;
//设置编辑状态
BOOL _isEdit;
}
@end
ViewController.m
_tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
//自动调整子视图的大小
_tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
//设置代理
_tableView.delegate = self;
_tableView.dataSource = self;
//头部视图和尾部视图可以用来展示与整个列表相关的信息，例如搜索框、筛选器、广告等。它们的高度可以根据内容自动调整，也可以手动设置高度。可以通过UITableView的dataSource方法tableView(_:viewForHeaderInSection:)和tableView(_:viewForFooterInSection:)来设置头部视图和尾部视图，或者通过UITableView的属性tableHeaderView和tableFooterView来设置静态的头部视图和尾部视图。
//数据视图的头部视图的设定
_tableView.tableHeaderView = nil;
//数据视图的尾部视图的设定
_tableView.tableFooterView = nil;
[self.view addSubview:_tableView];
//初始化数据源数组
_arrayData = [[NSMutableArray alloc] init];
for (int i = 0; i < 20; i++) {
NSString* str = [NSString stringWithFormat:@"A %d", i];
[_arrayData addObject:str];
}
//当数据视图的数据源发生变化时，来更新数据视图，重新加载数据
[_tableView reloadData];
[self createBtn];
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return _arrayData.count;
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString* str = @"cell";
//尝试获取可以复用的单元格
//如果得不到则返回nil
//复用单元格的条件是单元格的数量足够多使得能够充满屏幕
UITableViewCell* cell = [_tableView dequeueReusableCellWithIdentifier:str];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:str];
}
//单元格文字赋值
cell.textLabel.text = [_arrayData objectAtIndex:indexPath.row];
//单元格添加子标题
cell.detailTextLabel.text = @"子标题";
NSString* istr = @"04.jpg";
UIImage* image = [UIImage imageNamed:istr];
//设置默认的图标信息
cell.imageView.image = image;
return cell;
}
//设置单元格高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 60;
}
//创建按钮
- (void)createBtn {
_isEdit = NO;
_btnEdit = [[UIBarButtonItem alloc] initWithTitle:@"编辑" style:UIBarButtonItemStyleDone target:self action:@selector(pressEdit)];
_btnFinish = [[UIBarButtonItem alloc] initWithTitle:@"完成" style:UIBarButtonItemStyleDone target:self action:@selector(pressFinish)];
_btnDelete = [[UIBarButtonItem alloc] initWithTitle:@"删除" style:UIBarButtonItemStyleDone target:self action:@selector(pressDelete)];
self.navigationItem.rightBarButtonItem = _btnEdit;
}
//当手指在单元格上移动时可以显示编辑状态
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
//删除数据源对应的数据
[_arrayData removeObjectAtIndex:indexPath.row];
//数据源更新
[_tableView reloadData];
NSLog(@"Delete!");
}
//选中单元格调用此协议函数
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"选中单元格！%ld %ld", (long)indexPath.section, (long)indexPath.row);
}
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"取消选中单元格！%ld %ld", (long)indexPath.section, (long)indexPath.row);
}
//单元格显示效果协议
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
//UITableViewCellEditingStyleDelete：删除，默认情况下为此状态
//UITableViewCellEditingStyleInsert：插入
//UITableViewCellEditingStyleNone：虚空
//UITableViewCellEditingStyleDelete ｜UITableViewCellEditingStyleInsert：多选状态
return UITableViewCellEditingStyleDelete;
}
- (void)pressEdit {
_isEdit = YES;
self.navigationItem.rightBarButtonItem = _btnFinish;
[_tableView setEditing:YES];
self.navigationItem.leftBarButtonItem = _btnDelete;
}
- (void)pressFinish {
_isEdit = NO;
self.navigationItem.rightBarButtonItem = _btnEdit;
[_tableView setEditing:NO];
self.navigationItem.leftBarButtonItem = nil;
}
- (void)pressDelete {
}
点击编辑按钮时
移动单元格时
点击delete后
总结
以上就是本篇文章的全部内容。