ViewController Layout Help Needed - ios

Question

I'm using XCode to build a UI for a countdown timer/metronome app. After struggling with layout constraints, I discovered vertical and horizontal stack views, which I thought would make things much easier.
However, the outermost stackview's boundaries appear to be outside the view of the device. I removed all the layout constraints, but that didn't make any difference.
Here's a partial screenshot of the project in XCode:
StackView boundaries
Sorry if this question has been asked before - I looked but haven't found anything.
I'm a professional software developer for the last 30 years or so. The languages I work with on a daily basis for the last 20 years or so are Java, C++, and Fortran. So dealing with UI layout in IOS is frustrating, to say the least!
Thanks in advance for any help!
Edit: Here's a screenshot of the uppermost stack view's size inspector: size inspector

Answer 1

I know your frustration well because it was mine too when I start, and I decided to give you a hand. Make all UI programmatically like this:
in your Controller class built your objects programmatically:
let buttonPlay: UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = UIColor.yourColor
let image = UIImage(systemName: "play.fill")
button.setImage(image, for: .normal)
button.tintColor = .black
button.heightAnchor.constraint(equalToConstant: 50).isActive = true
button.layer.cornerRadius = 25
button.clipsToBounds = true
return button
}()
let buttonPause: UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = UIColor.yourColor
let image = UIImage(systemName: "pause.fill")
button.setImage(image, for: .normal)
button.tintColor = .black
button.heightAnchor.constraint(equalToConstant: 50).isActive = true
button.layer.cornerRadius = 25
button.clipsToBounds = true
return button
}()
let buttonStop: UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = UIColor.yourColor
let image = UIImage(systemName: "stop.fill")
button.setImage(image, for: .normal)
button.tintColor = .black
button.heightAnchor.constraint(equalToConstant: 50).isActive = true
button.layer.cornerRadius = 25
button.clipsToBounds = true
return button
}()
let minutesLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .white
label.text = "MM"
label.textColor = .gray
label.textAlignment = .center
label.font = .systemFont(ofSize: 20, weight: .semibold)
return label
}()
let secondsLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .white
label.text = "SS"
label.textColor = .gray
label.textAlignment = .center
label.font = .systemFont(ofSize: 20, weight: .semibold)
return label
}()
let separatorLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .clear
label.text = ":"
label.textColor = .black
label.textAlignment = .center
label.font = .systemFont(ofSize: 20, weight: .semibold)
return label
}()
let titleLabel: UILabel = {
let label = UILabel()
label.backgroundColor = UIColor.yourColor
label.text = "Title label"
label.textColor = .black
label.textAlignment = .center
label.font = .systemFont(ofSize: 20, weight: .semibold)
label.translatesAutoresizingMaskIntoConstraints = false // this distactive automatic constraints
return label
}()
let timeLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .clear
label.text = "Tempo:"
label.textColor = .black
label.font = .systemFont(ofSize: 20, weight: .regular)
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
let imageViewTime: UIImageView = {
let image = UIImage(named: "yourImage")?.withRenderingMode(.alwaysTemplate)
let imageView = UIImageView(image: image)
imageView.tintColor = .white
imageView.backgroundColor = .purple
imageView.contentMode = .scaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
}()
let slider: UISlider = {
let s = UISlider()
s.maximumValue = 0
s.maximumValue = 100
s.isContinuous = true
s.tintColor = .black
s.addTarget(self, action: #selector(sliderInAction), for: .valueChanged) // call the function below to show slider value
s.translatesAutoresizingMaskIntoConstraints = false
return s
}()
let sliderLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .clear
label.text = "2"
label.textAlignment = .center
label.textColor = .black
label.font = .systemFont(ofSize: 16, weight: .regular)
label.widthAnchor.constraint(equalToConstant: 30).isActive = true
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
let containerSlider: UIView = {
let v = UIView()
v.backgroundColor = UIColor.yourColor
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
In viewDidLoad set your background color and call the function to setup the programmatically constraints:
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.yourColor
setupConstraints()
}
now set the constraints with autolayout:
fileprivate func setupConstraints() {
let stackViewTime = UIStackView(arrangedSubviews: [minutesLabel, separatorLabel, secondsLabel])
stackViewTime.distribution = .fillProportionally
stackViewTime.spacing = 4
stackViewTime.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackViewTime)
stackViewTime.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10).isActive = true
stackViewTime.heightAnchor.constraint(equalToConstant: 50).isActive = true
stackViewTime.widthAnchor.constraint(equalToConstant: 148).isActive = true
stackViewTime.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
let stackViewPlayer = UIStackView(arrangedSubviews: [buttonPlay, buttonPause, buttonStop])
stackViewPlayer.distribution = .fillEqually
stackViewPlayer.spacing = 10
stackViewPlayer.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackViewPlayer)
stackViewPlayer.widthAnchor.constraint(equalToConstant: 170).isActive = true
stackViewPlayer.heightAnchor.constraint(equalToConstant: 50).isActive = true
stackViewPlayer.centerXAnchor.constraint(equalTo: stackViewTime.centerXAnchor).isActive = true
stackViewPlayer.topAnchor.constraint(equalTo: stackViewTime.bottomAnchor, constant: 20).isActive = true
view.addSubview(imageViewTime)
imageViewTime.topAnchor.constraint(equalTo: stackViewPlayer.bottomAnchor, constant: 20).isActive = true
imageViewTime.heightAnchor.constraint(equalToConstant: 80).isActive = true
imageViewTime.widthAnchor.constraint(equalToConstant: 60).isActive = true
imageViewTime.centerXAnchor.constraint(equalTo: stackViewTime.centerXAnchor).isActive = true
view.addSubview(titleLabel)
titleLabel.topAnchor.constraint(equalTo: imageViewTime.bottomAnchor, constant: 20).isActive = true
titleLabel.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 30).isActive = true
titleLabel.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -30).isActive = true
titleLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
view.addSubview(timeLabel)
timeLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 10).isActive = true
timeLabel.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
timeLabel.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
timeLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
let stackSlider = UIStackView(arrangedSubviews: [sliderLabel, slider])
stackSlider.distribution = .fill
stackSlider.spacing = 10
stackSlider.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(containerSlider)
containerSlider.topAnchor.constraint(equalTo: timeLabel.bottomAnchor, constant: 0).isActive = true
containerSlider.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
containerSlider.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
containerSlider.heightAnchor.constraint(equalToConstant: 30).isActive = true
containerSlider.addSubview(stackSlider)
stackSlider.topAnchor.constraint(equalTo: containerSlider.topAnchor).isActive = true
stackSlider.bottomAnchor.constraint(equalTo: containerSlider.bottomAnchor).isActive = true
stackSlider.leadingAnchor.constraint(equalTo: containerSlider.leadingAnchor, constant: 10).isActive = true
stackSlider.trailingAnchor.constraint(equalTo: containerSlider.trailingAnchor, constant: -10).isActive = true
}
the last step set the function to show the slider value in your slider label when you move it:
#objc fileprivate func sliderInAction() {
sliderLabel.text = "\(Int(slider.value))"
}
This is the result:
Play with this code, an experienced developer like you should take a short time to write the code.