Search code examples
iosstoryboardios-autolayoutadaptive-layout

IOS adaptive layout using Autolayout


I am working on IOS app and its my first app to be build on IOS. I have good experience of developing Android apps. So I have gathered basic information and knowledge about IOS development. I am working on autolayout. But I am not getting it work completely. I have seen Some developers are working on code, But I just want to use IB as I believe there will be some way to handle this.

So looking for help, Please do not down vote my this post As I am posting this after trying almost everything I get on internet.

First take a look at what I have developed and what it is : enter image description here

in picture there are different numbers of simulator such as Ipad pro 12.9, Ipone 8 plus and I phone se

What I have done so far:

  • I have taken the View (the white box in middle). I have made it center vertically and center horizontally.
  • I have set view height as 300 points, and width to match the superview with some margins
  • I have put the Text Fields for taking Phone and PIN from user and OK button as shown in picture.

Problem & what I want: - The problem is view is center vertical and horizontal but not its
content are. I want this view to manage its height on the basis of
its content inside. so that It can be looked as center aligned
vertically. Right now its not center align vertically - Secondly the problem is the width of text fields, as on Ipad they looks too bad. So I really want them to be look good on all devices.

Is there any solution for this using the adaptive/Auto layout? please help me that How can I get this using IB.


Solution

  • Try following solution:-

    1. Fix the width of textfield.
    2. For label use minimum font scale(search on google).
    3. For width and height you have to use adaptive layout.

    width = 70% of superview which means multiplier for your view will be 0.7

    height = 60% of superview which means multiplier for your view will be 0.6

    Refer to the image:-

    Equal width with the superview

    Equal width with the superview

    Set the multiplier as 0.7

    Set the multiplier as 0.7