ios 在 UIStackView 控件中调整 UIView 高度

Adjusting UIView Height Inside UIStackView Control

提问by john doe

I am using a UIStackView in iOS 9 SDK. The height of the stackview is 44 points. I have a UILabel and UIView inside the StackView as shown below:

我在 iOS 9 SDK 中使用 UIStackView。stackview 的高度是 44 点。我在 StackView 中有一个 UILabel 和 UIView，如下所示：

Now, I want to make the green view much smaller than 44.. much like 20. How can I do that?

现在，我想让绿色视图比 44 小得多......就像 20 一样。我该怎么做？

UPDATE: Without the UIStackView I am getting breaking constraints:

更新：没有 UIStackView 我会打破限制：

[GT.BubbleView:0x14536610]   (Names: '|':UITableViewCellContentView:0x14536fd0 )>",
    "<NSLayoutConstraint:0x146b7300 GT.BubbleView:0x14536610.trailing == UITableViewCellContentView:0x14536fd0.trailingMargin>",
    "<NSLayoutConstraint:0x146c4000 'UIView-Encapsulated-Layout-Width' H:[UITableViewCellContentView:0x14536fd0(286)]>"

)

)

采纳答案by Rob Norback

If you are trying to achieve a 20x20 square like the one below:

如果您正在尝试实现如下所示的 20x20 正方形：

Then all you have to do is add another UIView to your green view. Make that UIView's size 20x20pts. Then change the small view background to green and the larger view's background to clear.

然后你所要做的就是将另一个 UIView 添加到你的绿色视图中。使 UIView 的大小为 20x20pts。然后将小视图背景更改为绿色，将大视图的背景更改为清除。

That said, this solution doesn't require a stackview and possibly over-complicates your UI. I would recommend just using autolayout instead.

也就是说，此解决方案不需要堆栈视图，并且可能会使您的 UI 过于复杂。我建议只使用自动布局。

Stackviews are most useful when

Stackviews 在以下情况下最有用

1. you want to compensate for a change in device orientation,
2. want to stack a lot of things on top of each other,
3. want to create a very complicated layout with many elements but that has patterns you can repeat, or
4. simply want to be able to remove an element or add an element in with the sizing correcting itself

1. 您想补偿设备方向的变化，
2. 想把很多东西叠在一起，
3. 想要创建一个包含许多元素但具有可以重复的模式的非常复杂的布局，或者
4. 只是希望能够删除一个元素或添加一个元素，并自行调整大小

That list isn't exhaustive, but should give you an idea of when and why you'd use a stack view.

该列表并不详尽，但应该让您了解何时以及为何使用堆栈视图。

Outside of a prototype cell

在原型单元之外

This behavior is trivial. You can simply set the constraints on your view: '

这种行为是微不足道的。您可以简单地在视图上设置约束： '

And then set the constraints on the stackview:

然后在stackview上设置约束：

Hope this helps, cheers!

希望这有帮助，干杯！

回答by Alexey Bondarchuk

1. First you need to add UIStackViewon the cell

2. Need to add constraints to your UIStackView

3. Adjust your UIStackView

4. Drag&Drop UILabelinto your UIStackView

5. Then Drag&Drop UIViewinto your UIStackView

6. Add green-UIViewlike subview to pink UIView

7. Now you can add couple constraints to green-UIView

8. Now you can run app on simulator or device

   Noticethat I don't added any constraints for UILabel.

1. 首先，你需要添加UIStackView的cell

2. 需要添加约束到您的 UIStackView

3. 调整你的 UIStackView

4. 拖放UILabel到您的UIStackView

5. 然后拖放UIView到您的UIStackView

6. 将green-UIView喜欢的子视图添加到pink UIView

7. 现在你可以添加几个约束 green-UIView

8. 现在您可以在模拟器或设备上运行应用程序

   请注意，我没有为UILabel.

回答by Farooq Zaman

The breaking constraint problem can be easily fixed by setting the priority of width and height constraints to 800 or above.

通过将宽高约束的优先级设置为 800 或以上，可以轻松解决打破约束问题。

回答by Michael McKenna

I wanted to post my answer here so others could see, despite a slightly different problem from OP's.

我想在这里发布我的答案，以便其他人可以看到，尽管与 OP 的问题略有不同。

I was trying to resize a UIView that contained a UIStackView and the constraints were breaking. I was changing the UIView's height constraint between 0 and 66 depending on if there was relevant info to show that the stack view was displaying for.

我试图调整包含 UIStackView 的 UIView 的大小，但约束正在打破。我将 UIView 的高度约束更改为 0 到 66，具体取决于是否有相关信息显示正在显示堆栈视图。

I was able to fix the breaking constraints by removing top and bottom constraints of the stack view inside the view, and instead set it to be vertically centered. This resulted in much smoother scrolling in my table view.

我能够通过删除视图内堆栈视图的顶部和底部约束来修复破坏性约束，而是将其设置为垂直居中。这导致在我的表格视图中滚动更平滑。