表视图单元格

时间:2016-10-17 06:02:12

标签: ios autolayout

我知道这可能不是最好的问题,但我真的需要一个起点:

如果我想创建一个如下所示的布局(使用自动布局):

enter image description here

我尝试的是:

  • 将三个零放在水平堆栈视图中
  • 然后将三个标签(帖子,粉丝,跟随者)放在水平堆栈视图中。
  • 然后将上面的两个水平堆栈视图放入垂直堆栈视图中。
  • 然后我将(帖子,关注者,跟随)标签下面的灰色按钮添加到上面创建的垂直堆栈视图中。所以最后我有一个垂直堆栈视图,包含两个水平堆栈视图和灰色按钮。
  • 最后,我在上面步骤中创建的垂直堆栈视图中将图像添加到左侧,从而形成最终的水平堆栈视图。这一步完全破坏了我的布局。使图像像500宽度,使堆栈视图离开屏幕。所以我在包含图像的最后一个水平堆栈上设置了布局约束,灰色按钮和两个水平堆栈视图到Bottom Space: 140, Top space 10, Leading Space 20, Trailing space 20。 (我没有触及最终堆栈视图中的堆栈视图。我只将布局放在此步骤中创建的主水平堆栈视图上。)

4bar建议之后:

enter image description here

请注意我没有在底部触及名字,facebook.com或生物标签。

3 个答案:

答案 0 :(得分:1)

如果您尚未为最外侧水平堆栈视图设置分布模式,则默认为UIStackViewDistributionFill,在这种情况下,排列的子视图将根据其拥抱优先级拉伸以填充整个宽度。增加图像视图上的内容拥抱优先级(例如,增加到251)以防止它拉伸。此外,如果图像尺寸大于您想要投入的空间,您可能还需要在图像上设置额外的宽度或高度约束以覆盖其固有尺寸。

要理解的主要是UIStackView的大小是由其排列的子视图的内在大小以及间距驱动的。在“填充”模式下,如果有太多可用空间,则使用内容拥抱优先级来确定要拉伸的视图;如果空间太小,则使用压缩阻力优先级来确定要压缩的视图。

答案 1 :(得分:1)

如果您希望图像看起来像正方形,则必须将图像的宽度和高度固定为相同的值。然后将Mode设置为AspectFit,以使图像看起来不会拉长。 固定标签的宽度,例如' posts'。这样他们就会显示整个文本。

答案 2 :(得分:0)

如下所示,您需要设置包含图像的stackView的宽度。

enter image description here