如何在ScrollView中水平放置多个UIView？

TheMFA 发表于 Dev

外交部

我有一个滚动视图被约束拉伸到全屏。我正在尝试使其 4 个 UIView 一个接一个地水平排列。

func createSubViews() {
    let colors: [UIColor] = [.systemRed, .systemGreen, .systemYellow, .systemBlue]
    for index in 0...3 {
        let page = UIView()
        page.backgroundColor = colors[index]
        pages.append(page)
        scrollView.addSubview(page)
        setupConstraints(index: index)
    }
}

func setupConstraints(index: Int) {
    pages[index].translatesAutoresizingMaskIntoConstraints = false

    var constraints = [
        pages[index].topAnchor.constraint(equalTo: scrollView.topAnchor),
        pages[index].bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
        pages[index].widthAnchor.constraint(equalToConstant: width/4)
    ]
    if index == 0 {
        constraints.append(
            pages[index].leadingAnchor.constraint(equalTo: scrollView.leadingAnchor)
        )
    } else {
        constraints.append(
            pages[index].leadingAnchor.constraint(equalTo: pages[index - 1].trailingAnchor)
        )
    }
    NSLayoutConstraint.activate(constraints)
}

为什么它不起作用？

穆罕默德·阿博阿拉布

不要直接将视图添加到scrollView

将水平堆栈视图添加到滚动视图
使stackView的（前导顶部底部）等于scrollView（前导顶部底部）
使stackView的高度等于scrollView的高度
将您的子视图作为 ArrangedSubviews 添加到 stackView

@IBOutlet weak var stackView: UIStackView!
var pages: [UIView] = []
    
func createSubViews() {
    let colors: [UIColor] = [.systemRed, .systemGreen, .systemYellow, .systemBlue, .systemGreen, .systemBlue, .systemYellow]
    let width = UIScreen.main.bounds.width
    for index in 0 ..< colors.count {
        let page = UIView()
        page.translatesAutoresizingMaskIntoConstraints = false
        pages[index].widthAnchor.constraint(equalToConstant: width/4).isActive = true
        page.backgroundColor = colors[index]
        pages.append(page)
        stackView.addArrangedSubview(page)
    }
}