UIScrollView AutoLayout仅垂直

时间:2014-09-22 19:20:39

标签: ios objective-c swift uiscrollview autolayout

我想让AutoLayout与UIScrollView一起使用并且遇到一点麻烦。这是我做的:

  1. 在主视图内添加UIScrollView框架:[top:0,left:0,width:320,height:568]

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

    < / LI>
  3. 设置UIScrollView约束:[top:0,bottom:0,left:0,right:0]

  4. 设置“ContentView”约束:[top:0,bottom:0,left:0,right:0]

  5. 对齐“ContentView”

  6. 中的项目
  7. 将主视图bgcolor设置为灰色(看看发生了什么)

  8. 以下是问题的屏幕截图:http://imgur.com/P8s9lB0

    由于某种原因,约束使内容视图位于屏幕中间。此外,它向各个方向滚动。我希望内容只能在UITableView中的垂直方向滚动,因此我无法像那样移动它:http://imgur.com/lBCwfAS

    我做错了什么?我已经检查了StackOverflow和Google中可以找到的所有教程和答案,并且没有人真正有一个奇怪的问题,所以我正在寻求帮助。

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

8 个答案:

答案 0 :(得分:29)

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

UIScrollView只需要了解它里面有多少宽度和空间。所以它需要固定到LeadingTrailingTop&amp; Bottom限制。此外,内容的宽度和高度需要修复(这并不意味着我必须具体说明。我仍然可以使用约束来实现这一点。)

  1. 根据需要添加UIScrollView和位置。
  2. UIView内为UIScrollView添加Leading
  3. 设置TrailingTopBottom&amp;内容UIView的{​​{1}}约束为0。
  4. Equal WidthUIScrollView添加UIView约束。这将使其仅垂直滚动。
  5. 您现在需要设置内容UIView的高度。然后,您可以指定内容视图的高度(blech),也可以通过确保底部控件被限制在内容视图的底部来使用其中包含的控件的高度。
  6. 我做了这件事并且有所作为。

答案 1 :(得分:19)

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

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

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

self.scrollView.directionalLockEnabled = YES;

答案 2 :(得分:7)

总结Leszek S&#39;回答:

为了拥有垂直滚动视图,滚动视图中的所有视图都必须设置 宽度约束。很容易设置滚动视图的超级视图。

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

如果你有一堆视图,你可能想把它们放在一个包含视图的视图中。对于我的情况,我只有5或6个标签,可以动态改变高度,但不应该改变宽度,所以我只是使它们的宽度与滚动视图相同。和宾果游戏,垂直滚动视图,标签根据文字增长或缩小。

答案 3 :(得分:3)

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

TegScrolledContent.createContentView(scrollView)

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

enter image description here

答案 4 :(得分:1)

为内容视图提供明确的高度和宽度约束

答案 5 :(得分:1)

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

// 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

答案 6 :(得分:1)

除了@ derek的回答,我想补充一点,设置contentOffset总是在 scrollViewDidScroll 中会导致性能问题。因此,请仅检查x是否为0,然后设置contentOffset

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

和滚动视图是

directionalLockEnabled = true

答案 7 :(得分:0)

在Xcode 12.1垂直滚动视图设置中使用Swift 4-5进行了测试

  1. 添加滚动视图,并将上,下,左和右约束设置为0。 enter image description here
  2. 通过在大小检查器中取消选择滚动视图“内容布局指南”。enter image description here
  3. 将uiview添加到“滚动视图”。 enter image description here

4。我们需要相对于滚动视图设置uiview的约束。按住Control键单击uiview,然后附加到滚动视图。

enter image description here

  1. 这带来了两者之间的约束。

enter image description here

  1. 按住Shift键可选择多个。我们需要添加等宽,等高,前导,尾随,顶部和底部。

enter image description here

  1. 将“相等高度”编辑为:超级观看优先级从1000提升到250。

enter image description here

  1. 现在添加内容。为简单起见,我在属性检查器中添加了图片和带有0行的标签,并且视图中确实加载了许多文本。

enter image description here

  1. 最终结果!

enter image description here