iOS 添加TableView到页面中，使用storyboard自定义cell

更新日期 2022-3-4

• 2022-3-4 更新图片
• 2022-3-3 创建文档

开发环境与工具

• Xcode13
• iOS 14.4
• OC

前面我们可以使用TableView简单地显示一列数据。 现在我们自定义cell，把列表改造成我们想要的样子。

最后效果图

storyboard

在storyboard中操作Table View。把它的Prototype Cells改成1（之前是0）。

可以看到页面上出现了一个新的Cell。待会我们在它上面进行操作。

拖进去2个label，一个image，还有3个button。给工程添加一些图片（可自己选择）。

使用Button的时候，Image选择了图片后，要注意它的View - Tint会改变最后显示的颜色。 这里不想让button显示文字，只显示图片。button可以设计成你想要的样式。

这里省略设置约束的过程。

Data1Cell

新建OC文件Data1Cell.h和Data1Cell.m，这是Cell的控制类，继承UITableViewCell。

Data1Cell.m文件里不需要什么操作

// Data1Cell.m
#import "Data1Cell.h"

@implementation Data1Cell

@end

Data1Cell.h里需要有对界面元素的引用

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

NS_ASSUME_NONNULL_BEGIN

@interface Data1Cell : UITableViewCell

@property (weak, nonatomic) IBOutlet UIImageView *iv;
@property (weak, nonatomic) IBOutlet UILabel *titleLb;
@property (weak, nonatomic) IBOutlet UIButton *btn1;
@property (weak, nonatomic) IBOutlet UIButton *btn2;
@property (weak, nonatomic) IBOutlet UIButton *btn3;

@end

NS_ASSUME_NONNULL_END

把storyboard里Cell的Custom Class改成Data1Cell，Table View Cell的Identifier也改为Data1Cell。

这些IBOutlet可以是从storyboard里拖过来的。也可以先写好，然后再连起来。

GoPage2VC

在GoPage2VC.m中使用定义好的GoPage2VC。

下面是GoPage2VC.m完整代码

#import "GoPage2VC.h"
#import "Data1Cell.h"

static NSString *DataCellID = @"Data1Cell";

@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",
                        @"Java", @"思想", @"设计模式", @"Python入门学习", @"工程",
                        @"一号", @"二号", @"三号", @"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 {
    Data1Cell* cell = [tableView dequeueReusableCellWithIdentifier:DataCellID];
    if(cell == nil) {
        cell = [[Data1Cell alloc] init];
    }
    NSString *data = [self.list objectAtIndex:indexPath.row];
    cell.titleLb.text = data;
    cell.btn1.titleLabel.text = nil;
    cell.btn2.titleLabel.text = nil;
    cell.btn3.titleLabel.text = nil;

    if (indexPath.row % 2 == 0) {
        cell.iv.image = [UIImage imageNamed:@"itemIv1"];
    } else {
        cell.iv.image = [UIImage imageNamed:@"itemIv2"];
    }
    [cell.btn1 addTarget:self action:@selector(clickBtn1:) forControlEvents:UIControlEventTouchUpInside];
    [cell.btn2 addTarget:self action:@selector(clickBtn2:) forControlEvents:UIControlEventTouchUpInside];
    [cell.btn3 addTarget:self action:@selector(clickBtn3:) forControlEvents:UIControlEventTouchUpInside];
    cell.btn1.tag = indexPath.row;
    cell.btn2.tag = indexPath.row;
    cell.btn3.tag = indexPath.row;
    return cell;
}

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

-(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;
}

-(void)clickBtn1:(UIButton *)btn {
    NSString* show = [NSString stringWithFormat:@"%@",[self.list objectAtIndex:btn.tag]];
    [self popDialog:@"点击了按钮1" content:show];
}

-(void)clickBtn2:(UIButton *)btn {
    NSString* show = [NSString stringWithFormat:@"%@",[self.list objectAtIndex:btn.tag]];
    [self popDialog:@"点击了按钮2" content:show];
}

-(void)clickBtn3:(UIButton *)btn {
    NSString* show = [NSString stringWithFormat:@"%@",[self.list objectAtIndex:btn.tag]];
    [self popDialog:@"点击了按钮3" content:show];
}

-(void)popDialog:(NSString*) title content:(NSString*) str {
    UIAlertController* alert = [UIAlertController alertControllerWithTitle:title
                                   message:str
                                   preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        NSLog(@"ok");
    }]];
    [self presentViewController:alert animated:YES completion:nil];
}
@end

测试数据还是放在list里面。numberOfRowsInSection返回的是list的数据个数。

让按钮不显示文字 cell.btn1.titleLabel.text = nil;。

cellForRowAtIndexPath

在这个方法里处理Cell。我们使用的不再是默认样式，而是Data1Cell。

设置cell显示的文字和图片。设置按钮的点击事件和传入数值。

button点击事件

button的点击事件使用addTarget方法。为了区分点击到哪个数据，把触发的行传给按钮的tag作为标记。

[cell.btn1 addTarget:self action:@selector(clickBtn1:) forControlEvents:UIControlEventTouchUpInside];
cell.btn1.tag = indexPath.row;

这样在接收的时候，可以判断出是哪一行的哪一个按钮被点击了。

-(void)clickBtn1:(UIButton *)btn {
    NSString* show = [NSString stringWithFormat:@"%@",[self.list objectAtIndex:btn.tag]];
    [self popDialog:@"点击了按钮1" content:show];
}

popDialog方法用来弹窗，调试时候更直观一些。

这3个按钮的点击事件和Cell本体的点击事件是分开的。点击按钮会弹出按钮的弹窗，点cell本体则弹出之前的窗口。

运行到iPhone上，可以看到最后效果

运行效果

参考

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

本文也发布在

华为云社区

本站说明

一起在知识的海洋里呛水吧。广告内容与本站无关。如果喜欢本站内容，欢迎投喂作者，谢谢支持服务器。如有疑问和建议，欢迎在下方评论~

📖AndroidTutorial 📚AndroidTutorial 🙋反馈问题 🔥最近更新 🍪投喂作者

Ads