简体繁体 English

表格视图单元格中复杂视图的自动布局

[英]Auto Layout for complex view in Table View Cell

原文 2016-10-17 06:02:11 4 3 ios/ autolayout

I know this might not be the best question but I really need to a starting point: 我知道这可能不是最好的问题，但我确实需要一个起点：

If I wanted to create a layout as the one below (using auto layout): 如果要创建以下布局（使用自动布局）：

What I tried was: 我试过的是：

Put the Three zeros in a horizontal stack view 将三个零放在水平堆栈视图中
Then put the three labels (posts, followers, following) in a horizontal stack view. 然后将三个标签（帖子，关注者，跟随者）放在水平堆栈视图中。
Then put those two horizontal stack views above into a vertical stack view. 然后将上面的两个水平堆栈视图放入垂直堆栈视图。
Then I added that gray button below the (posts, followers, following) labels into the vertical stack view created right above. 然后，我在（帖子，关注者，关注对象）标签下方添加了灰色按钮，将其添加到上方创建的垂直堆栈视图中。 So in the end I had one vertical stack view consisting of two horizontal stack views and the gray button. 所以最后我有了一个垂直堆栈视图，其中包括两个水平堆栈视图和灰色按钮。
Finally I added the image to the left in the vertical stack view created in the above step which made a final horizontal stack view. 最后，我将图像添加到在上述步骤中创建的垂直堆栈视图的左侧，从而形成了最终的水平堆栈视图。 This step ruined my layout completely. 这一步完全破坏了我的布局。 Made the image like 500 width which made the stack view go off the screen. 使图像具有500宽度，从而使堆栈视图脱离屏幕。 So I set layout constraints on the very last horizontal stack containing the image, gray button, and two horizontal stack view to Bottom Space: 140, Top space 10, Leading Space 20, Trailing space 20 . 因此，我在最后一个包含图像，灰色按钮和两个水平堆栈视图的水平堆栈上将布局约束设置为Bottom Space: 140, Top space 10, Leading Space 20, Trailing space 20 。 (I didn't touch the stack views inside this final stack view. I only put layouts on the main horizontal stack view created in this step). （我没有在此最终堆栈视图中触摸堆栈视图。我仅将布局放在在此步骤中创建的主水平堆栈视图上）。

After 4bar suggestions: 经过4bar建议：

Please note I have not touched the first name, facebook.com, or bio label at the bottom. 请注意，我没有触摸底部的名字，facebook.com或生物标签。

3 个解决方案

If you have not set the distribution mode for your outermost horizontal stack view, it will default to UIStackViewDistributionFill, in which case the arranged subviews will stretch to fill the whole width according to their hugging priority. 如果您尚未为最外面的水平堆栈视图设置分布模式，它将默认为UIStackViewDistributionFill，在这种情况下，已排列的子视图将根据其拥抱优先级拉伸以填充整个宽度。 Increase the content hugging priority on the image view (say, to 251) to prevent it from stretching. 增加图像视图上具有优先级的内容（例如，增加到251）以防止其拉伸。 Also, if the image size is larger than the space you'd like to devote to it, you may also need to set additional width or height constraints on the image to override its intrinsic size. 另外，如果图像尺寸大于您要占用的空间，则可能还需要在图像上设置其他宽度或高度约束，以覆盖其固有尺寸。

The main thing to understand is that UIStackView's size is driven by the intrinsic sizes of its arranged subviews, plus spacing. 要了解的主要内容是，UIStackView的大小由其排列的子视图的固有大小加上间距驱动。 In Fill mode, if too much space is available, content hugging priorities are used to determine which view to stretch; 在“填充”模式下，如果可用空间过多，则使用内容包含优先级来确定要拉伸的视图； if too little space is available, compression resistance priorities are used to determine which view to compress. 如果可用空间太小，则使用抗压缩优先级来确定要压缩的视图。

If you want the image to look like a square, you have to pin the width and height of the image to the same value. 如果要使图像看起来像正方形，则必须将图像的宽度和高度固定为相同的值。 Then set Mode to AspectFit so that image won't look stretched. 然后将“模式”设置为AspectFit，以使图像看起来不会拉伸。 Pin the width of the labels like 'posts'. 固定标签的宽度，例如“帖子”。 So that they will show the entire text. 这样他们将显示整个文本。