How to programmatically add constraints to a stackView-CodePudding

I programmatically created a stackView with a UISegmentedControl and a Map with a MKMapView. I am using CGRect to size and place the frame of the stackView in the interface but when I switch the device simulator the stackView moves since it does not have any constraints. I usually use the StoryBoard to add constraints to anything but have never programmatically done it my self. I have seen other examples here in Stack Overflow but so far It doesn't help with what it is that I am trying to do. Here is my code showing how I am displaying it in the viewDidLoad(). If someone could explain how to add constraints programmatically so that the stackView covers 1/4 of the screen Y axis:547 please and thank you.

import UIKit
import MapKit

class SampleViewController: UIViewController {


override func viewDidLoad() {
    super.viewDidLoad()
    
    let paddedStackView = UIStackView(arrangedSubviews: [segmentedControl])
    paddedStackView.layoutMargins = .init(top: 12, left: 12, bottom: 6, right: 12)
    paddedStackView.isLayoutMarginsRelativeArrangement = true
    
    let stackView = UIStackView(arrangedSubviews: [
        paddedStackView, map
        ])
    stackView.axis = .vertical
    view.addSubview(stackView)
    
    stackView.frame =  CGRect(x: 0, y: 547, width: 390, height: 350)

}

let map = MKMapView()

let segmentedControl:UISegmentedControl = {
    let sc = UISegmentedControl(items: ["Arriving", "Leaving"])
    sc.selectedSegmentIndex = 0
    sc.addTarget(self, action: #selector(handleSegmentControl), for: .valueChanged)
    return sc
}()

  @objc func handleSegmentControl(){
    
    switch segmentedControl.selectedSegmentIndex {
    case 0:
        print("Entered Destination")
    case 1:
        print("Exited Destination")
    default:
        print("Error")
    }

}

CodePudding user response：

If your question is how to convert this:

stackView.frame =  CGRect(x: 0, y: 547, width: 390, height: 350)

and make the height 1/4 of the screen instead of 350

Converting this request into auto layout constraints would go something like this

let stackView = UIStackView(arrangedSubviews: [paddedStackView, map])
stackView.axis = .vertical

// This is important for using auto layout
// Setting this to false means the frame is ignored 
// So sizing and positioning should be set by NSLayoutConstraints
stackView.translatesAutoresizingMaskIntoConstraints = false

// Add the view to its parent before adding any constraints
view.addSubview(stackView)

// Add constraints with top anchor of 200
view.addConstraints([
    // this is x origin
    stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    
    // this is y origin
    stackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 547),
    
    // this is the width
    stackView.widthAnchor.constraint(equalToConstant: 390),
    
    // this is height, thanks to @flanker for this update
    stackView.widthAnchor.constraint(equalTo: view.heightAnchor,
                                     multiplier: 0.75)
])

This should give you what you are looking for.

With that being said, you probably want to check out this SO thread as there are different ways to add auto layout constraints programmatically so see which way you prefer

CodePudding user response：

    //MARK: UIStackView
    
    let stackview = UIStackView()
    stackview.axis = .vertical
    stackview.spacing = 2
    stackview.distribution = .fill
    
    //MARK: Stackview Elements
    let view_left = UIView()
    let view_right = UIView()
    
    //MARK: initial added View
    stackview.addArrangedSubview(view_left)
    stackview.addArrangedSubview(view_right)
    
    //MARK: remove Run time stack elements
    
    for view in stackview.subviews {
        view.removeFromSuperview()
    }
    
   //MARK: Again assign values Run time
    
    stackview.insertArrangedSubview(view_right, at: 0)
    stackview.insertArrangedSubview(view_left, at: 1)

[img 1

CodePudding user response：

Hey