Can't adjust layouts on multiple devices in Swift - ios

Question

I'm trying to adjust layout without Storyboard in Swift. But using the code below, I can't adjust layout on iPhone Plus series (6+, 7+, and 8+).
Case1
Using images based on 640x1136 size, it works on iPhone8, 8+, and X.
class Constants {
// the image parts are based on 640x1136
static let guiPartsWidthOnDesign = CGFloat(640)
static var guiPartsMultiplier: CGFloat = UIScreen.main.bounds.width / guiPartsWidthOnDesign
}
Make buttons
for i in 1..<5 {
let subButton = UIImageView.init(frame: CGRect(
x: UIScreen.main.bounds.size.width/2-50*Constants.guiPartsMultiplier,
y: (100*Constants.guiPartsMultiplier)+CGFloat(i*100),
width: 187*Constants.guiPartsMultiplier,
height: 100*Constants.guiPartsMultiplier))
background.addSubview(subButton)
subButton.backgroundColor = UIColor.blue
subButton.alpha = 1.0
}
The results on multiple devices look the same layout.
Case2
Using images based on 750x1334 size, it didn't work well on iPhone8+.
class Constants {
// the images are based on 750x1334
static let guiPartsWidthOnDesign = CGFloat(750)
static var guiPartsMultiplier: CGFloat = UIScreen.main.bounds.width / guiPartsWidthOnDesign
}
Make buttons (same to the previous code.)
Result
As you see, the blue square's y positions are different between iPhone8 and 8 Plus.
(The results of iPhone8 and X are the same.)
How can I solve this problem?
UPDATE
I tried to use UIStackView, but it didn't work well.
UPDATE2
//Define this as class variable
fileprivate lazy var stackView: UIStackView = {
let sv = UIStackView()
sv.backgroundColor = UIColor.green
sv.translatesAutoresizingMaskIntoConstraints = false
sv.axis = .vertical
sv.alignment = .fill
sv.distribution = .fillEqually
sv.spacing = 10
return sv
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(stackView)
stackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
let background = UIImageView.init(frame: UIScreen.main.bounds)
background.image = UIImage(named:"BG")
stackView.addSubview(background)
// background.translatesAutoresizingMaskIntoConstraints = false
// background.contentMode = .scaleAspectFill
for i in 1..<5 {
let subButton = UIImageView()
subButton.translatesAutoresizingMaskIntoConstraints = false
subButton.backgroundColor = UIColor.blue
subButton.alpha = 1.0
stackView.addArrangedSubview(subButton)
subButton.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.3).isActive = true
}
}
*I'm sorry, I don't know but I couldn't upload the screenshot.
UPDATE3
I used the following code and the result was like this on all type devices:
//Define this as class variable
fileprivate lazy var stackView: UIStackView = {
let sv = UIStackView()
sv.translatesAutoresizingMaskIntoConstraints = false
sv.axis = .vertical
sv.alignment = .fill
sv.distribution = .fillEqually
sv.spacing = 10
return sv
}()
fileprivate lazy var catBg: UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = false
iv.contentMode = .scaleAspectFill
iv.image = UIImage(named: "BG")
return iv
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(catBg)
catBg.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
catBg.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
catBg.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.7).isActive = true
catBg.heightAnchor.constraint(equalTo: catBg.widthAnchor, multiplier: 1.78).isActive = true
self.catBg.addSubview(stackView)
stackView.centerXAnchor.constraint(equalTo: catBg.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: catBg.centerYAnchor).isActive = true
for i in 1..<5 {
let subButton = UIImageView()
subButton.translatesAutoresizingMaskIntoConstraints = false
subButton.backgroundColor = UIColor.blue
subButton.alpha = 1.0
stackView.addArrangedSubview(subButton)
subButton.widthAnchor.constraint(equalTo: catBg.widthAnchor, multiplier: 0.3).isActive = true
//If you have an image you can remove or change this anchor
subButton.heightAnchor.constraint(equalToConstant: 54).isActive = true
}
}
UPDATE4
My ideal is the center of this image. But so far the result is like the right image.

Answer 1

Even if you are not using storyboards, I would suggest you using UIStackview. In the stackview you specific axis to be vertical and a spacing if you'd like. Set the stackview to fill equally.
Don't using actual frames to calculate position for multiple screen layouts, it will get tedious.
You should use autolayout constraints in particular anchors.
//Define this as class variable
fileprivate lazy var stackView: UIStackView = {
let sv = UIStackView()
sv.translatesAutoresizingMaskIntoConstraints = false
sv.axis = .vertical
sv.alignment = .fill
sv.distribution = .fillEqually
sv.spacing = 10
return sv
}()
fileprivate lazy var catBg: UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = false
iv.contentMode = .scaleAspectFill
iv.image = UIImage(named: "your_img_name")
return iv
}()
//Put this in viewDidLoad
//Edit
self.view.addSubview(catBg)
//catBg.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
//catBg.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
//catBg.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.7).isActive = true
//catBg.heightAnchor.constraint(equalTo: catBg.widthAnchor, multiplier: 1.78).isActive = true
catBg.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
catBg.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
catBg.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
catBg.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
self.catBg.addSubview(stackView)
stackView.centerXAnchor.constraint(equalTo: catBg.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: catBg.centerYAnchor).isActive = true
for i in 1..<5 {
let subButton = UIImageView()
subButton.translatesAutoResizingMaskIntoConstraints = false
subButton.backgroundColor = UIColor.blue
subButton.alpha = 1.0
stackView.addArrangedSubview(subButton)
subButton.widthAnchor.constraint(equalTo: catBg.widthAnchor, multiplier: 0.3).isActive = true
//If you have an image you can remove or change this anchor
subButton.heightAnchor.constraint(equalToConstant: 54).isActive = true
}