为 iOS 创建一个如图所示的视图

Posted 2023-03-14

【中文标题】为 iOS 创建一个如图所示的视图

【英文标题】：Creating a view as shown in Picture for iOS

【发布时间】：2018-07-31 06:20:05

【问题描述】：

我正在创建一个需要以这种格式显示数据的应用

现在，这是在 UITableView 中，假设它是 UITableViewCell。

我想做什么：-

1. Lets create a UICollectionView inside the UITableViewCell, this will have 
   3 rows. Every row will contain another UICollectionView where I will put 
   the data
   FLow will be like this :-
   UITableView -> UITableViewCell -> UICollectionView -> UICollectionViewCell -> UICollectionView -> UICollectionViewCell

2. create a UICollectionView inside the UITableViewCell, this will have 
       3 rows. Now I will create a view which contains data as whole and put it on cell. Height will be calculated programatically and view is put inside UICollectionViewCell

所以其他解决方案也是如此，但我对我脑海中的解决方案并不满意。

如果有人知道这样做的正确解决方案。让我知道。我更喜欢以更好的方式做事。

如果您需要更多详细信息，请告诉我

【问题讨论】：

如果数据是相关的，比如姓名和年龄，那么您可以在单个 uitableview 单元格中管理它。 Name 和 Age，将是一个 section header 中的两个不同标签，其他细节将是简单的 uitableviewcell。

不，不相关。

为什么要保留UITableView？您可以完全用 CollectionView 替换 tableView。然后，您可以为此特定单元格编写布局，以便将其呈现为网格。您可以将其他单元格呈现为全宽单元格

【参考方案1】：

创建一个UICollectionView 将UICollectionViewCell 添加到情节提要的视图中 将Vertical UIStackView 添加到具有Fill, and Equal Spacing 属性的单元格。 将布局约束添加到 top,left,right,bottom 到单元格。

现在在cellForRowAtIndexPath 函数中，您可以将尽可能多的addArrangedSubviews 添加到UIStackView。

自定义Cell的大小覆盖函数sizeForItemAtIndexPath

【参考方案2】：

我已经以一种 hacky 的方式做到了这一点。

这是一个 UITableView 中的一个 UITableViewCell，把 UICollectionView 放在这个单元格里面，有 3 个 UICollectionViewCell。

创建 UICollectionViewCell 以使其看起来与图片中的样子相同的逻辑。

1. Use label1 and make it look like the header.
2. for all the subData make a label, make it multiline and when we are passing the data in the label append newLine to every single word.

Label1.text -> "Skill"
Label2.text = "Swimming\n Running\n surfing\n athletic"

现在我们可以得到标签的高度，这将成为 UICollectionViewCell 的高度。 我发现这是制作此类屏幕的最简单方法。