添加视图滚动视图，将拉伸以填充可用宽度 [英] Adding a view to a scroll view that will stretch to fill available width

问题描述

我使用的自动布局在情节串连图板，没有code和我有在获得滚动视图的内容视图中的视图可以拉伸以填充设备宽度困难。我理解这个问题是一个模糊的滚动视图宽度，但我不知道如何使它无歧义时，我希望它一直延伸到填充可用宽度（有一些填充）。

I am using Auto Layout in a storyboard, no code, and am having difficulties in getting the view inside the scroll view's content view to stretch to fill the device width. I understand the issue is an ambiguous scroll view width, but I'm not sure how to make it non-ambiguous when I want it to always stretch to fill available width (with some padding).

在一个视图控制器，我添加了一个滚动视图有4个约束：顶部，底部，领先，落后于上海华。我添加了一个视图滚动视图，将作为内容视图 - 所有子视图将被添加到内容视图。它有4个约束：顶部，底部，导致尾随滚动视图。然后我说我想看到的视图内容视图（具有固定高度，但拉伸以填充屏幕宽度一个简单的红色框）。其约束：尾随至上海华（15），导致上海华（15），顶部的SuperView（15），底部上海华（15），和高度等于60

In a view controller, I added a scroll view with 4 constraints: top, bottom, leading, trailing to superview. I added a view to the scroll view that will act as the content view - all subviews will be added to the content view. It has 4 constraints: top, bottom, leading, trailing to scroll view. I then added the view I want to be visible (a simple red box that has a fixed height but stretches to fill the screen width) to the content view. Its constraints are: trailing to superview (15), leading to superview (15), top to superview (15), bottom to superview (15), and height equals 60.

这导致一个不明确的滚动视图宽度，帧被放错位置 - 它想要的方块图的宽度设定为0

This results in an ambiguous scroll view width, and the frames are misplaced - it wants to set the box view's width to 0.

如何能我设置了这样的框景拉伸以填充设备屏幕，分辨率滚动视图内容大小宽度歧义？

How can I set this up so the box view stretches to fill the device screen, resolving the scroll view content size width ambiguity?

推荐答案

在你的问题中所描述的约束等同于以下VFL：

The constraints you described in your question are equivalent to the following VFL:

• 滚动视图占据整个视图

• The scroll view occupies the entire view

H:|[scrollView]|
V:|[scrollView]|

红色的看法是60磅高，有15的边缘保证金滚动视图的 contentSize ：

H:|-(15)-[redView]-(15)-|
V:|-(15)-[redView(60)]-(15)-|

红色的观点是模棱两可的，因为没有什么定义其宽度。 （红色视图和滚动视图之间的水平约束定义滚动视图 contentSize ，而不是红色视图的宽度。见的苹果技术说明2154 。）

The red view is ambiguous because there is nothing that defines its width. (The horizontal constraints between the red view and the scroll view define the scroll view's contentSize, not the red view's width. See Apple Technical Note 2154.)

您通过添加一个约束说，红色的看法是比主视图30pt窄解决这个歧义。因此，通过加入红视图中滚动视图的上海华之间的约束<大骨节病>控制从红色视图滚动视图-dragging（这是可能比较容易从文档大纲做）：

You resolve this ambiguity by adding a constraint that says that the red view is 30pt narrower than the main view. So add constraint between red view an the scroll view's superview by control-dragging from the red view to the scroll view (and this is probably easiest to do from the document outline):

然后选择宽度相等

已经定义了红色的观点是主要观点相同的宽度，你现在必须改变这种约束修改常量来调整你的红色视图和滚动视图之间提供的边缘contentSize 。因此，选择您刚添加的约束并对其进行编辑，更改常量-30：

Having defined the red view to be the same width of the main view, you now have to alter that constraint to modify the constant to adjust for the margins you supplied between the red view and the scroll view's contentSize. Thus, select that constraint you just added and edit it, changing the constant to -30:

坦率地说，Interface Builder的技术是有点麻烦。它可能会更容易来说明如何做到这一点编程方式：

Frankly, that Interface Builder technique is a little cumbersome. It may be easier to illustrate how to do this programmatically:

view.addConstraint(NSLayoutConstraint(item: redView, attribute: .Width, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 1.0, constant: -30))

这篇关于添加视图滚动视图，将拉伸以填充可用宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！