Resize UIViews depending upon the screen size like in Android in iOS
I have designed the below view using the constraints and it's been done on iPhone 6 in storyboard so it looks exactly the same on iPhone 6. When I run it on iPhone 5s or SE all the views gets distorted. on iPhone X things get worse. I have knowledge of content hugging and content compression.
To overcome this issue what I do is I have created the below functions to resize the view depending upon the screen size.
import UIKit
/// The UI was desinged on this screen
let designedOnSize = CGSize(width: 320, height: 568)
/// This is the phone screen.
let currentScreenSize = UIScreen.main.bounds.size
func getVerticleCostraintValueFrom(_ constant: CGFloat) -> CGFloat {
// cSize * (constant / size)
return currentScreenSize.height*constant/designedOnSize.height
}
func reconfigureVerticleConstraints(_ constraints: [NSLayoutConstraint]) {
for constraint in constraints {
constraint.constant = getVerticleCostraintValueFrom(constraint.constant)
}
}
func getHorizontalCostraintValueFrom(_ constant: CGFloat) -> CGFloat {
// cSize * (constant / size)
return currentScreenSize.width*constant/designedOnSize.width
}
func reconfigureHorizontalConstraints(_ constraints: [NSLayoutConstraint]) {
for constraint in constraints {
constraint.constant = getHorizontalCostraintValueFrom(constraint.constant)
}
}
func configureFontSize(_ views: [Any]) {
for view in views {
if let label = view as? UILabel {
label.font = label.font.withSize(getHorizontalCostraintValueFrom(label.font.pointSize))
continue
}
if let textField = view as? UITextField {
textField.font = textField.font?.withSize(getHorizontalCostraintValueFrom(textField.font!.pointSize))
continue
}
if let textView = view as? UITextView {
textView.font = textView.font?.withSize(getHorizontalCostraintValueFrom(textView.font!.pointSize))
continue
}
if let button = view as? UIButton {
button.titleLabel?.font = button.titleLabel?.font.withSize(getHorizontalCostraintValueFrom(button.titleLabel!.font.pointSize))
continue
}
}
}
override func viewDidLoad() {
super.viewDidLoad()
configureFontSize([emailTextField, mobileNumberTextField, passwordTextField, signUpButton, orSignUpLabel, facebookButton, googleButton, twitterButton])
reconfigureVerticleConstraints([logoTopConstraint, logoHeightConstraint, emailTextFieldHeightConstraint, emailTextFieldTopConstraint ........])
self.view.layoutIfNeeded()
}
Is the above way correct? If not, then please give me advice or suggest me some good practice as for me performance really matters. Will this affect the laying out of views?
In Android, this is automatically handled by the system such things can be done in iOS?
Instead you can change the UI for login screen by adding social icons next to each other horizontally
With this you will not face the issue of resizing