如何在表格视图中的两个单元格之间留出空间？答案

【问题标题】：How to give space between two cells in tableview?如何在表格视图中的两个单元格之间留出空间？
【发布时间】：2011-11-03 14:36:15
【问题描述】：

我想要表格视图中两个单元格之间的空格，

我想要这样的细胞，

我该怎么做？

【问题讨论】：

你应该创建自定义单元格，请参考Link 1和Link 2
看看我在底部的回答。

标签： iphone objective-c cocoa-touch uitableview ios4

【解决方案1】：

您也可以在 UITableView 中创建 TableView 的 Sections... 此方法是强制性的，因此创建 section 并且在每个 section 中您可以像在图片中一样创建单个单元格..

【讨论】：

但是你将如何维护我们在 cellforrowindexpath 中提供的数组......我面临的问题是我的每个单元格在每个部分行中打印相同的元素。有什么想法吗？？
@PavanMore：你的具体情况是什么？维护数组很容易。只需声明 NSArray 的属性并初始化它。然后基于 cellForRowIndexpath 即单元格索引只需更改单元格文本。很简单...如果您的情况不同，请详细说明。
如果你有多个部分和多行，试试这个stackoverflow.com/a/29258935/2446178
这是最简单的方法，到目前为止我发现了，但是如果您需要使用部分和行并避免额外的超载，请尝试在 UIView 上添加元素，而不是直接在内容视图中添加元素。另外，添加约束相应地。

【解决方案2】：

对于屏幕截图中的单元格之间的间距，不需要自定义单元格（无论如何，对于它们的外观，如渐变 bkg 等，这无论如何都是一个好主意，但这对你的单元格之间的间距）

要实现这种间距，只需在 UITableView 中使用不同的部分。

[编辑] 解释了所有内容 In Apple's TableView Programming Guide（值得一读，因为它包含很多关于 tableview 的知识）

【讨论】：

【解决方案3】：

在 Table View DataSource 中有两个方法，分别是节数和行数在部分返回 3；成行返回 1；

【讨论】：

【解决方案4】：

在 TableView 中获取两个单元格之间空间的最佳方法，以这种方式在 numberofsections 的委托方法中声明您想要的部分数

例如你有 10 个对象的数组

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
  return [array count]; //array count returns 10
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {


    return 1;// this should be one because it will create space between two cells if you want space between 4 cells you can modify it.
}

那么重点是在 cellForRowAtIndexPath 委托方法中你需要使用 indexpath.section 而不是 indexpath.row

cell.textLabel.text=[NSString stringWithFormat:@"%@",[array objectAtIndex:indexPath.section]];

即检查您的表格视图中两个单元格之间的空间。尽情享受吧！

【讨论】：

感谢您提供的信息。像魅力一样工作！
感谢 indexPath.section 部分
如何在它们之间留出 5px 或 10px 等特定空间
可以设置section的页眉和页脚高度
我有一些非白色背景上的页眉和页脚的 uiview 残留物。容易修复。只需覆盖页眉和页脚的视图，并将视图背景颜色设置为清除。

【解决方案5】：

你不能直接设置单元格之间的距离，但是你可以在section中设置header的高度来达到同样的效果。

1.设置你需要的单元格数量：

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 
{
    return 3; // in your case, there are 3 cells
}

2.每个部分只返回1个单元格

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

3.设置部分标题的高度以设置单元格之间的空间

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 10.; // you can have your own choice, of course
}

4.设置header的背景色为清色，这样不会显得怪怪的

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] init];
    headerView.backgroundColor = [UIColor clearColor];
    return headerView;
}

【讨论】：

这很好，但是不使用这种方式也可以创建距离。链接“stackoverflow.com/questions/11453366/…”。
一个很好的方法。
这个答案对我很有帮助。 Here is a Swift version.
很好，但它也会为第一个单元格添加标题，而且它不允许从 cellForRowAtIndexPath 中的数组传递数据，因为所有单元格都将被数组的第一个元素填充。
如果您不想在第一个单元格中添加标题，只需在 heightForHeaderInSection 中添加 if/else 语句。对于数组问题，只需使用indexPath.section 作为数组索引（而不是indexPath.row）。你说的根本不是问题。

【解决方案6】：

有时，您可能真的希望将 tableview 保持在行中，并有 1 个部分。例如，如果您需要为该表格视图显示一个自定义标题，该标题在您滚动浏览该部分时保持在原位，则可能会发生这种情况。

在这种情况下，我建议做的是返回比单元格的正常高度更大的浮点数：

- (float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

然后确保表格样式为普通，并且单元格分隔符为无。您可以在 XIB 文件本身或代码中执行此操作：

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.tableView.style = UITableViewStylePlain;

也许还可以将单元格的选择样式添加为无（否则看起来您选择的不仅仅是单元格的可见部分）。

cell.selectionStyle = UITableViewCellSelectionStyleNone;

这会给单元格之间留下空间的印象，但同时将它们保持为一个部分中的行（这有时是您想要的）。

【讨论】：

【解决方案7】：

对于寻找在不使用部分的情况下显示单元格之间间隙的替代方法的人，您可能希望显示替代颜色和高度，如下所示。使用clearColor 作为间距。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    if (indexPath.row % 2 == 1)
    {
        static NSString *CellIdentifier = @"cellID1";
        UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                            reuseIdentifier:CellIdentifier];
        }

        cell.backgroundColor = [UIColor colorWhite];

        return cell;

    } else {

        static NSString *CellIdentifier2 = @"cellID2";
        UITableViewCell *cell2 = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier2];
        if (cell2 == nil) {
            cell2 = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                            reuseIdentifier:CellIdentifier2];
        }
        cell2.backgroundColor = [UIColor clearColor];

        return cell2;
    }

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row % 2 == 1) {
        return 40.0;
    } else {
        return 2.0;
    }
}

【讨论】：

如何计算单节表的行数
基于您的内容数组。例如：-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return [menus count]; }
它不工作。例如，数组计数为 10，当我在 cellForRowAtIndexPath 和 heightForRowAtIndexPath 中使用此代码时，它只返回 5 行，因为我认为基于此条件 if (indexPath.row % 2 == 1)。

【解决方案8】：

多个部分的答案会起作用，但它非常脆弱，并且不允许 actual 部分。相反，您应该创建一个自定义单元格，或自定义单元格原型，在底部和/或顶部有一个间隙。

使用 IB 中的支柱和弹簧来保持均匀的间隙，并使用 heightForRowAtIndexPath 返回包含间隙的高度。

【讨论】：

它并不脆弱 - 我不认为 - 但它有点 hackish。在找到此页面之前，我已经在我的解决方案中制作了单元格的间隙部分，但它也有缺点。就我而言，它使单元设计比由表管理间隙时复杂得多。 YMMV。
这使得编辑动作看起来像垃圾，伪边距实际上是单元格的一部分，所以在你有编辑动作的情况下，动作视图看起来比视图高
默认的选择和编辑模式看起来很糟糕，但很容易被覆盖...
这与几乎所有其他答案一样，不适用于通过约束计算高度的动态大小的单元格：添加子视图将无济于事，除非您随后还找到所有受影响的约束并更新它们因此，它变得非常复杂，很快。
@ThomasTempelmann 我认为您有充分的理由根据约束来调整单元格的大小，但我从来没有找到这样做的充分理由。我最接近的是基于约束创建一个“模板单元格”，在屏幕外手动填充它，然后使用生成的大小。

【解决方案9】：

您要在视觉上实现的目标与将每个单元格的内容添加到具有灰色背景的容器视图中并将该视图包含在单元格中相同。我认为没有必要在单元格之间添加空格。

【讨论】：

【解决方案10】：

如果有人在寻找 Swift 版本。给你。

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 10; // space b/w cells
}

func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return items.count // count of items
}

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header = UIView()
    header.userInteractionEnabled = false
    header.backgroundColor = UIColor.clearColor()
    return header
}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
}

【讨论】：

我建议做 header.userInteractionEnabled = false ，这样清晰的标题视图就不会收到触摸。如果视图与按钮重叠。

【解决方案11】：

我所做的只是简单地通过创建一个比我想要的（单元格 + 间隙/2）大一点的简单自定义单元格来模拟空间，然后将所有单元格的内容放在内部视图中。

然后将单元格的最顶层视图作为背景颜色，将内部视图作为实际单元格。而且您会产生单元格之间有空间的错觉，而实际上它只是一个带有边框的较大单元格。

【讨论】：

【解决方案12】：

目标 - C

 UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 3)];/// change size as you need.       
 separatorLineView.backgroundColor = [UIColor whiteColor];// you can also put image here
 [cell.contentView addSubview:separatorLineView];

Swift 3（这同样适用于 Swift 4）

var separatorLineView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 3))
/// change size as you need.       
separatorLineView.backgroundColor = UIColor.white
// you can also put image here
cell.contentView.addSubview(separatorLineView)

它对我有用。

【讨论】：

【解决方案13】：

我为此使用了一种简单快捷的方法（使用故事板）

在控制器中添加 UITableView
将分隔符样式设置为无（来自属性检查器）
将行的高度设置为从所需高度的顶部和底部多 5 pts
现在在单元格中添加一个图像，从左右固定，但留出 5 pts 空间（用于填充感觉）并将图像的背景设置为与单元格所需的背景相同

加载表格视图时，感觉单元格之间有空格。

【讨论】：

我会来这里回答这个问题，因为这是我的方法。很简单。
作为“阿卜杜拉赛义德”的方法。您也可以尝试通过上述所有步骤设置标题视图。

【解决方案14】：

我已经检查了所有答案，但我认为这是最简单的方法：

 UIView * theContentView = [UIView alloc]initWithFrame:CGRectMake(0,gap,width,height)];
 theContentView.backgroundcolor = [UIColor lightGrayColor];//contentColor
 cell.backgroundcolor = [UIColor blackColor];//gapColor
 [cell addSubview: theContentView]

原型代码说你可以创建一个子视图来显示单元格的内容，剩下的就是你想要的间隙。

【讨论】：

请稍微修正一下字体，不需要使用粗体和大写字母，谢谢。 :)
不用担心@PeiweiChen，我们在某些时候都是新来的。感谢您的贡献！

【解决方案15】：

我不知道为什么所有的答案都那么复杂。 KIS，仅使用情节提要，我在 tableCell 内容视图中放置了一个 UIView；现在 UIView 高度小于 Content View 高度，就是这样！

使用 Content View 颜色和 UIView 颜色来获得所需的结果。

【讨论】：

大家请参考这个答案。就是这么简单。

【解决方案16】：

我使用 Swift 的简单解决方案：

// Inside UITableViewCell subclass
override func layoutSubviews() {
    let f = contentView.frame
    let fr = UIEdgeInsetsInsetRect(f, UIEdgeInsetsMake(10, 10, 10, 10))
    contentView.frame = fr
}

或一行代码

override func layoutSubviews() {
    contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
}

结果

【讨论】：

您应该在heightForRowAtIndexPath 中提供更高的高度，然后添加插入@UtkuDalmaz

【解决方案17】：

在返回单元格之前，在cellForRowAtIndexPath UITableViewDelegate 方法中添加这些行。

let separator = UIView(frame: CGRectMake(0, 0, cell!.bounds.size.width, 1))
separator.backgroundColor = UIColor.whiteColor()
cell.contentView.addSubview(separator)

【讨论】：

【解决方案18】：

您不必为每个单元格分配每个部分。只需在您的单元格内创建一个 UIView （容器），将其与单元格的视图边缘化。我们在该容器上布局标签、文本、图像等组件。

【讨论】：

【解决方案19】：

* 使用 IOS 9 XCODE 7.3 *

实现此目的最直接的方法是将此代码添加到您的 cellForRowAtIndexPath 方法中。

    cell.separatorInset.left = 20.0
    cell.separatorInset.right = 20.0
    cell.separatorInset.top = 20.0
    cell.separatorInset.bottom = 20.0
    cell.layer.borderWidth = 3
    cell.layer.cornerRadius = 20.0
    cell.layer.borderColor = UIColor.flatSkyBlueColorDark().CGColor

然后转到您的故事板并单击表格视图。转到身份检查器并将视图的背景颜色更改为方法中设置的任何边框颜色。瞧！使用这些值来获得所需的输出。希望这会有所帮助！

注意：如果使用 Chameleon 库，您必须在代码中设置视图的背景颜色，而不是通过故事板插件。由于某种原因，颜色似乎偏离了阴影。

【讨论】：

结果太糟糕了！

【解决方案20】：

我建议创建一个自定义的UITableViewCell 基类并像下面这样使用这个类，

创建自定义UITableViewCell 类
在新类中创建一个UIView，这将充当“baseContentView”，它将是“UITableViewCell.contentView”的直接子代
从父视图 (UITableViewCell.contentView) 调整“baseContentView”上的顶部“padding”（这将是分隔符/间隙）
从这个类继承你所有的自定义类而不是UITableViewCell
将所有内容/子视图添加到“baseContentView”而不是“self.contentView”

您可以根据需要使用“padding”。

【讨论】：

【解决方案21】：

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{

    return __titlesArray.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 10;
}
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *header = [[UIView alloc]init];
    header.backgroundColor = [UIColor clearColor];
    return header;

}

【讨论】：

【解决方案22】：

我用喜欢：

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 194.0;
}

override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
    cell.contentView.backgroundColor = UIColor.clearColor()
    let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 185))

    whiteRoundedView.backgroundColor = UIColor( red: CGFloat(61.0/255.0), green: CGFloat(117.0/255.0), blue: CGFloat(147.0/255.0), alpha: CGFloat(1.0))

    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 3.0
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
    whiteRoundedView.layer.shadowOpacity = 0.5
    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubviewToBack(whiteRoundedView)
}

从以下位置获取颜色代码 RGB 值：

【讨论】：

【解决方案23】：

1) 首先在表格视图中创建 2 个部分。 2）创建一个空单元格。 3）使用要显示的数据创建单元格。 4）使用方法

(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.section==0) {

if (indexPath.row % 2 != 1) { 返回 15.0； } 别的 { 返回 100； } } 否则
```
if (indexPath.row % 2 != 1) {
    return 100.0;
} else {
    return 15.0;
}
```

}

它将在单元格之间添加空间。它对我有用。

【讨论】：

【解决方案24】：

这是我使用 Swift 3 的方法：

在 ViewDidLoad() 中，添加：

self.tableView.rowHeight = 500.0

在表格视图“CellForRowAt”中，添加以下内容：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

    // Configure the cell...
    var actualContentView = UIView()
    actualContentView.frame = CGRect(x: 10, y: 10, width: cell.contentView.frame.width - 20, height: cell.contentView.frame.height - 20)
    actualContentView.backgroundColor = UIColor.blue
    cell.contentView.addSubview(actualContentView)

    return cell
}

【讨论】：

【解决方案25】：

在你的cellForRowAt

cell.layer.borderWidth = 2
cell.layer.cornerRadius = 10
cell.layer.borderColor = UIColor.systemBackground.cgColor

【讨论】：

【解决方案26】：

最好的方法是使用 xib 文件并对其进行顶部和底部约束。例如，这里我给底部约束 10 并确保给单元格提供完美的高度，如下所示。代码中的“joinTableViewCell”是 xib 文件的文件名。

extension JoinTableViewController: UITableViewDataSource,UITableViewDelegate {
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = Bundle.main.loadNibNamed("joinTableViewCell", owner: self, options: nil)?.first as! joinTableViewCell
        cell.ImgView.layer.masksToBounds = true
        cell.ImgView.cornerRadius(cell.ImgView.bounds.width / 2)
        cell.lblName.text = "Christian Bell"
        cell.lblJoin.text = "Joined"+"\t"+"Sep 3"
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 90
    }
    
    
    
}

【讨论】：