Question

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

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

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

如何制作此可滚动

Answer 1

在IB /故事板中逐步设置......

添加视图 - 高度50前导/上/后 - 蓝色背景

将滚动视图添加到该视图 - 引脚前导/顶部/尾部/底部为0 - 将scrollview背景设置为黄色，以便我们可以看到它在哪里

向滚动视图添加按钮

复制它，所以你有12个按钮

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

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

结果在模拟器中运行（根本没有代码）：

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

Answer 2

所以你想要这个：

以下是我在Xcode 8.3.3中的表现。

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

结果文件大纲：

Answer 3

如果你使Stackview宽度等于滚动视图宽度，那么你将获得所有这些，当然它不会滚动。

不要给你的Stackview一个宽度限制......让按钮＆＃34;填写它＆＃34;。

编辑：这是一个可以直接在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

将Stackview添加到UIScrollView

3 个答案: