how to make three views the same size and resized depending on the container view?

Question

I have three views on the bottom of the view. I'm trying to make them have the same size and the size can be resized automatically depending on the size of the container view. I'd like to do it programmatically.

Here's how I want them to look

Here's how it looks by my current code

import UIKit

class ViewController: UIViewController {

var view1 = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
var view2 = UIView(frame: CGRect(x: 300, y: 300, width: 50, height: 50))
var view3 = UIView(frame: CGRect(x: 400, y: 500, width: 70, height: 70))
override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(view1)
    view.addSubview(view2)
    view.addSubview(view3)
    
    view1.backgroundColor = .orange
    view2.backgroundColor = .black
    view3.backgroundColor = .gray
    
    view1.translatesAutoresizingMaskIntoConstraints = false
    view2.translatesAutoresizingMaskIntoConstraints = false
    view3.translatesAutoresizingMaskIntoConstraints = false
    
   // view1.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
    view1.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
    view1.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: -10).isActive = true
    view1.widthAnchor.constraint(equalTo: view.widthAnchor, constant: view.frame.size.width*0.01).isActive = true
    view2.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1).isActive = true
    
    
    //view2.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
    view2.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
    view2.leadingAnchor.constraint(equalTo: view1.leadingAnchor, constant: view.frame.size.width*(2/3)).isActive = true
    view2.widthAnchor.constraint(equalTo: view1.widthAnchor, constant: 0).isActive = true
    view2.heightAnchor.constraint(equalTo: view1.heightAnchor, constant: 0).isActive = true
    
  //  view3.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
    view3.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
    view3.leadingAnchor.constraint(equalTo: view2.leadingAnchor, constant: 10).isActive = true
    view3.widthAnchor.constraint(equalTo: view2.widthAnchor, constant: 0).isActive = true
    view3.heightAnchor.constraint(equalTo: view2.heightAnchor, constant: 0).isActive = true
           

    

}

}

Answer 1

Here, you can use the concept of UIStackView. Here, you can get your desired output using the following code(sample demo)

import UIKit

class ViewController: UIViewController {

    var view1 = UIView()
    var view2 = UIView()
    var view3 = UIView()
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
        let stackView = UIStackView(arrangedSubviews: [view1, view2, view3])
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually
        stackView.spacing = 50 //add amount of space between your views
        view.addSubview(stackView)
        
        view1.backgroundColor = .orange
        view2.backgroundColor = .black
        view3.backgroundColor = .gray
        
        stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
        stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
        stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
        stackView.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1).isActive = true
        

    }

}

For more about UIStackView with example check this: https://nshipster.com/uistackview

Output:

Answer 2

Welcome to Stackoverflow. Please read on UIStackView. And by using that stackView, you can easily achieve what you want to achieve in your screenshot.

---

import UIKit

class ViewController: UIViewController {
  
  var view1 = UIView()
  var view2 = UIView()
  var view3 = UIView()
  
  lazy var stackView: UIStackView = {
    return UIStackView(arrangedSubviews: [
      self.view1,
      self.view2,
      self.view3
    ])
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.addSubview(stackView)
    
    view1.backgroundColor = .orange
    view2.backgroundColor = .black
    view3.backgroundColor = .gray
    
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .horizontal
    stackView.distribution = .equalSpacing
    stackView.alignment = .center
    
    view1.translatesAutoresizingMaskIntoConstraints = false
    view2.translatesAutoresizingMaskIntoConstraints = false
    view3.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
      self.stackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 16),
      self.stackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -16),
      self.stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -16),
      self.view1.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
      self.view1.widthAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
      self.view2.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
      self.view2.widthAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
      self.view3.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
      self.view3.widthAnchor.constraint(equalToConstant: view.frame.size.height*0.1)
    ])
  }
}

---

RESULT: