将 Stackview 添加到 UIScrollView

Question

我有一个UIScrollView。它有一个堆栈视图。这个堆栈视图包含 12 个按钮。 （水平滚动视图）

Stackview 约束：- 滚动视图的顶部、前导、尾随、底部以及与滚动视图相等的宽度。

我的问题是每次运行时，堆栈视图宽度限制为滚动视图宽度，并且按钮根据堆栈视图的宽度太小，并且我的滚动视图不可滚动。

如何使这个可滚动

Answer 1

如果你让 Stackview 的宽度等于滚动视图的宽度，那么这就是你所得到的，当然它不会滚动。

不要给你的 Stackview 一个宽度限制...让按钮“填满”。

---

编辑：这是一个可以直接在 Playground 页面中运行的简单示例：

import UIKit
import PlaygroundSupport

class TestViewController : UIViewController {

    let scrollView: UIScrollView = {
        let v = UIScrollView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .cyan
        return v
    }()

    let stackView : UIStackView = {
        let v = UIStackView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.axis = .horizontal
        v.distribution = .equalSpacing
        v.spacing = 10.0
        return v
    }()


    override func viewDidLoad() {
        super.viewDidLoad()

        // add the scroll view to self.view
        self.view.addSubview(scrollView)

        // constrain the scroll view to 8-pts on each side
        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 8.0).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -8.0).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -8.0).isActive = true


        // add the stack view to the scroll view 
        scrollView.addSubview(stackView)

        // constrain the stackview view to 8-pts on each side
        //   this *also* controls the .contentSize of the scrollview
        stackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 8.0).isActive = true
        stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 8.0).isActive = true
        stackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -8.0).isActive = true
        stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -8.0).isActive = true

        // add ten buttons to the stack view
        for i in 1...10 {

            let b = UIButton()
            b.translatesAutoresizingMaskIntoConstraints = false
            b.setTitle("Button \(i)", for: .normal)
            b.backgroundColor = .blue
            stackView.addArrangedSubview(b)

        }

    }

}

let vc = TestViewController()
vc.view.backgroundColor = .yellow
PlaygroundPage.current.liveView = vc

Answer 2

在 IB/Storyboards 中进行设置的分步...

1. 添加视图 - 高度为 50 的前导/顶部/尾部 - 蓝色背景

1. 向该视图添加一个滚动视图 - 将前导/顶部/尾随/底部固定为 0 - 将滚动视图背景设置为黄色，以便我们可以看到它在哪里

1. 向滚动视图添加一个按钮

4. 复制它，这样你就有 12 个按钮

5. 将它们分组到一个堆栈视图中，并将堆栈视图的约束设置为 0 前导/顶部/尾随/底部

6. 并将堆栈视图的分布设置为“等间距”

1. 在模拟器中运行的结果（完全没有代码）：

按钮左右滚动....contentSize没有代码设置...

Answer 3

所以你想要这个：

这是我在 Xcode 8.3.3 中的做法。

1. 新建项目 > iOS > 单视图应用程序。

2. 打开 Main.storyboard。

3. 将滚动视图拖到场景中。

4. 将滚动视图的顶部、前导和尾部固定为 0。将高度设置为 30。

5. 将水平堆栈视图拖到滚动视图中。

6. 将堆栈视图的所有四个边缘固定为 0。

7. 将堆栈视图间距设置为 4。

8. 将十二个按钮拖到堆栈视图中。

9. 将目标设备设置为 iPhone SE。

10. 构建并运行。

生成的文档大纲：