iOS UITableView(一)

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等内容。

时间： 2024-11-06 07:05:03

iOS UITableView(一)的相关文章

ios UItableView，UITableViewHeaderFooterView分组头部的重用机制，简单地仿射变换CGAffineTransform

怎样设置包括第一栏在内相同高度的section(小技巧,虽然容易但容易忽略) *第一步,在viewdidload里将尾部设为0,table.sectionFooterHeight = 0;(代理方法)- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{ return 0; }虽然也可以设置尾部高度,但是设置后没有效果 第二步,调用tableView的代理方法- (CGF

IOS UITableView NSIndexPath属性讲解

IOS UITableView NSIndexPath属性讲解 查看UITableView的帮助文档我们会注意到UITableView有两个Delegate分别为:dataSource和delegate. dataSource 是UITableViewDataSource类型,主要为UITableView提 供显示用的数据(UITableViewCell),指定UITableViewCell支持的编辑操作类型(insert,delete和 reordering),并根据用户的操作进行相应的数据更

iOS——UITableView数据源的一些问题

UITableView数据源的问题"name=image_operate_1771416366029362alt="iOS UITableView数据源的问题"src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif"real_src="http://s15.sinaimg.cn/bmiddle/002WA StNzy6NJcgxGSafe&690">

IOS UItableView得group风格如何去掉分割线问题

在自定义UItableView的时候,当选择的style为Group时,往往在设置透明后分割线还在,为了去除,只要重新设置一个BackgroundView覆盖掉原来的即可 //取消分割线 UIView *view= [ [ [ UIView  alloc ] init ] autorelease]; [cell setBackgroundView :view]; //取消点击效果 cell.selectionStyle = UITableViewCellSelectionStyleNone; I

IOS UITableView Group&amp;Section

UItableView 根据数据结构不同 会有不同样式 关键在两个代理 tableviewdelegate&tabledatasourse 下面代码是我实施的Group 在模拟器中 ios6.1和ios7 并且滚动后相应的section会“置顶”,效果不错哦! 核心代码: #import <UIKit/UIKit.h> @interface AnnouncementViewController : UIViewController<UITableViewDataSource,UI

ios UITableView 相关

tableView 实现的方法 无分组的cell #pragma mark - Table view data source - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.contacts.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRow

iOS UITableView划动删除的实现

标签:划动删除 iphone 滑动删除 ios UITableView 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://rainbird.blog.51cto.com/211214/634587 从七八月前对苹果一无所知,到现在手持iphone,ipad,itouch有三个线上成熟app并熟练开发ios应用.一路走来一直站在前辈的肩膀上不断进步.如今生活工作稳定是时候将一直以来的一些心得整理出来了.想来想去决定先说说UITab

ios UITableView 获取点击cell对象

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell= [tableView cellForRowAtIndexPath:indexPath]; // 获取cell 对象 UILabel *name = (UILabel *)[cell.contentView viewWithTag:111]; // 获取昵称 _inp

iOS UITableView 快速滚动（索引方式实现）

参考:http://my.oschina.net/joanfen/blog/204503 思路:UITableView一次性加载数据过多时,需要滑动多次触底.想通过索引实现快速滑动,索引中加载20个空点.用户在最右端滑动时,索引框显示,当触及索引点时指向其想对应的UITableView的RowIndex来实现快速滚动.这方法有缺陷:普通滑动时滚动条被遮盖了. 主要代码: //获取数据 -(void)getTableData{ dispatch_async(dispatch_get_global_

iOS UITableview 图片懒加载demo

1.https://developer.apple.com/library/ios/samplecode/LazyTableImages/Introduction/Intro.html 这是苹果的官方demo,用itunes的应用列表为例,讲述了图片lazy load的思想. 主要思想是,当UITableView处于停止状态时,查找当前视图中的cell,并开始下载icon,下载完成后加载到页面上. 2.可以直接使用第三方加载网络图片的库,SDWebImage,https://github.com