以编程方式根据子视图调整 UIView 的宽度和高度

Question

我想创建这样的东西：

按钮下方有一个白色框。如果我们使用 SwiftUI 逻辑，它是垂直填充：5 和水平填充：10，使用 SwiftUI 创建它非常容易，但据我所知，UIStackView 没有填充和背景颜色，并且创建这样的东西，您需要一个 UIView，然后在 UIView 顶部添加堆栈视图。

这是我到目前为止所做的：

//
//  TransaksiViewController.swift
//  HaselWiratama
//
//  Created by Farhandika on 18/09/21.
//  Copyright © 2021 Hasel.id. All rights reserved.
//

import UIKit

class TransaksiViewController: UIViewController {
    
    let pesanButton: BigButton = {
        let button = BigButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.backgroundColor = .blue
        button.configure(viewModel: MyCustomBigButton(title: "Phone",
                                                      imageName: "house", isSystemImage: false))
        return button
    }()
    
    let ambulanceButton: BigButton = {
        let button = BigButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.backgroundColor = .blue
        button.configure(viewModel: MyCustomBigButton(title: "Phone",
                                                      imageName: "house", isSystemImage: false))
        return button
    }()
    
    let topStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.distribution = .fillEqually
        stackView.spacing = 10
        return stackView
    }()
    
    let uiView = UIView()
    
    func configureUIView() {
        //Configure the stackview
        topStackView.addArrangedSubview(pesanButton)
        topStackView.addArrangedSubview(ambulanceButton)
        // add stack to UIView
        uiView.addSubview(topStackView)
        NSLayoutConstraint.activate([
            topStackView.heightAnchor.constraint(equalToConstant: 150),
            topStackView.centerYAnchor.constraint(equalTo: uiView.centerYAnchor),
            topStackView.centerXAnchor.constraint(equalTo: uiView.centerXAnchor)
        ])
        uiView.translatesAutoresizingMaskIntoConstraints = false
        uiView.backgroundColor = .purple
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor  = .cyan
        view.addSubview(uiView)
        configureUIView()
        NSLayoutConstraint.activate([
            uiView.widthAnchor.constraint(equalToConstant: 500),
            uiView.heightAnchor.constraint(equalToConstant: 400),
            uiView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            uiView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }

}
/* Ignore the button width and height because I have not add the constraint yet */

结果：

如您所见，UIView 的宽度和高度与其子视图无关。

如何在 UIView 中模拟相同的填充水平 10 和垂直 5？

（基本上是 UIView 的渐进式或响应式宽度和高度。）

Answer 1

既然你提到你使用了约束，请看下面的代码。它反映了您需要的 UIViewController：

class ViewController: UIViewController {

    // Horizontal Stackview
    lazy var stack: UIStackView = {
        let view = UIStackView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.axis = .horizontal
        view.spacing = 10 // Inter-item space
        view.backgroundColor = .white
        view.distribution = .fillEqually // Setting distribution to fill equally
        return view
    }()

    // Button 1
    lazy var button1: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Button 1", for: .normal)
        button.backgroundColor = .red
        return button
    }()

    // Button 2
    lazy var button2: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Button 2", for: .normal)
        button.backgroundColor = .blue
        return button
    }()

    // View that holds the stackview
    lazy var stackHolder: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .white
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .gray

        view.addSubview(stackHolder)
        stackHolder.addSubview(stack)
        stack.addArrangedSubview(button1)
        stack.addArrangedSubview(button2)

        //Setting layout constraints
        NSLayoutConstraint.activate([
            stackHolder.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stackHolder.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            // Setting a width and height of the stack so that the `stackHolder` adjust relatively
            stack.widthAnchor.constraint(equalToConstant: 250),
            stack.heightAnchor.constraint(equalToConstant: 80),

            // Setting the constraints with `constant` values for padding
            stack.leadingAnchor.constraint(equalTo: stackHolder.leadingAnchor, constant: 5),
            stack.trailingAnchor.constraint(equalTo: stackHolder.trailingAnchor, constant: -5),
            stack.topAnchor.constraint(equalTo: stackHolder.topAnchor, constant: 10),
            stack.bottomAnchor.constraint(equalTo: stackHolder.bottomAnchor, constant: -10),
        ])
    }
}

这将输出：