带有多标签的 UITableViewCell 自动布局

Question

我正在尝试在 UITableViewCell 中使用带有多个标签的 AutoLayout 以及百分比计算。我希望标签之间的空间相等，但宽度不同。此外，纵向和横向模式下的宽度和空间也会有所不同，如下图所示。

我希望纵向空间为 4，横向空间为 8。

纵向 标签 1 宽度 - 50% Label2 宽度 - 20% Label3 宽度 - 30%

横向 标签 1 宽度 - 50% 标签 2 宽度 - 15% Label3 宽度 - 20% Label4 宽度 - 15%

我使用了水平间距和顶部和底部约束，但它没有导致正确的宽度和空间对齐。第一行也是标题，所以它不应该有披露指示符，其余行应该有它。任何帮助，将不胜感激。

注意：它是一个通用应用程序，我在 iPad 中使用 splitview。在纵向它应该显示 3 个标签，就像在 iPhone 中一样，在横向它应该显示 4 个标签，如上所述。我的主视图控制器也始终可见。

Answer 1

您可以通过以下方式实现您想要的布局

方法一：使用VFL

1. 每当设备的方向发生变化时，您的表格视图会自动重新加载，因此将调用 cellForRowIndexPath 函数。
2. 在 cellForRowIndexPath 中检查设备方向 3.删除所有子视图及其约束 4. 使用 VFL 再次添加所有子视图并使用所需的规范。

方法二：使用不同的自定义UItableViewCell

您可以为每个方向使用不同的自定义 UItableviewCell。

Answer 2

要在 UITableViewCell 中具有相等的间距，您可以添加视图黑白标签，然后将 constarint 设置为所有标签的宽度和高度相同。

Answer 3

由于尺寸等级不区分纵向 iPad 和横向 iPad，因此您不能使用尺寸等级。您可以做的是在您的 xib 中定义所有所需的约束，如下所示

1. 定义标签之间的空间约束并在视图类中为其创建 IBOutlet，我们将其命名为“gapConstraint”。

2. 定义每个标签的宽度约束，该约束将与超级视图的宽度成比例，例如对于更大的标签约束将是更大的label.width = superView.width*0.5。

3. 对于您希望纵向和横向宽度不同的标签，定义两个宽度约束（每个方向一个）并将一个约束的优先级设置为 750（高 - 比如说纵向），另一个为500（低 - 让我们说风景）。为所有此类约束创建出口。我们需要为每个标签定义两个宽度约束（一个用于纵向，一个用于横向），因为 NSLayoutConstraint 的乘数属性是只读的，因此一旦分配了乘数，我们就无法更改它的值。为了解决这个问题，我们定义了两个约束，并且在基于方向的代码中，我们将通过更改优先级来激活更合适的约束。

覆盖 UpdateConstraints 方法，在此方法中您可以检查当前设备方向。如果设备方向是纵向，则将 gapConstraint（在 point1 中创建）的常量值更改为 4，而在横向将 gapConstraint（在 point1 中创建）的常量值更改为 8。对于标签宽度；在纵向时将纵向宽度约束的优先级更改为 750，并将横向宽度约束的优先级降低到 500，而在横向时将纵向宽度约束的优先级更改为 500，同时将横向宽度约束的优先级提高到 750。

Answer 4

附加代码是您在 iPhone 中的问题的解决方案。它与您在 iPhone 中在纵向和横向模式下提到的问题完全相同。您可以为 iPad 中的拆分视图更新此逻辑。如果您发现任何问题，请在此处发表评论。

这个问题在 iOS 8 中按照以下逻辑通过 size 类解决。

1) 添加总宽度的参考视图（黄色视图） - 标签之间的总空间

根据您上面提到的问题，您希望根据单元格宽度添加标签。所以为此你会要求。参考宽度，因为您不能使用 contentView 作为参考。所以我们必须在我的演示代码中为这个黄色视图多取一个视图。额外的空间用于管理间距黑白标签。

2）然后通过乘数分配与参考视图相等的宽度

现在你需要。第一个标签的宽度为 50%，因此使用乘法器逻辑我们实现了它。 例如，如果您想要 100px 第一个标签，则将“参考视图”宽度设置为 200。 同样的方式，我将其他标签管理为 20% 和 30% 的宽度比与参考。查看。

3) 对于纵向模式，为纵向尺寸类添加一个约束

在纵向模式下，您需要。只有 3 个标签，因此使用尺寸类将第 4 个标签的宽度分配为 0。

这一切都在代码下面完成

查看我的尺码代码

Download

Answer 5

首先我们遇到的问题是，您希望纵向空间为 4，横向空间为 8。

如果你很了解尺码等级然后使用它们，从故事板底部选择你想要的尺码等级（纵向模式中使用的尺码等级）你可以使用尺码等级“紧凑宽度常规高度”来设置纵向模式下所有 Iphone 的限制。

现在您设置按钮之间的水平间距约束，在放置水平间距约束后，您可以从您不希望此约束的尺寸类中禁用它，即在横向模式下使用的那些尺寸类。

要禁用任何尺寸类别的特定约束，只需选择该约束，然后在属性检查器中，您将看到一个名为“已安装”的复选框，这意味着此尺寸类别已启用此约束。默认情况下，“已安装”适用于“任何任何”尺寸类别，这意味着此约束适用于所有尺寸类别，只需取消选中该复选框即可。

在“已安装”复选框的左侧有一个图标“+”，可帮助您启用或禁用特定尺寸类的约束，因此从该图标中选择所需的尺寸类并选中该尺寸类的复选框.见图片1

现在为横向添加另一个水平间距约束，并从“任意任意”尺寸类禁用它并为任意宽度启用它，在横向中表示 iphone 的紧凑高度，现在您已经添加了两个相同的约束，具有不同的常量，适用于不同的情况（一种是纵向，另一种是横向）。

现在来解决您希望标签大小成比例的实际问题。现在就像约束一样，您可以启用或禁用不同尺寸类的视图，因此在故事板上拖动四个标签并禁用“紧凑宽度常规高度”尺寸类的第四个标签。

要启用或禁用特定尺寸类别的视图，请选择标签，然后在属性检查器中使用相同的“已安装”复选框，并禁用“紧凑宽度常规高度”尺寸类别的第四个标签。

现在唯一剩下的就是您要为横向和纵向设置不同的宽度。为此，我们必须为每个标签设置两个宽度约束（只有第四个标签有一个宽度约束）一个用于纵向，另一个用于横向。

现在根据需要为每个纵向标签设置宽度约束，并仅对“紧凑宽度常规高度”尺寸类启用这些约束。所以他们只能在肖像中工作。

现在从故事板的底部将尺寸等级更改为“常规宽度紧凑高度”，并再次使用不同的常量在标签上放置宽度约束。您会观察到的一件事是，这次您可以为第四个标签设置约束，因为这个标签只可见，就是这个尺寸等级。

就是这样 :) 希望这会对你有所帮助，告诉我这是否有效。