[英]Fill Proportionally in UIStackView
I am using Storyboard to create a layout which consists of a UITableView and a UIView at the bottom. 我正在使用Storyboard创建一个布局,底部包含一个UITableView和一个UIView。 I am using UIStackView and playing them vertically.
我正在使用UIStackView并垂直播放它们。 I want the UITableView to take 80% of the height and UIView (footer) to take 20%.
我希望UITableView占据80%的高度,UIView(页脚)占20%。 I am using Fill Proportionally option of UIStackView and even through in Xcode preview it looks good but when the app is run it does not render correctly.
我正在使用UIStackView的Fill Proportionally选项,甚至在Xcode预览中它看起来不错,但是当应用程序运行时它无法正确呈现。 Here is what I want it to look like:
这是我想要的样子:
And here is what it looks like when it is run: 以下是它运行时的样子:
Ideas? 想法?
You will need to set an explicit constraint to make tableView.height 4x bigger than your view size. 您需要设置一个显式约束,使tableView.height比视图大小大4倍。 They don't have intrinsic content size, so the
stackView
does not "know" how to properly fill the space. 它们没有内在的内容大小,因此
stackView
不会“知道”如何正确填充空间。
Also, set the distribution mode to .fill
, because .fillProportionally
uses intrinsic content size to determine proper distribution (excerpt from docs ): 此外,将分发模式设置为
.fill
,因为.fillProportionally
使用内在内容大小来确定正确的分布(摘自docs ):
case fillProportionally
案例填充比例
A layout where the stack view resizes its arranged views so that they fill the available space along the stack view's axis.
堆栈视图调整其排列视图大小的布局,以便它们沿堆栈视图的轴填充可用空间。 Views are resized proportionally based on their intrinsic content size along the stack view's axis.
视图根据堆栈视图轴的内在内容大小按比例调整大小。
Using constraints we are setting the size explicitly, not using intrinsic content size - thus .fillProportionally
does not work. 使用约束我们明确地设置大小,而不是使用内在的内容大小 - 因此
.fillProportionally
不起作用。 I assume in that case the stackView
uses values returned by view.intrinsicContentSize
directly. 我认为在这种情况下,
stackView
使用由返回值view.intrinsicContentSize
直接。 However, constraints will not change view.intrinsicContentSize
. 但是,约束不会更改
view.intrinsicContentSize
。
If you would be doing it in code, you could do it with this: 如果您要在代码中执行此操作,则可以使用以下代码执行此操作:
tableView.heightAnchor.constraint(equalTo: myView.heightAnchor, multiplier: 4).isActive = true
In storyboards, control drag from tableView
to the myView
and select Equal Heights
: 在故事板中,控制从
tableView
拖动到myView
并选择Equal Heights
:
Then select the created constraint and set the appropriate multiplier: 然后选择创建的约束并设置适当的乘数:
In the storyboard's Document Outline control-drag from the top view to the stack view and select Equal heights. 在storyboard的Document Outline控件中 - 从顶视图拖动到堆栈视图并选择Equal heights。 Now go to the Size Inspector and you should see the constraint.
现在转到Size Inspector,您应该看到约束。 Double click on it and set the multiplier to 0.2.
双击它并将乘数设置为0.2。 Then update the frames.
然后更新帧。
Keep the stack view distribution as Fill. 将堆栈视图分布保持为Fill。
Control drag from view2 to view1 to create equal heights constraint. 控制从view2拖动到view1以创建相等的高度约束。
Go to the constraint and set multiplier as 0.2. 转到约束并将乘数设置为0.2。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.