ios UITableViewCells 之间的间距

spacing between UITableViewCells

提问by Now2407

I am creating a ios app in swift and want to add spacing between cells like Facebook (pic bellow).

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

I am using a custom nib for the posts. I know to use UITableViewController. I figure I would use a separator style but it does not achieve the effect. I goggled around for hours and can't find a single tutorial in swift that makes sense! could some one explain how they did it in there app using swift? thanks!

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

回答by ibrahimyilmaz

This is my solution with result: (based on Jorge Casariego's answer)

这是我的解决方案：（基于 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
}

table row height: 165 point

表格行高：165 点

header section height, footer section height: 10 point

页眉部分高度、页脚部分高度：10 磅

and result

和结果

Edit For Swift 3 Syntax:

编辑 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
}

---

---

Simplest way for creating material card view:

创建材质卡视图的最简单方法：

github.com/SwiftCardView

github.com/SwiftCardView

Create CardView.swift

创建CardView.swift

@IBDesignable
class CardView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 2

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

    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
    }
}

Now just add CardView class to your UIView.

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

回答by Jorge Casariego

With Swift 2 you can do spacing between UITableViewCells in this way:

使用 Swift 2，您可以通过这种方式在 UITableViewCells 之间设置间距：

In your TableViewController copy this:

在你的 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)
    }

This is the result:

这是结果：

回答by Nick Ivanov

I spent at least an hour researching the topic. Finally, I came up win an idea to use a transparent border:

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

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
}

This works perfectly in Swift 3/Xcode 8.

这在 Swift 3/Xcode 8 中完美运行。

Image: This is how it looks like on my side

图片：这就是我这边的样子

回答by Maged Mohammed

code for Swift 4

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
        }
    }

回答by Huy Le

If you want to have right / legal spacing, not a trick, you can try UICollectionView instead of UITableView.

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

UICollectionView is more generic than UITableView, and you can custom almost thing on it.

UICollectionView 比 UITableView 更通用，你几乎可以在上面自定义东西。

回答by Ron Holmes

There are many right answers here.

这里有很多正确的答案。

The easiest way I found, was to create a container view inside the cell's contentView in Interface Builder. Then put all your cells meaningful content inside that and constrain to that view.

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

Constrain the container view according to your padding requirements.

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

Something like:

就像是：

Then in your tableViewCellForRow add the following (assuming your container view outlet is called containerView).

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

    currentCell.containerView?.layer.cornerRadius = 8 // Your choice here.
    currentCell.containerView?.clipsToBounds = true

// Add borders, shadows etc. if you'd like.

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

Looks like

好像

回答by Maciej Chrzastek

Objective-C version for Jorge Casariego Swift code:

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;
}

回答by doraemon

I made a subclass of UITableViewCell and a nib file to go with it. Drag a UIView into the contentViewof the cell and to start with, make it the same size as contentView. This will act as a container and become the "new" contentView. You can put what you need in there, just like you would normally in the contentView of a UITableViewCell.

我做了一个 UITableViewCell 的子类和一个 nib 文件来配合它。将 UIView 拖到单元格的contentView中，并首先使其与 contentView 的大小相同。这将充当一个容器并成为“新”的 contentView。你可以把你需要的放在那里，就像你通常在 UITableViewCell 的 contentView 中一样。

Now you can adjust the height of the container view to leave your desired spacing at the bottom of the cell. Finally, change the background color of the contentViewto clearColor, which will complete the effect.

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

回答by Mohd Prophet

These methods will help you to achieve the spacing:-

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

- (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;

}

回答by Gralex

There 2 possible solutions:
1) Use UICollectionViewwith vertical layout. This is really flexible solution, you can write you own layoutfor collection. Some amazing results with custom layout
2) Like @sikhapol has commented. But you will have problems with highlight cell. In my project I create common cell with contentoutlet view, witch contains all content view.

有两种可能的解决方案：
1) 使用UICollectionView垂直布局。这是一个非常灵活的解决方案，您可以编写自己的收藏布局。自定义布局的一些惊人结果
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) {
    }
}