将 Stackview 添加到 UIScrollView

Question

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

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

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

如何使这个可滚动

Answer 1

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

不要给 Stackview 设置宽度限制...让按钮 "fill it out"。

编辑：这是一个简单的示例，您可以直接在 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 中进行设置的分步...

添加视图 - 高度 50 leading/top/trailing - 蓝色背景

向该视图添加一个滚动视图 - 将 leading/top/trailing/bottom 固定为 0 - 将滚动视图背景设置为黄色以便我们可以看到它的位置

向滚动视图添加一个按钮

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

将它们分组到堆栈视图中，并将堆栈视图的约束设置为 0 leading/top/trailing/bottom

并将堆栈视图的分布设置为"equal spacing"

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

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

Answer 3

所以你想要这个：

这是我在 Xcode 8.3.3.

中的做法

新建项目 > iOS > 单视图应用程序。
打开Main.storyboard.
将滚动视图拖到场景中。
将滚动视图的顶部、前导和尾部固定为 0。将高度设置为 30。
将水平堆栈视图拖到滚动视图中。
将堆栈视图的所有四个边固定为 0。
将堆栈视图间距设置为 4。
将十二个按钮拖到堆栈视图中。
将目标设备设置为iPhone SE。
构建 & 运行.

生成的文档大纲：

将 Stackview 添加到 UIScrollView

Adding Stackview to UIScrollView

uiscrollview

ios

autolayout

swift

uistackview