Search code examples
iosswiftrotationautolayoutsize

How can I resize the button? Swift


How do I change the width and length of the button while the phone screen is in portrait or landscape mode?

I want this to be the button size when the screen is Portrait :

        View_Mor.heightAnchor.constraint(equalToConstant: 140).isActive = true
        View_Mor.widthAnchor.constraint(equalToConstant: 140).isActive = true

and when the screen is landscape :

        View_Mor.heightAnchor.constraint(equalToConstant: 30).isActive = true
        View_Mor.widthAnchor.constraint(equalToConstant: 30).isActive = true

and this is my code :

class CHATViewController: UIViewController {
@IBOutlet weak var View_Mor: UIView!
override func viewDidLoad() {
    super.viewDidLoad()
    View_Mor.translatesAutoresizingMaskIntoConstraints = false
    View_Mor.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    View_Mor.centerYAnchor.constraint(lessThanOrEqualTo: view.centerYAnchor).isActive = true
    View_Mor.heightAnchor.constraint(equalToConstant: 140).isActive = true
    View_Mor.widthAnchor.constraint(equalToConstant: 140).isActive = true
 }


override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    if UIDevice.current.orientation.isLandscape {
        View_Mor.heightAnchor.constraint(equalToConstant: 30).isActive = true
        View_Mor.widthAnchor.constraint(equalToConstant: 30).isActive = true
        self.view.layoutIfNeeded()
    } else {
        print("Portrait")
        View_Mor.heightAnchor.constraint(equalToConstant: 140).isActive = true
        View_Mor.widthAnchor.constraint(equalToConstant: 140).isActive = true
        self.view.layoutIfNeeded()
    }
 }
}

But it doesn't work


Solution

  • Use size classes to vary the width and length of the button. Override traitCollectionDidChange method, this will be called when the iPhone has changed in different orientations. Using the horizontalSizeClass & verticalSizeClass from the traitCollection activate the required constraints.

    import UIKit
    
    class CHATViewController: UIViewController {
        @IBOutlet weak var View_Mor: UIView!
        lazy var heightArchonWhenPortrait = View_Mor.heightAnchor.constraint(equalToConstant: 140)
        lazy var widthArchonWhenPortrait = View_Mor.widthAnchor.constraint(equalToConstant: 140)
        lazy var heightArchonWhenlandscap = View_Mor.heightAnchor.constraint(equalToConstant: 30)
        lazy var widthArchonWhenlandscap = View_Mor.widthAnchor.constraint(equalToConstant: 30)
    
        override func viewDidLoad() {
            super.viewDidLoad()
            View_Mor.translatesAutoresizingMaskIntoConstraints = false
            View_Mor.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
            View_Mor.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
            heightArchonWhenPortrait.isActive = false
            widthArchonWhenPortrait.isActive = false
            heightArchonWhenlandscap.isActive = true
            widthArchonWhenlandscap.isActive = true
        }
    
    
        override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
            super.traitCollectionDidChange(previousTraitCollection)
            redoLayout(trait: traitCollection)
        }
    
    
        func redoLayout(trait:UITraitCollection) {
            if trait.horizontalSizeClass == .compact && trait.verticalSizeClass == .regular {
                heightArchonWhenPortrait.isActive = false
                widthArchonWhenPortrait.isActive = false
                heightArchonWhenlandscap.isActive = true
                widthArchonWhenlandscap.isActive = true
            } else {
                print("Portrait")
                heightArchonWhenlandscap.isActive = false
                widthArchonWhenlandscap.isActive = false
                heightArchonWhenPortrait.isActive = true
                widthArchonWhenPortrait.isActive = true
            }
        }
    }