-1

Apologies in advance for the basic nature of this question. I'm happy to be redirected to a previously answered version of this question, but haven't found it yet.

I just finished up the majority of my first app, and am concerned I might have set it up in the wrong way.

My app looks "good" on an iphone7, but when I change the device to a 7+ there is empty space on the bottom and right edges of the view controllers, and when I run it on an iphone 5, the view doesn't fit.

Is there a way to make the view of my app automatically stretch/condense to any device? Or, is this way more complicated that I anticipated? I want to believe there's an easy solution but I haven't found it yet.

Thanks!

tfcamp
  • 115
  • 1
  • 9
  • Your title says it all, Auto Layout you want to use! There are a lot of tutorials on this:) – J. Doe Jun 03 '17 at 17:06

2 Answers2

4

Ok so this is gonna be a long task for you. I'll list down the topics you will need to learn in order to get it right.

  1. StackView
  2. Content Hugging Priorities / Compression Resistance Priorities
  3. Constraint priorities
  4. Size Classes for different UI elements

Useful links:

  1. Official Tutorials on some mysteries of Autolayout(Part 1 and Part 2).
  2. Official Guide on Autolayout.
  3. other online resources

as rightly mentioned by J. Doe, The answer is in your question

Dishant Kapadiya
  • 523
  • 4
  • 10
  • Thanks. This video was helpful in getting me the information I needed: https://www.youtube.com/watch?v=RH_Ye-8ii8E&t=45s – tfcamp Jun 04 '17 at 15:12
  • This post will gives you better understanding of how auto layout works https://slicode.com/auto-layout-in-ios-explained-in-details-from-basics-part-1/ – Shankar BS Jan 11 '20 at 15:10
0

if you support only portrait mode then.

  1. First choose a base layout for design.As you have chosen iphone 7. I choose iphone 7 plus.

  2. Create some constant.

Why?

To create an aspect ratio to multiply with your every constraint's constant value you drew in iphone 7 layout.so that it will be calculate properly according to the device.

Like this.

var SCREEN_WIDTH = UIScreen.main.bounds.size.width
var SCREEN_HEIGHT = UIScreen.main.bounds.size.height
var BASE_SCREEN_HEIGHT:CGFloat = 736.0
var SCREEN_MAX_LENGTH = max(SCREEN_WIDTH, SCREEN_HEIGHT)
var ASPECT_RATIO_RESPECT_OF_7P = SCREEN_MAX_LENGTH / BASE_SCREEN_HEIGHT

You can use mine too. if your base layout is iphone 7Plus.

How to use this?

Suppose you draw a top constraint about 10 for label in iphone 7 plus. Then make a function and call it in viewDidLoad like this to support for all devices in portrait mode.

func updateConstraint() {
    topConstantOfYourLabel.constant = 10*ASPECT_RATIO_RESPECT_OF_7P
}

if you support landscape mode

  1. if you want to change the layout for landscape then you need to design for landscape.As most of your outlets just move here and there you only need to change top bottom left right constraint. So in that case , uninstall previous constraint and install another constraint and make it work only that size class.

There are lots of online tutorial about adaptive layout like this.

  1. if you don't want to change the layout but properly calculate according to aspect ratio, then there is a function which triggers during orientation.

    override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) { if UIDevice.currentDevice().orientation.isLandscape.boolValue { print("Landscape") imageView.image = UIImage(named: const2) } else { print("Portrait") imageView.image = UIImage(named: const) } }

Apply logic in that function to support for all devices:)

elk_cloner
  • 2,049
  • 1
  • 12
  • 13
  • Thanks. This video was helpful in getting me the information I needed: youtube.com/watch?v=RH_Ye-8ii8E&t – tfcamp Jun 04 '17 at 16:32