iOS 添加TableView到页面中，使用storyboard¶

更新日期 2022-3-3

2022-3-2 创建文档

开发环境与工具

Xcode13
iOS 14.4
OC

想在一个页面下方显示列表，上面显示其他东西。storyboard中已经有一个VC了。整个页面一开始并不是Table View Controller。我们需要添加一个Table View到想要的地方。

简单风格列表¶

实现一个简单风格的列表，显示一行文字。

先来看OC代码部分

GoPage2VC¶

我们新建GoPage2VC来控制界面。

头文件¶

新建OC文件，头文件GoPage2VC.h代码如下

// GoPage2VC.h
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface GoPage2VC: UIViewController<UITableViewDelegate, UITableViewDataSource>

@property (weak, nonatomic) IBOutlet UILabel *timeLb;

@property (strong, nonatomic) NSArray *list;

@end

NS_ASSUME_NONNULL_END

GoPage2VC继承UIViewController，并且需要UITableViewDataSource。

timeLb用来显示自定义文字。

NSArray *list装着我们要显示的数据。

m文件¶

GoPage2VC.m实现功能

// GoPage2VC.m
#import "GoPage2VC.h"
static NSString *DataCellID = @"dataCellID"; // 给cell用的

@implementation GoPage2VC: UIViewController

@synthesize list = _list;

- (void)viewDidLoad {
    [super viewDidLoad];
    self.timeLb.text = [NSString stringWithFormat:@"打开时间: %@",[self getCurrentTime]];

    NSArray* dataArr = [[NSArray alloc] initWithObjects:@"an.rustfisher.com",
                        @"RustFisher", @"AnRFDev", @"iOS", @"iOS入门学习", @"rustfisher.com",
                        @"Swift", nil];
    self.list = dataArr;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.list.count;
}

// 处理cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:DataCellID];
    if(cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:DataCellID];
    }
    cell.textLabel.text = [self.list objectAtIndex:indexPath.row];
    return cell;
}

-(NSString*)getCurrentTime {
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    [formatter setDateFormat:@"YYYY-MM-dd HH:mm:ss"];
    NSDate *datenow = [NSDate date];
    NSString *currentTimeString = [formatter stringFromDate:datenow];
    return currentTimeString;
}

@end

先自定一个变量@synthesize list = _list;指向我们的数据。

在viewDidLoad中我们放入测试数据。

列表相关：

numberOfRowsInSection方法中指定了数据的数量
cellForRowAtIndexPath方法里重用或者新建一个cell。
- 这里用的是默认的样式UITableViewCellStyleDefault，它带有一个textLabel
- 把对应的数据交给cell即可

Main.storyboard¶

接下来操作storyboard。Main.storyboard里有一个界面（scene）。需要把它的类设置成GoPage2VC。

storyboard

页面下方拖入一个Table View，设置好约束，让它贴着底部。

页面上方放2个label，显示一些文字。把打开时间的label和GoPage2VC.h里面的*timeLb连起来。

接下来重点处理Table View。

右键点Table View并按住拖动，拖到VC上（红色箭头），或者是拖到黄色圆圈的地方（蓝色箭头）。

其实就是让TableView的datasource关联到GoPage2VC

outlets

现在Table View的Prototype Cells数值为0，因为我们用的还是默认样式UITableViewCellStyleDefault。

运行一下可以看到效果（iPhone7）

运行效果1

添加图标¶

往工程的Assets.xcassets里加2个小图标。

在GoPage2VC.m里，使用小图标。

// GoPage2VC.m

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:DataCellID];
    if(cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:DataCellID];
    }
    cell.textLabel.text = [self.list objectAtIndex:indexPath.row];
    if (indexPath.row % 2 == 0) {
        cell.imageView.image = [UIImage imageNamed:@"itemIv1"];
    } else {
        cell.imageView.image = [UIImage imageNamed:@"itemIv2"];
    }
    return cell;
}

默认样式的cell带有imageView。我们把图片交给cell来显示。

增加一些测试数据，运行可以看到效果

运行效果2

run2

子项点击¶

在GoPage2VC.m中复写didSelectRowAtIndexPath方法，在这里响应用户点击子项。

// GoPage2VC.m

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString *rowString = [self.list objectAtIndex:[indexPath row]];
    UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"点击了"
                                   message:rowString
                                   preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        NSLog(@"默认操作");
    }]];
    [self presentViewController:alert animated:YES completion:nil];
}