1

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

在此处输入图像描述

我不确定该怎么做。我正在继承 UITableViewCell 并为我的单元格设置一个单独的 .xib 文件。这似乎是最干净的方法。

问题是如何在侧面/顶部/底部制作边距，如何添加虚线和创建边框/半径/阴影。

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

想法2： 使单元格变灰，添加一个新的UIView，它是我图像中的实际框，并使视图变白，以编程方式为此添加边框、边框半径和阴影（我认为这是可能的？）。那么如何创建虚线呢？以编程方式还是仅使用图像？

如果这很重要，我正在使用 iOS6。

任何想法和意见表示赞赏。

4

4 回答 4

2

几个想法：

首先，我认为使用情节提要使子类化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（或您选择的任何名称），然后您将获得此行为。

于 2012-12-02T20:55:18.787 回答
0

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

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

于 2012-12-02T19:23:39.500 回答
0

我就是这样做的。

使您的单元格的背景视图成为带有阴影的白色区域。
（该视图将是一个完整的视图层次结构，其根视图的背景颜色设置为清除，因此您可以设置边距）
您需要提供一个与形状和阴影相匹配的 selectedBackgroundView。
使用 clearColor 背景制作内容视图以将您的文本放在那里。

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

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

这就是逻辑，我把实现的细节留给你。

于 2012-12-02T19:23:51.793 回答
0

单元的设计非常简单，但另一方面看起来仍然不错（我喜欢简单但有效的设计）。

出于这个原因，我认为无论哪种方式都可以完成。最高效和最简单的方法是预渲染图像（带有阴影和虚线），例如分配给自定义实现的backgroundView属性。UITableViewCell

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

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

于 2012-12-02T19:24:20.957 回答