Skip to content

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];
}
里面使用UIAlertController弹出一个窗口。或者打个log也行。

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

delegate关联

再运行到iPhone7上

点击弹出

iPhone7

接下来我们可以自定义cell TableView自定义cell

参考

本文也发布在

华为云

作者: rustfisher.com | rf.cs@foxmail.com
示例: AndroidTutorial Gitee, Tutorial Github
本文链接: https://www.an.rustfisher.com/ios/uikit/tableview/case/table-view-and-other/
一家之言,仅当抛砖引玉。如有错漏,还请指出。如果喜欢本站的内容,还请支持作者。也可点击1次下方的链接(链接内容与本站无关),谢谢支持服务器