How to design a proportional interface programmatically?

Question

I'm a beginner iOS app developer, but I've already released a few relatively simple apps. During development, I was always interested in the question of how to properly design interfaces for different devices and make it easy - not to write a bunch of small edits for some types of screens. What do I mean by "properly"? For example, if you visit the App Store app from different devices, you can see that the same interface elements have different sizes on different devices. It is clear that sizes will vary greatly between iPhones and iPads, but the variation in size can be seen even between different iPhone models. Does Apple design its app for each iPhone screen by typing something like this in the code?

if UIDevice().userInterfaceIdiom == .phone {
    switch UIScreen.main.nativeBounds.height {
        case 1136:
            print("iPhone 5 or 5S or 5C")
        
        case 1334:
            print("iPhone 6/6S/7/8")
        
        case 1920, 2208:
            print("iPhone 6+/6S+/7+/8+")
        
        case 2436:
            print("iPhone X/XS/11 Pro")
        
        case 2688:
            print("iPhone XS Max/11 Pro Max")
        
        case 1792:
            print("iPhone XR/ 11 ")
        
        default:
            print("Unknown")
    }
}

Hardly. Yes, I've heard and used Autolayout and Autoresizing Masks, but I'm probably missing something. I'll show you with an example:

There is a task to design the interface as in the picture and do it according to Apple guidelines so that the interface is as correct as possible on different devices.

I'll try to parse the interface. I need to create a UITableViewController and place simple UICollectionView in the UItableView cells. Then I will try to build the layout of the second cell (on the iPad the title is "New Games We Love" on the iPhone the title is "AR Apps We Love"). In UICollectionView I need to place 3 UIView vertically and 3 UIView on the right, and in UIView I need to place a button the same size as UIView itself and one UIImageView and two UILabel, one button with the text "GET".

I place the button according to the size of UIView in order to go to the next page. But how can I specify the size of the image, two titles and a button with the text "GET" so that it looks correct on different devices? If I start setting the size of the elements in points, for example, image = 45x45, label0 = 12x138, label1 = 12x138, button = 23x54 and set some constraints between them, then on all devices the picture and titles will be the same size and will not adapt to the device. On the iPad, you can see that text elements are visible from the right edge. And in the original on all devices, the app icon is slightly visible

My layout

Original

I have another way and just set constraints between the elements in the cell, then there will be no constraints with width and hight properties, and in this case the interface will adapt and the sizes of the button, picture, two titles will change, but in this case I will need to set the height of the cell so that the constraints understand what they need to build on. And here we are again at the beginning of problem. If you manually set the cell size in points, then all elements will look the same on all different devices.

How to make a proportional interface?

Start here: [Understanding Auto Layout](https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1) .. the App Store UI is almost certainly using `UICollectionViewCompositionalLayout`. The subviews and individual views are likely using Trait Variations — DonMag, Jul 25 '23 at 18:31
No, never do this as it will be a nightmare for you as more and more devices are released every year. Using SwiftUI would be the easiest option, if not then in UIKit you would have to use AutoLayoutConstraints. — devdchaudhary, Jul 25 '23 at 22:42
If you are working with UIKit you should try [snapkit](https://github.com/SnapKit/SnapKit). This will allow you to easily create your views programmatically (ViewCode) and avoid using storyboards. — Leo Dabus, Jul 26 '23 at 03:53
To simplify Autolayout, you can use the well-written and documented SteviaLayout library. https://github.com/freshOS/Stevia — Dzmitry Sotnikov, Jul 26 '23 at 05:30
Look into [UICollectionViewCompositionalLayout](https://developer.apple.com/documentation/uikit/uicollectionviewcompositionallayout). You can specify layout rules for each section separately and there would be no necessity of using a table view with a collection view inside. Take advantage of size classes and based on the different values, build the UI properly. This will also help you set up the layout properly when the app runs in 1/3 on iPad, for example. Also, take a look at [UIStackView](https://developer.apple.com/documentation/uikit/uistackview), it simplifies a lot of things as well. — Maksym Musiienko, Jul 26 '23 at 11:55

How to design a proportional interface programmatically?

0 Answers0