UIStackView not changing the width

I have a UIStackView with UIImageViews that might be from 1 to 5. Each UIImageView has an image coming from an array (from previously downloaded and cached images) and I'd like to keep the UIImageViews stay in a perfect circle. I change the width constant of the UIStackView along with the spacing between the images in a way to overlap if there are more than 3 images.

UIStackView

UIImageViews

UIImageView

UIImageView

width

UIStackView

I had writen this code in a previous project and it works perfectly fine, but for some reason, when I call the changeNavStackWidth function to change the width of the UIStackView, the width is not being updated and I have no clue why.

changeNavStackWidth

width

UIStackView

var userImages = [String]()

var navStackView : UIStackView =
let stack = UIStackView()
stack.axis = .horizontal
stack.alignment = .fill
stack.distribution = .fillEqually
stack.translatesAutoresizingMaskIntoConstraints = false
return stack
()
override func viewDidLoad()
super.viewDidLoad()
setupNavStack()
navBarStackTapGesture()


func setupNavStack()
guard let navController = navigationController else return

navController.navigationBar.addSubview(navStackView)
// x, y, w, h
navStackView.widthAnchor.constraint(equalToConstant: 95).isActive = true
navStackView.centerYAnchor.constraint(equalTo: navController.navigationBar.centerYAnchor).isActive = true
navStackView.heightAnchor.constraint(equalToConstant: 35).isActive = true
navStackView.centerXAnchor.constraint(equalTo: navController.navigationBar.centerXAnchor).isActive = true



func setNavBarImages()

for image in userImages
let imageView = UIImageView()
// imageView.image = UIImage(named: image)

let photoURL = URL(string: image)
imageView.sd_setImage(with: photoURL)

imageView.layer.borderColor = UIColor.white.cgColor
imageView.layer.borderWidth = 1
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true

navStackView.addArrangedSubview(imageView)
navStackView.layoutIfNeeded()


switch userImages.count
case 0:
print("0 images")
case 1:
changeNavStackWidth(constant: 35, spacing: 0)
//changeNavStackWidth(constant: 60, spacing: 0)
case 2:
changeNavStackWidth(constant: 80, spacing: 10)
case 3:
changeNavStackWidth(constant: 95, spacing: -5)
case 4:
changeNavStackWidth(constant: 110, spacing: -10)
case 5:
changeNavStackWidth(constant: 95, spacing: -20)
case 6...1000:
// changeNavStackWidth(constant: 95, spacing: -20)
default:
print("default")


navigationItem.titleView = navStackView
navStackView.layoutIfNeeded()


func changeNavStackWidth(constant: CGFloat, spacing: CGFloat)
navStackView.constraints.forEach constraint in
if constraint.firstAttribute == .width
constraint.constant = constant
print("constan is:", constant) // not being printed


navStackView.spacing = spacing

override func viewDidLayoutSubviews()
super.viewDidLayoutSubviews()
navStackView.subviews.forEach $0.layer.cornerRadius = $0.frame.height / 2



navStackView

navStackView

navStackView.spacing = spacing

print

3 Answers
3

based on our discussion in chat. Here is what you want:

A) if there is only one Image

B) if there are two Images:

C) if there are more than 2:

Code:

import UIKit

class TestStack: UIViewController
var userImages = [#imageLiteral(resourceName: "images-1"),#imageLiteral(resourceName: "images-2"),#imageLiteral(resourceName: "images-4"),#imageLiteral(resourceName: "images-5")]

let imagesHolder: UIView =
let v = UIView()
v.translatesAutoresizingMaskIntoConstraints = false
return v
()

override func viewDidLoad()
super.viewDidLoad()
userImages.removeLast(2)
guard let bar = navigationController?.navigationBar else return
bar.addSubview(imagesHolder)
let size = 25
for i in 0..<userImages.count
var x = i * size
x = userImages.count > 2 ? x/2 : x
x = (i == 1 && userImages.count == 2) ? x + 5 : x
let imageView = UIImageView(frame: CGRect(x: x, y: 0, width: size, height: size))
imageView.image = userImages[i]
imageView.clipsToBounds = true
imageView.layer.cornerRadius = CGFloat(size / 2)
imagesHolder.addSubview(imageView)


let width = CGFloat((userImages.count * size)/2)
NSLayoutConstraint.activate([
imagesHolder.centerYAnchor.constraint(equalTo: bar.centerYAnchor),
imagesHolder.centerXAnchor.constraint(equalTo: bar.centerXAnchor),
imagesHolder.widthAnchor.constraint(equalToConstant: width),
imagesHolder.heightAnchor.constraint(equalToConstant: CGFloat(size))
])





Instead of adjusting the StackView's width to adjust to the images:

top

bottom

center horizontally

aspect ratio

1:1

The constraints on the UIImageView in relation to the UIView will keep the images separated out equally, and the aspect ratio constraint on itself will keep the UIImage as a perfect circle.

UIView

top

bottom

leading

trailing

UIStackView

UIStackView

UINavigationBar

top

bottom

Changing your imageView's content mode to .aspectFit will also do the trick without having to mess with your stackView's width.

.aspectFit

Change this imageView.contentMode = .scaleAspectFill to this imageView.contentMode = .scaleAspectFit

imageView.contentMode = .scaleAspectFill

imageView.contentMode = .scaleAspectFit

AspectFill stretches the image to fit the view, and doesn't maintain the scale ratio of the image
AspectFit stretches the image until the horizontal bound OR vertical bound hits the view, while maintaining the scale ratio of the image.

AspectFill

AspectFit

see here

UIImageView

frame.height / 2

viewDidLayoutSubviews()

navStackView

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.