CODEWITHSUNDEEP
iosswiftxcodeautolayoutconstraints
Lontronix
Lontronix

Reputation: 193

Spacing of UI Elements based on Screen Size

The initial screen of my app prompts the user to enter in their schedule, I have implemented constraints, however on small screen sizes like the iPhone SE, the Text Fields and Switches are too far apart and as a result the size of the label above is decreased and an entire row (Text Field + Switch) is cut off. On devices with larger screen sizes like the iPhone 8 plus, their is space at the bottom. How would change the spacing of the rows based on the screen size of the device to insure that all of the UI elements are displayed properly? Essentially, I would like each phone size to display something similar the iPhone 8 where their is a small amount of space at the bottom of the display.

Iphone 8 plus iPhone 8 Plus

iPhone 8 iphone 8

iPhone SE iPhone SE**

Upvotes: 0

Views: 368

Answers (1)

Pankaj Kulkarni
Pankaj Kulkarni

Reputation: 561

You can achieve this in many ways. The first thought that came to my mind is... Group or Embed the Period Label, text field and the switch into a UIView.

Period Group

Do this for all 8 periods. Then insert these 8 UIViews into UIStackView - vertical with equal spacing. Now add constraints to the UIStackview with standard leading and trailing spaces, add standard margin from the top and your defined margin from the bottom. This will give you similar looks on all screen sizes.

Upvotes: 1

Related Questions