如何像 Twitter 一样自定义 UITableViewCell？

Posted 2023-03-11

【中文标题】如何像 Twitter 一样自定义 UITableViewCell？

【英文标题】：How can I custom UITableViewCell like Twitter?

【发布时间】：2012-02-11 04:25:35

【问题描述】：

我发现iPad twitter.app UITableViewCell 的边框有两条像素线，看起来又漂亮又专业，我该怎么做？谢谢！

【问题讨论】：

你应该回去接受一些关于你之前问题的答案。这会让人们更愿意回答。

【参考方案1】：

因为UITableViewCell 继承自UIView，所以单元格具有内容视图。您可以将自己的子视图（标签和文本字段）添加到 contentView，并以编程方式或使用 Interface Builder 对其进行布局。

有很多关于如何做到这一点的在线教程。只需用 google 搜索“uitableviewcell 界面构建器教程”即可。

看看这个很好的教程Custom UITableViewCell Using Interface Builder。

【讨论】：

好的，我现在试试。谢谢 Srikar！

【参考方案2】：

最后，我自定义了 UITableViewCell 的使用代码，我觉得它看起来不错。 :)

MenuViewController.m 文件：

- (id)initWithFrame:(CGRect)frame 
    if (self = [super init]) 
        [self.view setFrame:frame]; 

        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
        [_tableView setDelegate:self];
        [_tableView setDataSource:self];
        [_tableView setBackgroundColor:[UIColor clearColor]];
        [_tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

        UIView* footerView =  [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 1)];
        [_tableView setTableFooterView:footerView];
        [footerView release];        

        [self.view addSubview:_tableView];
    
    return self;


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
    static NSString *CellIdentifier = @"Cell";

    DoubleSeparatorCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) 
        cell = [[[DoubleSeparatorCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
    

    NSString *text;
    UIColor *upperLineColor,*lowerLineColor,*viewColor;

    upperLineColor = RGBA(255, 255, 255, 30);
    lowerLineColor = RGBA(0, 0, 0, 50);
    viewColor = RGBA(0,0,0,5);

    if ([indexPath row] == 0) 
        text = NSLocalizedString(@"...", nil);
     else if ([indexPath row] == 1) 
        text = NSLocalizedString(@"...", nil);
     else if ([indexPath row] == 2) 
        text = NSLocalizedString(@"...", nil);
     else 
        text = NSLocalizedString(@"...", nil);
    
    [cell.textLabel setText:text];
    [cell.textLabel setTextColor:RGBA(170, 170, 170, 100)];
    [cell.textLabel setShadowColor:[UIColor blackColor]];
    [cell.textLabel setShadowOffset:CGSizeMake(1, 1)];

    [cell.upperLine setBackgroundColor:upperLineColor];
    [cell.lowerLine setBackgroundColor:lowerLineColor];
    [cell.contentView setBackgroundColor:viewColor];

    return cell;

DoubleSeparatorCell.h

@interface DoubleSeparatorCell : UITableViewCell 
    UIView *upperLine;
    UIView *lowerLine;

@property (nonatomic ,retain) UIView *upperLine;
@property (nonatomic ,retain) UIView *lowerLine;
@end

DoubleSeparatorCell.m

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) 
        self.upperLine = [[UIView alloc] init];
        self.lowerLine = [[UIView alloc] init];
        [self.contentView addSubview:self.upperLine];
        [self.contentView addSubview:self.lowerLine];
    
    return self;


- (void)layoutSubviews 
    [super layoutSubviews];
    [self.upperLine setFrame:CGRectMake(0, 0, self.contentView.frame.size.width, 1)];
    [self.lowerLine setFrame:CGRectMake(0, self.contentView.frame.size.height - 1, self.frame.size.width, 1)];

【参考方案3】：

Srikar 已经向您展示了正确的道路。顺便说一句，我只想添加以下内容：

您可以通过继承本机类 UITableViewCell 以编程方式自定义单元格。 然后，创建表格视图单元类的实例并将其添加到 UITableView。 现在牢房是你的了。

快乐编码, 阿伦

【参考方案4】：

我要指出的是，您截屏的那些单元格似乎具有 1 点的浅灰色顶部边框和 1 点的深灰色底部边框（或者它们可能是像素 - 抱歉，我的眼睛不太好：- ) )。

所以这可能是一种 hack（继续，野蛮我的人），但你可以：

创建带有框架 CGRect(0,0,cell.contentView.frame.size,width,1) 的 UILabel topBorder 创建带有框架 CGRect (0,cell.contentView.frame.size.height - 1,cell.contentView.frame.size.width,1) 的 UILabel bottomBorder 将 topBorder 的颜色设置为 UIColor lightGrayColor（或调整为确切的颜色） 将 bottomBorder 的颜色设置为 UIColor darkGrayColor（同上） 将两个子视图添加到 cell.contentView

请注意，您不必继承 UITableCellView - 只需将这些步骤添加到您的 tableView:cellForRowAtIndexPath: 方法中，它们就会出现。

享受，

达米安

【参考方案5】：

重写 drawRect 方法并根据需要绘制线条。

- (void)drawRect:(CGRect)rect

      CGRect bounds = [self bounds];
      CGContextRef context      = UIGraphicsGetCurrentContext();    
      CGContextSetLineWidth(context, 1.0);
      CGContextSetStrokeColorWithColor(context, [topColor CGColor]);
      // border top
      CGContextMoveToPoint(context, bounds.origin.x, bounds.origin.y);
      CGContextAddLineToPoint(context, bounds.origin.x+bounds.size.width, bounds.origin.y);
      CGContextStrokePath(context); 
      // border bottom
      CGContextSetLineWidth(context, 1.0);
      CGContextSetStrokeColorWithColor(context, [lowerColor CGColor]);

      CGContextMoveToPoint(context, bounds.origin.x, bounds.origin.y+1);
      CGContextAddLineToPoint(context, bounds.origin.x+bounds.size.width, bounds.origin.y+1);

      CGContextStrokePath(context);