Scrollview中的两个动态Stackview

时间:2018-09-15 23:38:02

标签: ios swift autolayout uistackview

这是我视图的层次结构

ScrollView
 -> View
    -> Stackview1
       -> view1
       -> view2
       .
       .
       .
    -> Stackview1
       -> view1
       -> view2
       .
       .
       .

所以在这里,我的stackview的高度是根据.swift文件上添加的视图动态生成的。

如果我对超级视图赋予底部约束,则它仅适用于单个stackview,但如果我同时使用两个stackview,则不考虑第二个stackview。

1 个答案:

答案 0 :(得分:3)

很难说出问题所在,因为您还没有发布约束,但是解决方案非常简单:

您需要以下约束:

ScrollView:

  • topAnchorview.topAnchor
  • leadingAnchorview.leadingAnchor
  • trailingAnchorview.trailingAnchor
  • bottomAnchorview.bottomAnchor

包装2个UIStackViews的UIView:

  • topAnchorscrollView.topAnchor
  • leadingAnchorscrollView.leadingAnchor
  • trailingAnchorscrollView.trailingAnchor
  • bottomAnchorscrollView.bottomAnchor

上部StackView:

  • topAnchorwrapperView.topAnchor
  • leadingAnchorwrapperView.leadingAnchor
  • trailingAnchorwrapperView.trailingAnchor
  • widthAnchorscrollView.widthAnchor(以定义ScrollView的contentSize的宽度)

降低StackView:

  • topAnchorupperStackView.bottomAnchor
  • leadingAnchorwrapperView.leadingAnchor
  • trailingAnchorwrapperView.trailingAnchor
  • bottomAnchorwrapperView.bottomAnchor

现在,当您将UIView添加到UIStackViews之一时,UIScrollView会自动更新。

这是一个有效的示例:(我添加了两个UIButtons,为两个UIViews添加了更多UIStackViews

class ViewController: UIViewController {

    let upperStackView = UIStackView()
    let lowerStackView = UIStackView()

    override func viewDidLoad() {
        super.viewDidLoad()

        let scrollView = UIScrollView()
        view.addSubview(scrollView)
        scrollView.backgroundColor = .white
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        ])

        let wrapperView = UIView()
        scrollView.addSubview(wrapperView)
        wrapperView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            wrapperView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            wrapperView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            wrapperView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            wrapperView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
        ])

        upperStackView.axis = .vertical
        upperStackView.distribution = .equalSpacing
        upperStackView.alignment = .fill
        wrapperView.addSubview(upperStackView)
        upperStackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            upperStackView.topAnchor.constraint(equalTo: wrapperView.topAnchor),
            upperStackView.leadingAnchor.constraint(equalTo: wrapperView.leadingAnchor),
            upperStackView.trailingAnchor.constraint(equalTo: wrapperView.trailingAnchor),
            upperStackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
            ])

        lowerStackView.axis = .vertical
        lowerStackView.distribution = .equalSpacing
        lowerStackView.alignment = .fill
        wrapperView.addSubview(lowerStackView)
        lowerStackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            lowerStackView.topAnchor.constraint(equalTo: upperStackView.bottomAnchor),
            lowerStackView.leadingAnchor.constraint(equalTo: wrapperView.leadingAnchor),
            lowerStackView.trailingAnchor.constraint(equalTo: wrapperView.trailingAnchor),
            lowerStackView.bottomAnchor.constraint(equalTo: wrapperView.bottomAnchor)
            ])

        for _ in 0...3 {
            addView(to: upperStackView)
            addView(to: lowerStackView)
        }

        let lowerButton = UIButton(type: .system)
        lowerButton.setTitle("Add to lower StackView", for: .normal)
        lowerButton.backgroundColor = .white
        lowerButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(lowerButton)
        NSLayoutConstraint.activate([
            lowerButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -60),
            lowerButton.widthAnchor.constraint(equalToConstant: 240),
            lowerButton.heightAnchor.constraint(equalToConstant: 44),
            lowerButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
        lowerButton.addTarget(self, action: #selector(addViewToLowerStackView), for: .touchUpInside)

        let upperButton = UIButton(type: .system)
        upperButton.setTitle("Add to upper StackView", for: .normal)
        upperButton.backgroundColor = .white
        upperButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(upperButton)
        NSLayoutConstraint.activate([
            upperButton.bottomAnchor.constraint(equalTo: lowerButton.topAnchor, constant: -20),
            upperButton.widthAnchor.constraint(equalToConstant: 240),
            upperButton.heightAnchor.constraint(equalToConstant: 44),
            upperButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
            ])
        upperButton.addTarget(self, action: #selector(addViewToUpperStackView), for: .touchUpInside)
    }

    func addView(to stackView: UIStackView) {
        let view = UIView()
        view.backgroundColor = stackView == upperStackView ? .blue : .green
        view.alpha = CGFloat(stackView.arrangedSubviews.count + 1) * 0.1
        view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([view.heightAnchor.constraint(equalToConstant: 120)])
        stackView.addArrangedSubview(view)
    }

    @objc func addViewToUpperStackView() {
        addView(to: upperStackView)
    }

    @objc func addViewToLowerStackView() {
        addView(to: lowerStackView)
    }
}

更新:

您还可以仅使用情节提要进行这项工作:

enter image description here

相关问题