iOS UITableView(一)
2016-07-01 00:00
369 查看
UITableview系列内容包括:
1.纯代码创建UITableview;2.cell的样式、点击事件,cell的重用等;
3.页面的下拉刷新、上拉加载;
4.自定义cell。
由于内容过多,分成多篇来介绍。
本文主要介绍创建UITableview、cell的样式、cell的重用、cell的点击事件、cell左滑按钮等内容。
1.创建UITableview
首先在ViewController的类名后面添加UITableViewDelegate和UITableViewDataSource。如图所致
Swift:
Objective-C:
UITableView的样式有两种:Grouped 和 Plain
Grouped:
Plain:
根据自己的需要,选择创建对应的样式。
下面会对两种样式都做说明。
1).创建一个UITableview并添加到View:
Swift版// 创建UItableView,style选择Grouped或Plain,这里我们以Grouped为例 let tableView = UITableView(frame: CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height-20), style: .Plain) // 声明 tableView 的代理和数据源 tableView.delegate = self tableView.dataSource = self // 添加到 view 上 self.view.addSubview(tableView)
Objective-C版
// 创建UItableView,style选择Grouped或Plain,这里我们以Grouped为例 UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height-20) style:UITableViewStyleGrouped]; // 声明 tableView 的代理和数据源 tableView.delegate = self; tableView.dataSource = self; // 添加到 view 上 [self.view addSubview:tableView];
2).设置tableview的数据源:
tableview的style为Grouped的要实现下面的方法。Swift版
// tableView 中 Section 的个数 func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 6 }
Objective-C版
// tableView 中 Section 的个数 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 6; }
下面的方法Grouped和Plain两种类型都要实现,用来设置行数和每一行的内容。
Swift版
// 每个 Section 中的 Cell 个数 func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 3 } // 设置每个 Cell func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { // 创建一个cellID,用于cell的重用 let cellID = "cellID" // 从tableview的重用池里通过cellID取一个cell var cell = tableView.dequeueReusableCellWithIdentifier(cellID) if (cell == nil) { // 如果tableview的重用池中没有取到,就创建一个新的cell,style为Value2,并用cellID对其进行标记。 cell = UITableViewCell(style: .Value2, reuseIdentifier: cellID) } // 设置 cell 的标题 cell?.textLabel?.text = "这是第\(indexPath.row)个cell" // 设置 cell 的副标题 cell?.detailTextLabel?.text = "副标题" return cell! }
Objective-C版
// 每个 Section 中的 Cell 个数 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return 3; } // 设置每个 Cell -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // 创建一个cellID,用于cell的重用 NSString *cellID = @"cellID"; // 从tableview的重用池里通过cellID取一个cell UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID]; if (cell == nil) { // 如果tableview的重用池中没有取到,就创建一个新的cell,style为Value2,并用cellID对其进行标记。 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:cellID]; } // 设置 cell 的标题 cell.textLabel.text = [NSString stringWithFormat:@"这是第%li个cell", (long)indexPath.row]; // 设置 cell 的副标题 cell.detailTextLabel.text = @"副标题"; return cell; }
现在运行一下,会看到一个基本的UITableview已显示到界面上:
在创建cell的时候,我们选择的样式是Value2,cell有四种基本的样式:Default,Subtitle,Value1,Value2。下图是四种样式的区别:
—————————————— 分割线 ——————————————
上面是UITableview的基本实现,接下来是UITableview的一些代理方法实现,包括设置cell的高度,点击cell的触发方法等内容
2.代理方法的介绍
1)样式相关方法
a.设置每个section的header和footer文字内容
Swift版// 设置 section 的 header 文字 func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? { return "header-\(section)" } // 设置 section 的 footer 文字 func tableView(tableView: UITableView, titleForFooterInSection section: Int) -> String? { return "footer-\(section)" }
Objective-C版
// 设置 section 的 header 文字 -(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { return [NSString stringWithFormat:@"header-%li", (long)section]; } // 设置 section 的 footer 文字 -(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section { return [NSString stringWithFormat:@"footer-%li", (long)section]; }
b.设置header,footer,cell的高度
Swift版// 设置 section 的 header 高度 func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 10 } // 设置 section 的 footer 高度 func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat { return 10 } // 设置 cell 的高度 func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { return 80 }
Objective-C版
// 设置 section 的 header 高度 -(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 10; } // 设置 section 的 footer 高度 -(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section { return 10; } // 设置 cell 的高度 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 80; }
c.设置cell文字的缩进,cell中的文字会向右缩进相应的数值
Swift版// cell 的文字缩进 func tableView(tableView: UITableView, indentationLevelForRowAtIndexPath indexPath: NSIndexPath) -> Int { return 10 }
Objective-C版
// cell 的文字缩进 -(NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath { return 10; }
d.自定义header和footer,将header和footer设置为自定义的view。
注:当使用自定义的header和footer时,上面设置header和footer文字内容的方法就无效,要显示文字需要在自定义的view上创建。Swift版
// 自定义 section 的 header func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { let headerView = UIView(frame: CGRectMake(0, 0, 100, 10)) headerView.backgroundColor = UIColor.redColor() return headerView } // 自定义 section 的 header func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? { let footerView = UIView(frame: CGRectMake(0, 0, 100, 10)) footerView.backgroundColor = UIColor.orangeColor() return footerView }
Objective-C版
// 自定义 section 的 header -(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 10)]; headerView.backgroundColor = [UIColor redColor]; return headerView; } // 自定义 section 的 footer -(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section { UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 10)]; footerView.backgroundColor = [UIColor orangeColor]; return footerView; }
自定义header和footer的效果图:
2)操作相关方法
a.选中 cell 时触发的方法
Swift版// 选中了 cell 时触发 func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { print("选中了第\(indexPath.row)个cell") }
Objective-C版
// 选中了 cell 时触发 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"选中了第%li个cell", (long)indexPath.row); }
b.设置cell左滑删除
使用系统默认的左滑删除按钮Swift版
// 设置 cell 是否允许左滑 func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool { return true } // 设置默认的左滑按钮的title func tableView(tableView: UITableView, titleForDeleteConfirmationButtonForRowAtIndexPath indexPath: NSIndexPath) -> String? { return "按钮钮钮" } // 点击左滑出现的按钮时触发 func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) { print("点击左滑出现的按钮时触发") } // 左滑结束时调用(只对默认的左滑按钮有效,自定义按钮时这个方法无效) func tableView(tableView: UITableView, didEndEditingRowAtIndexPath indexPath: NSIndexPath) { print("左滑结束") }
Objective-C版
// 设置 cell 是否允许左滑 -(BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath { return true; } // 设置默认的左滑按钮的title -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath { return @"按钮钮钮"; } // 点击左滑出现的按钮时触发 -(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"点击左滑出现的按钮时触发"); } // 左滑结束时调用(只对默认的左滑按钮有效,自定义按钮时这个方法无效) -(void)tableView:(UITableView *)tableView didEndEditingRowAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"左滑结束"); }
效果图:
自定义左滑时显示的按钮和触发事件
Swift版
// 自定义左滑cell时的按钮和触发方法 func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? { // 创建第一个按钮和触发事件 let cellActionA = UITableViewRowAction(style: .Default, title: "按钮-1", handler: {_,_ in // 在此写点击按钮时的触发事件 // ...... }) // 定义按钮的颜色 cellActionA.backgroundColor = UIColor.greenColor() // 创建第二个按钮和触发事件 let cellActionB = UITableViewRowAction(style: .Default, title: "按钮-2", handler: {_,_ in // 在此写点击按钮时的触发事件 // ...... }) // 注意这里返回的是一个按钮组,即使只定义了一个按钮也要返回一个组 return [cellActionA, cellActionB] }
Objective-C版
// 自定义左滑cell时的按钮和触发方法 - (nullable NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath { // 创建第一个按钮和触发事件 UITableViewRowAction *cellActionA = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"按钮-1" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){ // 在此写点击按钮时的触发事件 // ...... NSLog(@"点击了 按钮-1"); }]; // 定义按钮的颜色 cellActionA.backgroundColor = [UIColor greenColor]; // 创建第二个按钮和触发事件 UITableViewRowAction *cellActionB = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"按钮-2" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){ // 在此写点击按钮时的触发事件 // ...... }]; // 注意这里返回的是一个按钮组,即使只定义了一个按钮也要返回一个组 return @[cellActionA, cellActionB]; }
效果图:
以上内容,是UITableview的基本操作。下一篇会介绍UITableview的下拉刷新、上拉加载、自定义cell等内容。
相关文章推荐
- iOS UITableView(二)
- iOS UIPickerView的使用
- iOS UIAlertController
- java 队列阻塞方法ArrayBlockingQueue学习
- UIView和CALayer
- dequeueReusableCellWithIdentifier 与 dequeueReusableCellWithIdentifier:forIndexPath 区别
- easyui pageSize 默认值修改没反应,没效果
- iOS GPUImage之GPUImageVideoCamera(3)
- Java:String、StringBuffer和StringBuilder的区别
- continue的作用
- hdu 4908 BestCoder Sequence(重构数组)
- EasyUI中combobox实现市县级联操作
- UIView之setNeedsDisplay和setNeedsLayout
- iOS UIButton加在window上点击无效果问题
- stl的heap和priority_queue的使用
- vector list deque
- 如何循环获取html的值,并拼写到json/json,求value所对应key的值
- android bluetooth api
- android Gui系统之SurfaceFlinger(5)---Vsync(2)
- kqueue用法简介