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

想在一个页面下方显示列表，上面显示其他东西。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。

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

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

接下来重点处理Table View。

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

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

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

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

添加图标

往工程的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来显示。

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

子项点击

在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];
}

里面是显示一个提示窗口。或者打个log也可以。

运行起来点击发现没有反应。检查storyboard，发现要把Table View的delegate关联到GoPage2VC。
我们可以从右边栏Outlets那里把delegate拖到GoPage2VC上。

再运行到iPhone7上