如何在 `UIStackView` 中排列视图？

Posted 2023-03-15

【中文标题】如何在 `UIStackView` 中排列视图？

【英文标题】：How to arrange views in the `UIStackView`?

【发布时间】：2018-01-09 16:37:24

【问题描述】：

我想在水平方向的UIStackView 中设置四个视图。四个视图旁边没有空格。

我的代码：

let arrangeStackView = UIStackView()
let followUpActionView = UIView()
let developCurriculumView = UIView()
let moreMoreView = UIView()
let takeCareSalonView = UIView()

override func viewDidLoad() 
    super.viewDidLoad()

    view.addSubview(arrangeStackView)

    developCurriculumView.translatesAutoresizingMaskIntoConstraints = false;
    followUpActionView.translatesAutoresizingMaskIntoConstraints = false;
    takeCareSalonView.translatesAutoresizingMaskIntoConstraints = false;
    moreMoreView.translatesAutoresizingMaskIntoConstraints = false;

    developCurriculumView.backgroundColor = UIColor(red: CGFloat(arc4random()%256)/255.0, green: CGFloat(arc4random()%256)/255.0, blue: CGFloat(arc4random()%256)/255.0, alpha: 1)
    followUpActionView.backgroundColor = UIColor(red: CGFloat(arc4random()%256)/255.0, green: CGFloat(arc4random()%256)/255.0, blue: CGFloat(arc4random()%256)/255.0, alpha: 1)
    takeCareSalonView.backgroundColor = UIColor(red: CGFloat(arc4random()%256)/255.0, green: CGFloat(arc4random()%256)/255.0, blue: CGFloat(arc4random()%256)/255.0, alpha: 1)
    moreMoreView.backgroundColor = UIColor(red: CGFloat(arc4random()%256)/255.0, green: CGFloat(arc4random()%256)/255.0, blue: CGFloat(arc4random()%256)/255.0, alpha: 1)


    arrangeStackView.axis = .horizontal
    arrangeStackView.distribution = .fillEqually

    arrangeStackView.spacing = 10
    arrangeStackView.alignment = .fill

    arrangeStackView.translatesAutoresizingMaskIntoConstraints = false
    arrangeStackView.addSubview(followUpActionView)
    arrangeStackView.addSubview(developCurriculumView)
    arrangeStackView.addSubview(moreMoreView)
    arrangeStackView.addSubview(takeCareSalonView)


    arrangeStackView.snp.makeConstraints  (make) in
        make.center.equalToSuperview()
        make.height.equalTo(95)
        make.width.equalToSuperview()
    

    let yaIconWith = self.view.frame.width * 0.25

    followUpActionView.snp.makeConstraints(make) -> Void in
        make.height.equalToSuperview()
        make.width.equalTo(yaIconWith)
    
    takeCareSalonView.snp.makeConstraints(make) -> Void in
        make.height.equalToSuperview()
        make.width.equalTo(yaIconWith)
    
    moreMoreView.snp.makeConstraints(make) -> Void in
        make.height.equalToSuperview()
        make.width.equalTo(yaIconWith)
    
    developCurriculumView.snp.makeConstraints(make) -> Void in
        make.height.equalToSuperview()
        make.width.equalTo(yaIconWith)
    

现在，我看结果如下。

为什么四个视图位于屏幕的左上角？

【参考方案1】：

一个 UIStackView 只分发它的 arrangedSubViews 而不是它的常规 subViews。使用 addArrangedSubview 而不是 addSubView。

【参考方案2】：

您将每个视图作为子视图添加到堆栈视图，而不是将每个视图添加为排列的子视图。虽然它们听起来很相似，但只有排列好的子视图是根据堆栈视图的属性布局的。

所以你将改变这些行：

arrangeStackView.addSubview(followUpActionView)
arrangeStackView.addSubview(developCurriculumView)
arrangeStackView.addSubview(moreMoreView)
arrangeStackView.addSubview(takeCareSalonView)

到这里：

arrangeStackView.addArrangedSubview(followUpActionView)
arrangeStackView.addArrangedSubview(developCurriculumView)
arrangeStackView.addArrangedSubview(moreMoreView)
arrangeStackView.addArrangedSubview(takeCareSalonView)

如果您需要特殊安排，或者如果您需要在某些地方添加不同时间的视图，insertArrangedSubview(_:at:) 是addArrangedSubview(_:) 的替代品