仅在自动布局中具有固定宽度的垂直滚动视图

Posted 2023-03-15

【中文标题】仅在自动布局中具有固定宽度的垂直滚动视图

【英文标题】：Scrollview vertical only with fixed width in Autolayout

【发布时间】：2015-02-06 22:27:10

【问题描述】：

如何快速将滚动视图的宽度设置为屏幕大小的宽度？

我尝试设置正确的前后边界，但我的 aspectscalefill 图像一直在拉伸整个帧。

我试图将视图强制为屏幕宽度并只允许垂直滚动。

【问题讨论】：

这里涉及到哪些元素？你说scrollView和UIImageView？你用的是nix还是xib？

使用故事板，我有一个父视图 > 滚动视图 > 然后是一堆包含所有标签的子视图和一个拉伸的图像视图（有些图像很大，这就是我使用 aspectscalefill 的原因）跨度>

您是将所有元素添加到情节提要中的滚动视图还是通过代码？

通过storyboard添加所有元素

我发现的大多数答案都是通过使用尾随边界来设置宽度的，但是如果没有明确设置宽度，我的图像视图会自动水平拉伸

【参考方案1】：

如果你想用自动布局制作滚动视图，试试这个。根本没有代码，所以您必须将内容从库中拖到 Xcode 的右侧。

在您的视图控制器中拖动滚动视图并将其放置到您想要的任何大小，但看起来您希望将其设置为屏幕大小。将所有边缘固定到视图控制器的边缘。固定尾随、前导、顶部和底部。

现在，不要将您的项目放在滚动视图中，而是在滚动视图中放置另一个视图。使用这个新视图，您将放置所有物品。您很可能必须向上或向下移动视图才能将它们全部放置并调整视图大小。然后，您可以在您的项目上放置您想要的任何约束。当所有项目就位后，将新视图的框架设置回 x = 0 和 y = 0。

然后您将按如下方式放置约束。选择新视图并固定到顶部、底部、尾随和前导，然后在容器中居中。这将产生一个带有一些负数的垂直约束。在情节提要大纲中选择此约束并将其设置为零。

您现在可以垂直滚动了。如果您有任何问题，请告诉我。

【讨论】：

谢谢！经过一些教程甚至一本书，没有人提供不想水平滚动的关键。它将该约束添加到您在容器中居中的视图中。谢谢@Douglas

没问题！编码愉快。

【参考方案2】：

我创建了一个单视图应用程序，并在情节提要中添加了一个UIScrollView，并带有四个约束（上、左、右、下）。我在viewDidLoad() 中添加了以下代码。一切正常。我的图像只是垂直滚动，而不是水平滚动。无需额外设置。

@IBOutlet weak var scrollView: UIScrollView!

override func viewDidLoad() 
    super.viewDidLoad()

    // Just as an example, I make a size with same with of the view
    // and twice the height of the view.
    let size = CGSizeMake(
        self.view.frame.size.width,
        self.view.frame.size.height * 2);

    // Load an image and make a image view
    let image = UIImage(named: "im.jpg")!
    let imageView = UIImageView(image: image)
    imageView.frame = CGRect(
        origin: CGPoint(x: 0, y: 0),
        size: size);
    imageView.contentMode = UIViewContentMode.ScaleToFill;

    // Add the image view to scroll view
    scrollView.addSubview(imageView)
    scrollView.contentSize = size;

【参考方案3】：

您的问题是由于您将元素添加到故事板中的滚动视图而引起的。

在故事板中你需要：

1）添加scrollView，如果你需要在屏幕的宽度，那么将它的尾随和前导空格设置为superView为0

2）取消选中属性检查器中的“允许水平滚动”

在您的代码中

1) 将scrollView's contentSize 设置为您想要的大小。

1.1) 在您的代码中，您需要像这样设置 contentView 的大小

scroller.contentSize = CGSizeMake(your width, your height);

这是很重要的一步，不设置大小scrollView将无法滚动。将 scrollView 视为窗口，将 contentView 视为视图。如果 contentView 与 scrollView 大小相同，则 scrollView 不能在任何地方滚动（所有 contentView 都适合 scrollView）以创建滚动，您需要使 contentView 大于 scrollView 本身

2) 开始将您的元素添加到 scrollView's contentView 通过调用

[scroller addSubView:<your view>];

这会将您的观点添加到 scrollView's contentView 并将是

【讨论】：

感谢您的回答。我完全按照您在答案中详述的方式实现了它。但它不是垂直滚动。我也应该将视图拖到故事板中的滚动视图中吗？ i.imgur.com/XK5cYdH.png

你的 contentView 的大小是多少？

contentView 固定到 scrollView（所有 4 个约束）

谢谢，但我怎样才能使 contentView 宽度成为设备的宽度。并且代码 cgrectmake 会产生错误。我最终使用了 cgsizemake，但宽度仍在扩大。

@James 首先你是对的，我对 CGRectMake 感到困惑，你需要使用 CGSizeMake。如果您想要设备的宽度，并且您正确放置了自动布局，请调用 CGSizeMake(scroll.bounds.size.width, your height)