iosuikitios-autolayoutiphone-xios-universal-app

How to scale all components of an view?


Is there any best way to scale all components (button, button title, image, all it's hierarchy sub-views) of a view according to device screen size such as iPhone XS, iPhone XS Max, iPhone X etc.

Actually, I have some screens in iOS app project which is designed on a particular iPhone all constraints are fixed so I need to change them according to other iPhone screen.

As I know that we can do this by applying some constraints with ratio and all other things like font and image scaling by programmatically but I am searching for a best and simple solution that takes less effort to me.


Solution

  • Yes, you are right this can be implemented by screen ratio, as I did this a year ago. Let me tell you, how you can do this-

    You need to scale the image size, the font size of the text and also every constraint of every view according to screen ratio.

    Have you ever try ScalableLayoutKit library which is implemented by me to design scalable, consistent UI based on design/source screen.

    For example:- Suppose you want to design a login screen according to iPhone6 mock-up for this you create a LoginViewController and design UI from Storyboard.

    Using ScalableLayoutKit

    class LoginViewController: UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()      
            // Here we just need to passed based or source design screen name only.
            // This method will recursively scale your all ui elements and its constraints too.
            view.scaledLayoutDesign(from: .iPhone6)
        }
    
    }