ios UIScrollView AutoLayout 仅垂直

UIScrollView AutoLayout Vertical Only

提问by Gasim

I want to get the AutoLayout working with the UIScrollViewand am having a little trouble with it. Here is what I did:

我想让 AutoLayout 与 一起工作，但UIScrollView遇到了一些麻烦。这是我所做的：

1. Add a UIScrollViewinside the Main View with frame: [top: 0, left: 0, width: 320, height: 568]

2. Add UIView"ContentView" inside the UIScrollViewwith frame and bgcolor black: [top: 0, left: 0, width: 320, height: 568]

3. Setup UIScrollViewconstraints: [top: 0, bottom: 0, left: 0, right: 0]

4. Setup "ContentView" constraints: [top: 0, bottom: 0, left: 0, right: 0]

5. Align the items inside the "ContentView"

6. Set Main View bgcolor to gray (to see what's going on)

1. UIScrollView在 Main View 内添加一个框架：[top: 0, left: 0, width: 320, height: 568]

2. UIView在UIScrollView框架内添加“ContentView”和bgcolor black: [top: 0, left: 0, width: 320, height: 568]

3. 设置UIScrollView约束：[顶部：0，底部：0，左侧：0，右侧：0]

4. 设置“ContentView”约束：[顶部：0，底部：0，左侧：0，右侧：0]

5. 对齐“ContentView”内的项目

6. 将主视图 bgcolor 设置为灰色（以查看发生了什么）

Here is a screenshot of the problem:

这是问题的屏幕截图：

1

1

For some reason, the constraints make the content view be in the middle of the screen. Also, it scrolls in every direction. I want the content to be scrollable only in vertical direction like in UITableView. so that I can't move it like below:

出于某种原因，约束使内容视图位于屏幕中间。此外，它会向各个方向滚动。我希望内容只能在垂直方向上滚动，如UITableView. 所以我不能像下面那样移动它：

What am I doing wrong? I have checked all the tutorials and answers I can find in StackOverflow and Google, and no one actually has just a bizarre problem, so I am asking for help.

我究竟做错了什么？我已经检查了我可以在 StackOverflow 和 Google 中找到的所有教程和答案，实际上没有人遇到过奇怪的问题，所以我寻求帮助。

EDIT:I also added ContentView's width and height as constraints and that didn't help either.

编辑：我还添加了 ContentView 的宽度和高度作为约束，这也没有帮助。

采纳答案by Derek

For disabling the horizontal scroll, you can set the content size in the (void)scrollViewDidScroll method.

要禁用水平滚动，您可以在 (void)scrollViewDidScroll 方法中设置内容大小。

[self.scrollView setContentOffset: CGPointMake(0, self.scrollView.contentOffset.y)];

You'll also want to set the directional lock so only 1 scroll direction is used at a time. https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIScrollView_Class/index.html#//apple_ref/occ/instp/UIScrollView/directionalLockEnabled

您还需要设置方向锁定，以便一次仅使用 1 个滚动方向。 https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIScrollView_Class/index.html#//apple_ref/occ/instp/UIScrollView/directionalLockEnabled

self.scrollView.directionalLockEnabled = YES;

回答by Chris Kemp

You can do this entirely using constraints and it's really easy.

你可以完全使用约束来做到这一点，这真的很容易。

The UIScrollViewjust needs to understand how much width and space it has inside it. So it needs to have something pinned to the Leading, Trailing, Top& Bottomconstraints. Also the width and height of the content needs to be fixed (this does not mean I have to specificy it. I can still use constraints to achieve this.)

该UIScrollView只需要了解多少宽度和空间具有里面。所以它需要有一些东西固定到Leading, Trailing, Top&Bottom约束。内容的宽度和高度也需要固定（这并不意味着我必须指定它。我仍然可以使用约束来实现这一点。）

1. Add a UIScrollViewand position as required.
2. Add a UIViewinside the UIScrollViewfor the content.
3. Set the Leading, Trailing, Top& Bottomconstraints of the content UIViewto be 0.
4. Add an Equal Widthconstraint to the UIScrollViewand UIView. This will make it vertically scrolling only.
5. You now need to set the height of the content UIView. You can then either specify the height of the content view (blech) or use the height of the controls contained within by making sure the bottom control is constrained to the bottom of the content view.

1. UIScrollView根据需要添加和位置。
2. 在内容UIView里面添加一个UIScrollView。
3. 将内容的Leading, Trailing, Top&Bottom约束设置UIView为 0。
4. Equal Width向UIScrollViewand添加约束UIView。这将使其仅垂直滚动。
5. 您现在需要设置内容的高度UIView。然后，您可以指定内容视图 (blech) 的高度，或者通过确保底部控件限制在内容视图的底部来使用其中包含的控件的高度。

I did this and it worked a treat.

我这样做了，效果很好。

回答by n13

To summarize the Leszek S' answer:

总结 Leszek S 的回答：

In order to have a vertically scrolling view, all the views inside the scroll view must have theirwidth constraintset. Easy to just set to the scroll view's superview.

为了有一个垂直滚动视图，滚动视图内的所有视图都必须设置宽度约束。很容易设置为滚动视图的超级视图。

The reason is that the scroll view will not scroll horizontally so as long as none of its subviews need to scroll horizontally. For example, if you have a label, set to 0 lines, auto layout will try to make the label as wide as it can before it starts adding lines and line breaks. If there are no explicit width constraints on the label it'll just make the scroll view content area wider. Constraints for trailing to the scroll view are ignored.

原因是滚动视图不会水平滚动，只要它的子视图都不需要水平滚动。例如，如果您有一个标签，设置为 0 行，自动布局将在开始添加行和换行符之前尝试使标签尽可能宽。如果标签上没有明确的宽度限制，它只会使滚动视图内容区域更宽。拖到滚动视图的约束将被忽略。

If you have a bunch of views, you might want to put them inside a single containing view like in that video. For my case, I only have 5 or 6 labels which can dynamically change height, but should never change width so I just made them all the same width as the scroll view. And bingo, vertically scrolling view with labels that grow or shrink depending on the text.

如果你有一堆视图，你可能想把它们放在一个像那个视频一样的包含视图中。就我而言，我只有 5 或 6 个可以动态更改高度的标签，但不应更改宽度，因此我只是将它们设置为与滚动视图的宽度相同。和宾果游戏，垂直滚动视图，带有根据文本增长或缩小的标签。

回答by Evgenii

I have written a function that allows to scroll content vertically but not horizontally. It creates a UIView with limited width inside scrollview and embeds all scrollview subviews in it.

我编写了一个允许垂直滚动内容但不允许水平滚动的函数。它在滚动视图中创建一个宽度有限的 UIView，并将所有滚动视图子视图嵌入其中。

TegScrolledContent.createContentView(scrollView)

https://github.com/exchangegroup/scrollable-content-ios

https://github.com/exchangegroup/scrollable-content-ios

回答by sheetal

Along with @derek's answer I would like to add that setting contentOffset always in scrollViewDidScrollwill cause performance issue . So please check only if x is not 0 then set contentOffset

随着@derek 的回答，我想补充一点，设置 contentOffset 总是在scrollViewDidScroll 中会导致性能问题。所以请只检查 x 不为 0 时设置 contentOffset

    if(contentOffset.x != 0){
        setContentOffset(CGPointMake(0, contentOffset.y), animated: false)
    }

and yes to the scrollview

是的滚动视图

directionalLockEnabled = true

回答by josh-fuggle

Below is a snippet that I have used to achieve a vertical-only scroll view. It works by adding a content view as a child view of a scroll view, then constraining the width of that content view to the width of the parent scroll view. From then, all of the subviews should be added to the content view rather than to the scroll view.

下面是我用来实现仅垂直滚动视图的片段。它的工作原理是添加一个内容视图作为滚动视图的子视图，然后将该内容视图的宽度限制为父滚动视图的宽度。从那时起，所有子视图都应该添加到内容视图而不是滚动视图。

// View that will contain content of scroll view. Width is constrained to the width of the scroll view.
UIView *contentView = [[UIView alloc] init];
contentView.translatesAutoresizingMaskIntoConstraints = NO;
[scrollView addSubview:contentView];

views[@"contentView"] = contentView;
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:contentView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:contentView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[contentView]|" options:0 metrics:nil views:views]];

// Now, add all your subviews to contentView

回答by mustafa

Give content view explicit height and width constraints

给内容视图明确的高度和宽度限制