如何使UITableView看起来像这样

时间:2021-09-05 01:32:20

is it possible to make a distance between cells like that in standard UITableView? There is no options to make separator bigger. Also this distance from right and left.

是否可以在标准UITableView中像单元格之间建立距离?没有选择让分隔符更大。这也是左右两边的距离。

如何使UITableView看起来像这样

5 个解决方案

#1


6  

you can do this by set your cell background to whatever background you want (let's say gray in this case) and in the cell, add a white uiview with left, right, and bottom margin like this:

您可以通过将您的单元格背景设置为您想要的任何背景(在本例中为灰色)并在单元格中添加带有左,右和下边距的白色uiview,如下所示:

如何使UITableView看起来像这样

Then go to your table view, set the separator as none

然后转到表视图,将分隔符设置为none

如何使UITableView看起来像这样

and one last step, set the background of your table view to the same gray background as your cell.

最后一步,将表格视图的背景设置为与单元格相同的灰色背景。

如何使UITableView看起来像这样

Then you don't have to do anything particularly in your code besides simply initial your table cell based on the custom nib file (i assume you want to do this anyway).

然后,除了根据自定义nib文件初始化表格单元格之外,您不必特别在代码中执行任何操作(我假设您要执行此操作)。

If you prefer to construct your cell in codes, you can use the same logic.

如果您希望在代码中构建单元格,则可以使用相同的逻辑。

#2


1  

in method:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

     ...

  cell.backgroundColor = [UIColor whiteColor];

  // This will create a line of 3 pixels that will be separating the cells
  UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,3)];
  separator.backgroundColor = [UIColor darkGrayColor];
  [cell.contentView addSubview: separator];

  // and if you want the border do left and right add:
  UIView *separatorRx = [[UIView alloc] initWithFrame:CGRectMake(318,0,2,cell.frame.size.height)];
  separatorRx.backgroundColor = [UIColor darkGrayColor];
  [cell.contentView addSubview: separatorRx];

  UIView *separatorSx = [[UIView alloc] initWithFrame:CGRectMake(0,0,2,cell.frame.size.height)];
  separatorSx.backgroundColor = [UIColor darkGrayColor];
  [cell.contentView addSubview: separatorSx];

  return cell;

}

如何使UITableView看起来像这样

#3


0  

One way would be to set the backgroundView of the UITableViewCell to an UIImageView containing this white box on that gray background

一种方法是将UITableViewCell的backgroundView设置为包含该灰色背景上的白色框的UIImageView

#4


0  

You have to make a subclass of UITableViewCell. In your own subclass you may make everything you dream about! So, you need to add UIView with whiteColor background and margins as subview on your custom UITableViewCell.

您必须创建UITableViewCell的子类。在你自己的子类中,你可以做出你梦寐以求的一切!因此,您需要在自定义UITableViewCell上添加带有whiteColor背景和边距的UIView作为子视图。

#5


0  

There is not padding option in UITableView. You can either add a UIView in your UITableViewCell which will contains all the cell subviews, and change it's frame to create a padding right in the cell.

UITableView中没有填充选项。您可以在UITableViewCell中添加一个UIView,它将包含所有单元格子视图,并更改它的框架以在单元格中创建一个填充。

I suggest you to use UICollectionView instead, you can easily set the space between cells using a layout. If the cell is smaller than the actual collection View, then it's automatically centered.

我建议您使用UICollectionView,您可以使用布局轻松设置单元格之间的空间。如果单元格小于实际集合View,则它会自动居中。

#1


6  

you can do this by set your cell background to whatever background you want (let's say gray in this case) and in the cell, add a white uiview with left, right, and bottom margin like this:

您可以通过将您的单元格背景设置为您想要的任何背景(在本例中为灰色)并在单元格中添加带有左,右和下边距的白色uiview,如下所示:

如何使UITableView看起来像这样

Then go to your table view, set the separator as none

然后转到表视图,将分隔符设置为none

如何使UITableView看起来像这样

and one last step, set the background of your table view to the same gray background as your cell.

最后一步,将表格视图的背景设置为与单元格相同的灰色背景。

如何使UITableView看起来像这样

Then you don't have to do anything particularly in your code besides simply initial your table cell based on the custom nib file (i assume you want to do this anyway).

然后,除了根据自定义nib文件初始化表格单元格之外,您不必特别在代码中执行任何操作(我假设您要执行此操作)。

If you prefer to construct your cell in codes, you can use the same logic.

如果您希望在代码中构建单元格,则可以使用相同的逻辑。

#2


1  

in method:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

     ...

  cell.backgroundColor = [UIColor whiteColor];

  // This will create a line of 3 pixels that will be separating the cells
  UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,3)];
  separator.backgroundColor = [UIColor darkGrayColor];
  [cell.contentView addSubview: separator];

  // and if you want the border do left and right add:
  UIView *separatorRx = [[UIView alloc] initWithFrame:CGRectMake(318,0,2,cell.frame.size.height)];
  separatorRx.backgroundColor = [UIColor darkGrayColor];
  [cell.contentView addSubview: separatorRx];

  UIView *separatorSx = [[UIView alloc] initWithFrame:CGRectMake(0,0,2,cell.frame.size.height)];
  separatorSx.backgroundColor = [UIColor darkGrayColor];
  [cell.contentView addSubview: separatorSx];

  return cell;

}

如何使UITableView看起来像这样

#3


0  

One way would be to set the backgroundView of the UITableViewCell to an UIImageView containing this white box on that gray background

一种方法是将UITableViewCell的backgroundView设置为包含该灰色背景上的白色框的UIImageView

#4


0  

You have to make a subclass of UITableViewCell. In your own subclass you may make everything you dream about! So, you need to add UIView with whiteColor background and margins as subview on your custom UITableViewCell.

您必须创建UITableViewCell的子类。在你自己的子类中,你可以做出你梦寐以求的一切!因此,您需要在自定义UITableViewCell上添加带有whiteColor背景和边距的UIView作为子视图。

#5


0  

There is not padding option in UITableView. You can either add a UIView in your UITableViewCell which will contains all the cell subviews, and change it's frame to create a padding right in the cell.

UITableView中没有填充选项。您可以在UITableViewCell中添加一个UIView,它将包含所有单元格子视图,并更改它的框架以在单元格中创建一个填充。

I suggest you to use UICollectionView instead, you can easily set the space between cells using a layout. If the cell is smaller than the actual collection View, then it's automatically centered.

我建议您使用UICollectionView,您可以使用布局轻松设置单元格之间的空间。如果单元格小于实际集合View,则它会自动居中。