Skip to content

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

更新日期 2022-3-4
  • 2022-3-4 更新图片
  • 2022-3-3 创建文档
开发环境与工具
  • Xcode13
  • iOS 14.4
  • OC

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

最后效果图

final run

storyboard

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

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

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

预览设计

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

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

Data1Cell

新建OC文件Data1Cell.hData1Cell.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

cell id

这些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上,可以看到最后效果

运行效果

1 2

参考

本文也发布在

华为云社区

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