Question

我正在swift中创建一个ios应用程序，并希望在像Facebook这样的单元格之间添加间距（图片如下）。

我正在为帖子使用自定义笔尖。我知道要使用UITableViewController。我想我会使用分隔符样式，但它没有达到效果。我瞪了几个小时，无法在swift中找到一个有意义的教程！有人可以解释他们是如何使用swift在那里做的吗？谢谢！

enter image description here

Answer 1

这是我的结果解决方案:(基于Jorge Casariego的答案）

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! CustomApplicationCell

    cell.contentView.backgroundColor = UIColor.clear

    let whiteRoundedView : UIView = UIView(frame: CGRectMake(10, 8, self.view.frame.size.width - 20, 149))

    whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 0.8])
    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 2.0
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
    whiteRoundedView.layer.shadowOpacity = 0.2

    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubviewToBack(whiteRoundedView)

    return cell
}

表行高：165点

标题部分高度，页脚部分高度：10磅

和结果

编辑Swift 3语法：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomApplicationCell

    cell.contentView.backgroundColor = UIColor.clear

    let whiteRoundedView : UIView = UIView(frame: CGRect(x: 10, y: 8, width: self.view.frame.size.width - 20, height: 120))

    whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])
    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 2.0
    whiteRoundedView.layer.shadowOffset = CGSize(width: -1, height: 1)
    whiteRoundedView.layer.shadowOpacity = 0.2

    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubview(toBack: whiteRoundedView)

    return cell
}

以下是将视图显示为素材卡的新方式：

创建 CardView.swift

@IBDesignable
class CardView: UIView {

    @IBInspectable var cornerRadius: CGFloat? = 5

    @IBInspectable var shadowOffsetWidth: Int? = 0
    @IBInspectable var shadowOffsetHeight: Int? = 2
    @IBInspectable var shadowColor: UIColor? = .black
    @IBInspectable var shadowOpacity: Float? = 0.3

    override func layoutSubviews() {
        layer.cornerRadius = cornerRadius!
        let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius!)

        layer.masksToBounds = false
        layer.shadowColor = shadowColor?.cgColor
        layer.shadowOffset = CGSize(width: shadowOffsetWidth!, height: shadowOffsetHeight!);
        layer.shadowOpacity = shadowOpacity!
        layer.shadowPath = shadowPath.cgPath
    }
}

现在只需将CardView类添加到您的UIView。

Answer 2

使用Swift 2，你可以用这种方式在UITableViewCells之间做间隔：

在TableViewController中复制：

    // In this case I returning 140.0. You can change this value depending of your cell
    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 140.0
    }

    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

        cell.contentView.backgroundColor = UIColor.clearColor()

        let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 10, self.view.frame.size.width, 120))

        whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 1.0])
        whiteRoundedView.layer.masksToBounds = false
        whiteRoundedView.layer.cornerRadius = 2.0
        whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
        whiteRoundedView.layer.shadowOpacity = 0.2

        cell.contentView.addSubview(whiteRoundedView)
        cell.contentView.sendSubviewToBack(whiteRoundedView)
    }

结果如下：

Answer 3

我花了至少一个小时研究这个话题。最后，我想出了一个使用透明边框的想法：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "faqCell", for: indexPath)

    // ...

    cell.layer.borderWidth = CGFloat(TABLE_CELLSPACING)
    cell.layer.borderColor = tableView.backgroundColor?.cgColor

    return cell
}

这在Swift 3 / Xcode 8中完美无缺。

Image: This is how it looks like on my side

Answer 4

如果你想拥有正确/合法的间距，而不是技巧，你可以尝试UICollectionView而不是UITableView。

UICollectionView比UITableView更通用，你几乎可以自定义它。

Answer 5

这里有很多正确的答案。

我发现最简单的方法是在Interface Builder中的单元格内容视图中创建一个容器视图。然后将所有单元格中有意义的内容放入其中并约束到该视图。

根据您的填充要求约束容器视图。

类似的东西：

然后在tableViewCellForRow中添加以下内容（假设您的容器视图出口名为containerView）。

clsImg WithEvents

//如果你愿意，可以添加边框，阴影等。

看起来像

Answer 6

我创建了一个UITableViewCell的子类和一个nib文件。将UIView拖到单元格的 contentView 中，首先，将其设置为与contentView相同的大小。这将作为一个容器，成为新的＆＃34;内容查看。你可以把你需要的东西放在那里，就像你通常在UITableViewCell的contentView中一样。

现在，您可以调整容器视图的高度，以在单元格的底部留下所需的间距。最后，将 contentView 的背景颜色更改为 clearColor ，这将完成效果。

Answer 7

Jorge Casariego Swift代码的Objective-C版本：


//play with the 'y' parameter of the whiteRoundedView to change the spacing 
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.contentView.backgroundColor = [UIColor colorWithRed:225/255.0 green:225/255.0 blue:225/255.0 alpha:1.0];
    UIView  *whiteRoundedView = [[UIView alloc]initWithFrame:CGRectMake(5, 2, self.view.frame.size.width-10, cell.contentView.frame.size.height)];
    CGFloat colors[]={1.0,1.0,1.0,1.0};//cell color white
    whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), colors);
    whiteRoundedView.layer.masksToBounds = false;
    whiteRoundedView.layer.cornerRadius = 5.0;
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1);
    whiteRoundedView.layer.shadowOpacity = 0.2;
    [cell.contentView addSubview:whiteRoundedView];
    [cell.contentView sendSubviewToBack:whiteRoundedView];
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //assign the right cell identifier
    UITableViewCell *cell = [[self tableView]dequeueReusableCellWithIdentifier:CellIdentifier];
    return cell.bounds.size.height;
}

Answer 8

Swift 4的代码

override var frame: CGRect {
        get {
            return super.frame
        }
        set (newFrame) {
            var frame =  newFrame
            frame.origin.y += 4
            frame.size.height -= 2 * 5
            super.frame = frame
        }
    }

Answer 9

这些方法可以帮助您实现间距： -

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 15;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView *invisibleView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds .size.width, 15)];
[invisibleView setBackgroundColor:[UIColor clearColor]];
return invisibleView;

}

Answer 10

有两种可能的解决方案：
1）使用UICollectionView垂直布局。这是非常灵活的解决方案，您可以写own layout进行收集。 Some amazing results with custom layout
2）喜欢@sikhapol评论。但是你会遇到突出显示细胞的问题。在我的项目中，我创建了具有content出口视图的公共单元格，其中包含所有内容视图。

class ShadowContentCell: UITableViewCell {
    @IBOutlet var content: UIView!
    private var contentBg: UIImageView!
    private var contentOverlay: UIImageView!

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.frame = super.frame
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        // custom higlight color
        selectedBackgroundView = UIView()
        selectedBackgroundView.backgroundColor = nil
        contentBg = UIImageView(frame: content.bounds)
        contentBg.autoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth
        contentBg.image = UIImage(color: content.backgroundColor)
        content.addSubview(contentBg)
        content.sendSubviewToBack(contentBg)

        contentOverlay = UIImageView(frame: content.bounds)
        contentOverlay.autoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth
        contentOverlay.highlightedImage = UIImage(color: UIColor(white: 0.000, alpha: 0.2))
        content.addSubview(contentOverlay)
    }

    override func setHighlighted(highlighted: Bool, animated: Bool) {
        contentOverlay.highlighted = highlighted
        if animated {
            let transition = CATransition()
            transition.duration = 0.3
            transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
            transition.type = kCATransitionFade

            contentBg.layer.addAnimation(transition, forKey: nil)
        }
    }
    override func setSelected(selected: Bool, animated: Bool) {
    }
}

UITableViewCells之间的间距

10 个答案: