iOS开发笔记－－自定义UITableViewCell

今天分享一下自定义TableViewCell

工程继承自上一篇

iOS开发笔记－－UITableView入门

中的工程 对TableView还不了解的也可以阅读一下

直接开始

选中工程目录

按command＋N键来新建文件

新建一个UITableViewCell的子类



选择Objective-C class点击Next



Subclass of选择UITableViewCell

Class类名就用Cell

点击Next然后Create创建

再次按command＋N新建一个文件



这此选择User Interface下的View 点击Next

下一页中确认Device Family选中iPhone 点击Next

文件名输入Cell 跟刚才新建的类名相同 点击Create

现在工程应该是这个样子



下一步来构建自定义Cell的样式

选择Cell.xib文件



再选定右边Objects列表里的那个View 这个View是自动生成的

点击键盘delete键删掉

然后从右边的控件列表中拖一个Table View Cell进来



现在的Objects列表中应该是这样



点击新加进来的Table View Cell

然后在右上方的属性面板中选择identity inspector



然后在Class中选择Cell 如图

选择完成以后

在Objects列表中Table View Cell就会变成Cell既是你自定义的那个类名



这一步很关键

然后就可以拖控件了

这里加入一行文字一个按钮跟一个开关 如图



下一步

点击右上角的Show Assistant editor打开辅助窗口



辅助窗口中打开的是Cell.h文件

原窗口中打开Cell.xib文件

就像这样



然后选中刚添加的三个控件中的UILabel

按住键盘control键 拖动鼠标到辅助窗口中相应位置

就是@interface Cell : UITableViewCell 跟 @end中间的部分

如图



出现如图Insert Outlet or Outlet Collection标记后放开鼠标

之后会弹出如图所示的窗口



注意确保Connection选择的是Outlet

Object选择的是Cell (这里只有这一个选项)

Name可以随便输入 这里就用uiLabel

Storage选择Weak

点击Connect按钮确认

以此类推

把其他两个控件也这样操作

现在Cell.h文件应该是这个样子



自定义Cell的样式已经完成

接下来就需要写代码了

打开ViewController.h文件

导入Cell.h文件



打开ViewController.m文件 (文件中原有的内容来自上一章iOS开发笔记－－UITableView入门)



新加一个属性nibsRegistered 并且synthesize

@interface ViewController ()
@property (nonatomic) NSArray *dataList;
@property (nonatomic) BOOL nibsRegistered;
@end

@implementation ViewController
@synthesize dataList;
@synthesize nibsRegistered;

然后修改- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法

如下

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
if (!nibsRegistered) {
UINib *nib = [UINib nibWithNibName:@"Cell" bundle:nil];
[tableView registerNib:nib forCellReuseIdentifier:IDENTIFIER];
[self setNibsRegistered:YES];
}
Cell *cell = [tableView dequeueReusableCellWithIdentifier:IDENTIFIER];
[cell.uiLabel setText:[dataList objectAtIndex:indexPath.row]];
return cell;
}

这里就类似Android中从xml布局文件中导入视图一样

从xib文件中导入view

UINib *nib = [UINib nibWithNibName:@"Cell" bundle:nil];

这一句就起到这么一个作用 注意这里的@"Cell"就是对应的xib文件的文件名

[tableView registerNib:nib forCellReuseIdentifier:IDENTIFIER];

[self setNibsRegistered:YES];

接下来就可以直接复用这个View了

Cell *cell = [tableView dequeueReusableCellWithIdentifier:IDENTIFIER];

把uiLable设置好文字

这个时候按command＋R键运行一下看看效果



文字跟按钮都显示出来了

接下来给按钮添加点击事件响应

首先添加一个方法声明 这一步是可以略过的



- (void)click:(id)sender;

一个没有返回值的方法 名字是click 带一个参数sender 就是被点击的按钮对象

可以用sender来传参数

在文件的最后@end之前实现click方法

- (void)click:(id)sender {
UIButton *button = sender;
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"你点击了" message:[dataList objectAtIndex:button.tag] delegate:nil cancelButtonTitle:@“OK” otherButtonTitles:nil, nil];
[alert show];
}

这里弹出了一个对话框 显示你点击的item所带的文字

然后修改- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法

在return之前加入这两行代码

[cell.uiButton setTag:indexPath.row];
[cell.uiButton addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];

给button设置一个tag

就是在列表中的位置

再给button添加点击事件

这样就完成了

按command＋R运行

点击按钮就可以看到效果了



ok

今天的分享就到这里