【问题标题】:How to create table view with rounded corners around the list items如何在列表项周围创建圆角的表格视图
【发布时间】:2020-06-26 17:41:57
【问题描述】:

我正在尝试重新创建一个类似于 iOS 13 Health 应用程序详细视图中的菜单。请参考标记的屏幕截图。

我知道这可以通过表格视图来完成。有一个部分标题和列表项。但我想要实现的效果类似于屏幕截图中显示的外观,其中列表项(不包括部分标题)上有背景颜色,列表顶部和底部有圆角。

谁能告诉我如何通过表格视图实现这一点?或者指出我正确的方向?我已经知道如何设置表格视图并以编程方式添加详细信息。我只需要有关如何实现如下所示样式的帮助。

谢谢!

【问题讨论】:

标签: ios swift iphone uitableview


【解决方案1】:

这并不复杂。这是可以完成该样式的多种方式之一。

一个。您可以使用分组的 tableView,正如您在屏幕截图中所指出的那样。

b.提供部分标题,或者更好的是,提供部分视图(用于更多自定义!)。

c。对于每个部分,您都有一个 tableViewCell。

d。对于该 c. 的每个单元格,您将拥有一个 tableView。

e。对于那个 d. 的每个 tableView,你当然会有一个新的单元格(项目单元格)。

f。 e.的tableView的高度如何计算?有多种方法。

  • 提供静态高度(如果您的项目数量是静态的)。
  • 如果是动态计数,但每个单元格的高度是恒定的,则可以这样计算:itemsCount * heightConstantOfCell

  • 如果您再次拥有动态的行数/项目数,并且您拥有每个单元格的恒定高度或每个单元格的动态高度,那么您可以观察整个 tableView 的框架键。

g.最后,只需在 d. 中为 tableView 的每个容器视图添加一些圆角半径。

请注意,此屏幕截图仅显示项目 g.。它只是 tableViewCell 中 tableView 的每个容器视图的角半径,它是主 tableView 的一个单元格。


另一种方法是使用 UICollectionView,但比我所讨论的要复杂一些 - 至少对我来说是这样。

【讨论】:

  • 哇,非常彻底的格伦!太感谢了!我已经有了这个解决方案,但我想看看其他人是否有更有创意的方法。我认为这应该可行,我明天会试一试,并报告任何发现。再次感谢!
  • 当然,@CrisDenopol。让我知道。这是我对这样的 UI 的常用方法。如果您正在寻找更多挑战,请联系UICollectionView
【解决方案2】:

所以,我能够弄清楚。为了那些陷入同样困境的开发者的利益,我在这里发布我的解决方案。但我会将上面格伦的答案标记为正确答案,因为它引导我找到解决方案。再次感谢格伦!

看来我不需要对我的代码做任何特别的事情。我刚刚发现在 XCode 11 和 iOS 13 上,有一种名为“Inset Grouped”的新表格视图样式。您可以从 IB 或通过代码设置此属性。

通过快速实验,我得出了如下截图所示的结果。

【讨论】:

  • 要走的路,克里斯。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-12-27
  • 2012-10-11
  • 1970-01-01
  • 1970-01-01
  • 2019-11-14
  • 2013-06-13
相关资源
最近更新 更多