i am new to IOS and UIKit, so I wanted to create something like this

so there's a white box under the buttons, if we are using swiftUI logic, it's vertical padding : 5 and horizontal padding : 10, to create it with swiftUI is pretty easy but from what I have learned, there are no padding and background color to a UIStackView and to create something like this, you need a UIView then add the stackview on top of the UIView.

This is what I have done so far

//
//  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 */

tHE RESULT :

as you can see, the width and height of the UIView is not relative to it childview

The question is, how do I emulate the same padding horizontal 10 and vertical 5 in UIView? Thanks.

basically a progressive or responsive width and height of a UIView

CodePudding user response：

Since you have mentioned that you used constraints, see the following code. It reflect a UIViewController with what you need:

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),
        ])
    }
}

This will output: