如何创建这个自定义的UITableViewCell

Question

我正在尝试创建像这样的表格视图

我不知道如何做到这一点。我是UITableViewCell的子类，并为我的单元格提供了一个单独的.xib文件。这似乎是最干净的方法。

问题在于如何在边/顶部/底部制作边距，如何添加虚线以及创建边框/半径/阴影。

创意1： 将整个单元格添加为图像，并将实际单元格设置为灰色。应该工作，因为我的细胞将具有相同的尺寸。 （虽然不那么有趣;））

创意2： 将单元格设置为灰色，添加一个新的UIView，它是我图像中的实际框，并使视图变为白色，以编程方式添加边框，边框半径和阴影（我认为可能吗？）。我如何创建虚线呢？以编程方式或仅使用图像？

如果重要的话，我正在使用iOS6。

赞赏任何想法和意见。

Answer 1

有几点想法：

首先，我认为使用故事板可以使UITableViewCell的子类化更加容易。无需加载NIB所需的代码。您可以正确设计子类化单元格。

其次，我考虑使用Quartz 2D以编程方式配置单元格的内边框。 Quartz 2D具有虚线，阴影等功能。

基本上，您可以通过编程方式调整用户界面。因此，将QuartzCore.framework添加到项目中，并为单元格的内边框创建子类，可能类似于：

#import <QuartzCore/QuartzCore.h>

@interface CellInnerBorderView ()

@property (nonatomic, strong) CAShapeLayer *shapeLayer;

@end

@implementation CellInnerBorderView

// this adds shadow and border to the cell

- (void)configureBackgroundView
{
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowRadius = 2.0;
    self.layer.shadowOpacity = 0.8;
    self.layer.shadowOffset = CGSizeMake(0.0, 2.0);

    self.layer.borderColor = [UIColor blackColor].CGColor;
    self.layer.borderWidth = 1.0;
}

// this adds a dashed line, half way down, inset by 5 points left and right

- (void)addDashedSeparator
{
    UIBezierPath *path = [UIBezierPath bezierPath];

    CGPoint startPoint = CGPointMake(5.0, self.frame.size.height / 2.0);
    CGPoint endPoint = CGPointMake(self.frame.size.width - 10.0, self.frame.size.height / 2.0);

    [path moveToPoint:startPoint];
    [path addLineToPoint:endPoint];

    if (self.shapeLayer)
        [self.shapeLayer removeFromSuperlayer];

    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.path = path.CGPath;
    self.shapeLayer.strokeColor = [UIColor blackColor].CGColor;
    self.shapeLayer.lineDashPattern = @[@1, @1];
    self.shapeLayer.fillColor = [UIColor blackColor].CGColor;
    self.shapeLayer.lineWidth = 1.0;
    self.shapeLayer.strokeStart = 0.0;
    self.shapeLayer.strokeEnd = 1.0;

    [self.layer addSublayer:self.shapeLayer];
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    [self configureBackgroundView];
    [self addDashedSeparator];
}

@end

然后，您可以在Interface Builder中添加一个代表UITableViewCell内边框的视图，将其指定为CellInnerBorderView（或您选择调用它的任何内容），并且您会得到此行为。< / p>

Answer 2

您可能希望将图像用作背景。我会为两个日期组件使用两个单独的UILabel。您可以使标签背景透明，但如果不是，那么您将获得更好的性能。边距只是标签的x，y坐标。

背景图像的替代方案是使用Core Graphics，它具有非常陡峭的学习曲线。

Answer 3

我就是这样做的。

使你的细胞的背景视图成为带有阴影的白色区域 （该视图将是一个完整的视图层次结构，其根视图将其backgroundColor设置为clear，因此您可以获得保证金）
您需要提供与形状和阴影匹配的selectedBackgroundView 使用clearColor背景创建内容视图以将文本放在那里。

虚线，取决于选择单元格时的显示行为，可能适合将其放在内容视图或背景视图中。

应将TableView设置为提供灰色背景。

这就是逻辑，我将实施的细节留给你。

Answer 4

单元的设计非常简单，但另一方面仍然看起来很好（我是简单但有效设计的粉丝）。

因此，我认为可以实现这两种方式。最高效和最简单的方法是预先渲染图像（带阴影和虚线），例如分配给自定义backgroundView实现的UITableViewCell属性。

如果你想在代码中完全绘制“背景”（即以编程方式），请在UITableView中查看my answer的背景阴影。

从我目前的角度来看，我会选择涉及在photoshop中设计的预渲染图像的解决方案。