天天看点

iOS开发之自定义UITableView

在上一篇中我记录的是iOS中的UITableView的使用,不过只有很简单的在单元格中显示图片和一个标签,这一篇记录的实现一个稍微复杂一点的UITableView,单元格里面的内容由我们自定义,而不是固定的一个图片一个标签,程序运行的效果如下:

iOS开发之自定义UITableView

由于是用的iOS模拟器,所以UITableView中的分割线没有显示出来,如果用真机测试或者将模拟器放大的话,是可以显示分割线的。下面就一步步记录下实现这个自定义UITableView的过程:

1、打开Xcode新建一个项目,命名为:CustomTableView,选择Single View Application;

2、在Main.storyboard中拖入TableView控件,然后在TableView控件中拖入一个TableViewCell控件;

3、选中Main.storyboard中的TableViewCell,然后在Xcode右边的Size inspector中将TableViewCell的高度设置为78,如下图所示:

iOS开发之自定义UITableView

上图中需要注意的是,只有勾选了Custom复选框后,才能设置Row Height的高度。

4、向TableViewCell中拖入图片、标签、按钮等控件,如下图所示:

iOS开发之自定义UITableView

这里将TableViewCell中的Image大小设置为60*60,可以选中TableViewCell中的Image后,在Xcode右侧的Size inspector视图中设置。

5、设计好了TableView中的单元格后,需要新建一个类代表这个单元格,在项目中新建一个类CustomTableViewCell继承自UITableViewCell,然后选中Main.storyboard中的单元格,在右边的Identity inspector视图中,将单元格的Class设置为我们创建的CustomTableViewCell,接着打开xcode的Assistant editor视图,Xcode中间部分就分成了两个视图在左边的视图打开Main.storyboard,在右边打开我们创建的CustomTableViewCell.h文件,然后使用鼠标右键,将TableViewCell中的控件拖拽到CustomTableViewCell.h文件中,这样就在CustomTableViewCell中创建了与单元格中的控件对应的成员变量,如下图所示:

iOS开发之自定义UITableView

6、给单元格设置一个字符串类型的标识符,选中Main.storyboard中的单元格,然后打开右侧的Attributes inspector视图,在Identifier属性中填入MyTableViewCell,如下图所示:

iOS开发之自定义UITableView

这里的标识符是我们任意指定的一个字符串,在后面的代码中还要用到,作用是唯一标识这个单元格

7、编写代码给TableView加上测试数据。

在ViewController.h文件中,我们需要实现UITableViewDelegate和UITableViewDataSource协议,如下代码所示:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

#pragma mark 装载UITableView中的测试数据,显示在单元格中的标题
@property (strong, nonatomic) NSMutableArray *titles;

#pragma mark 装载UITableView中的测试数据,显示在单元格中的子标题
@property (strong, nonatomic) NSMutableArray *subtitles;

@end
           

然后在ViewController.m文件中,需要生成测试数据,并实现协议中的某些方法,ViewController.m文件的代码如下:

#import "ViewController.h"
#import "CustomTableViewCell.h"

@interface ViewController ()

@end

@implementation ViewController

static NSString *identifier = @"MyTableViewCell";

- (void)viewDidLoad {
    [super viewDidLoad];
    // 加载测试数据
    [self loadData];
}

#pragma mark 加载测试数据
- (void)loadData {
    //初始化两个数组
    self.titles = [NSMutableArray array];
    self.subtitles = [NSMutableArray array];
    //给数组添加20条测试数据,用于显示到TableView上
    for(int i = 0; i < 20; i++) {
        [self.titles addObject:[NSString stringWithFormat:@"This is title %i", i]];
        [self.subtitles addObject:[NSString stringWithFormat:@"this is subtitle %i", i]];
    }
    //给UITableView设置代理和数据源
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
}

#pragma mark 该方法返回的是UITableView的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.titles count];
}

#pragma mark 该方法返回某一行的单元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    CustomTableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];
    //在这里处理单元格中的图片和标签等控件
    cell.cellImage.image = [UIImage imageNamed:@"avatar.jpg"];
    cell.cellTitle.text = [self.titles objectAtIndex:indexPath.row];
    cell.cellSubtitle.text = [self.subtitles objectAtIndex:indexPath.row];
    return cell;
}

#pragma mark 该方法返回单元格的高度,需要跟我们在Size inspector视图中设置的高度保持一致
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 78;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
           

上面的代码注释写得比较清楚了,到这里就可以运行程序了。

-----end-----