Different UI for different iPAD sizes

Question

Our project runs for all iPAD's and we came across a problem as an example we have 8 buttons vertically sitting on a screen with constraints being added as vertical spacing they look fine on a iPAD 9.7 inch, but they look really big on iPAD 12.9, so the question is, is there any good way to actually use the screen space for something better, as in add an extra UIView if it is iPAD 12.9. I have looked into working with size classes, but I believe there is one size class for all iPADs, what I want is if there is a way to have different UI for different iPAD sizes using the Interface builder

Answer 1

The way I imagine your situation is that this specific ViewController has a lot of shared stuff, (like a common top bar, or a navigation bar) but just the middle content doesn't seem to fit properly.

In cases like this it is recommended to have a custom UIView that will load a different xib file based on the height or width of the current device.

The key point here is that, you actually only need one UIView subclass.

For this you can use @IBDesignable as well to preview it in real time inside the interface builder.

To achieve this you have to follow the next steps.

1) Create a .xib file for each of your "UIViews" based on the sizes.

2) Create an UIView subclass.

3) Hook the properties from the interface builder to this subclass. Note that you have to repeat this process for each of the xib files you want to use. IMPORTANT: Even though they are different xibs, they all get hooked into the same class.

4) Mark the created class as @IBDesignable like this.

@IBDesignable class CustomView: UIView {
    ...
}

5) Add the following code inside your class that will load a different xib based on whatever criteria you chose.

////////// View Logic //////////

// Our custom view from the XIB file
var view: UIView!

func xibSetup() {
    view = loadViewFromNib()

    // use bounds not frame or it'll be offset
    view.frame = bounds

    // Make the view stretch with containing view
    view.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]
    // Adding custom subview on top of our view (over any custom drawing > see note below)
    addSubview(view)
}

func setup()
{
    // Extra setup goes here

}

func loadViewFromNib() -> UIView {

    let bundle = Bundle(for: type(of: self))

    let nib : UINib

    let screenRect : CGRect =  UIScreen.main.bounds;

    // Use a different Nib based on the current screen height

    if screenRect.size.height == 1024 {
        // iPad Air & Pro

        nib = UINib(nibName: "iPadNormal", bundle: bundle)
    }
    else if screenRect.size.height == 1366 {
        // Large iPad Pro

        nib = UINib(nibName: "iPadLarge", bundle: bundle)
    }
    else {
        // Fall back

        nib = UINib(nibName: "iPadFallback", bundle: bundle)
    }

    let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView

    return view
}


override init(frame: CGRect) {
    // 1. setup any properties here

    // 2. call super.init(frame:)
    super.init(frame: frame)

    // 3. Setup view from .xib file
    xibSetup()

    // 4. Other Setup
    setup()
}

required init?(coder aDecoder: NSCoder) {
    // 1. setup any properties here

    // 2. call super.init(coder:)
    super.init(coder: aDecoder)

    // 3. Setup view from .xib file
    xibSetup()  

    // 4. Other Setup
    setup()
}


////////////////

IMPORTANT:

This approach is ONLY recommended when the contents of the custom view are the same, or with very minimal changes (layout doesn't matter). If the contents change a lot between sizes (like you actually wanna display different things) then you should create a "BaseViewController" with your shared logic, and make a subclass per iPad Size, so that each of them has it's own ViewController + Interface Builder Screen. Then just load the required screen just as if it was a completely different screen.

Answer 2

Assume your nibs are Foo_pro.xib and Foo_ipad.xib.

@implementation Util

+(BOOL) isIpad_1024
{
    if ([UIScreen mainScreen].bounds.size.height == 1024) {
        return  YES;
    }
    return NO;
}

+(BOOL) isIpadPro_1366
{
    if ([UIScreen mainScreen].bounds.size.height == 1366) {
        return  YES;
    }
    return NO;
}

+(NSString *)convertXib:(NSString *)nibName {
    if([Util isiPadPro_1366]) {
        return [NSString stringWithFormat:@"%@_pro", nibName];
    } else {
        return [NSString stringWithFormat:@"%@_ipad", nibName];
    }
}

Foo *foo = [[Foo alloc] initWithNibName:[Util convertXib:@"Foo"] bundle:nil]

Answer 3

Just put constraints as i suggested below Have a look on the Sample i have created for you.

1. Give your Button Aspect ratio.
2. Give width equal to the parent View's width.
3. Add Constraint Center Horizontally in container and Center Vertically in container.
4. Select Your Button and then go to size inspector and set the multiplier for the width (like 0.3 or 0.4 etc).
5. Then set the multiplier for "align center X to.." (if you want your button to be left of center then set multiplier below 1 like 0.8, 0.7,0.5 etc And if you want your button to be in the right of the center then set the multiplier value bigger than 1 like 1.2 etc).
6. Set the multiplier value for "Align center y to.." as like in Step 5.

Its all done.. Just run and check.

Hope this will help you.

Answer 4

Try This

1.Remove constrains from all of your buttons

2. Add all of your buttons into a stackview
3. Put vertical constrains on your stackview
4. set same height same width for stackview buttons
5. Remove height if you set for any button
6. Don't set height for stackview if you want it to run on different devices.

Answer 5

You can use this

All buttons embeded into view and set to its constraints to superview.

• make sure add a aspect ratio constraints to it.

Select all buttons and add constraints

• Equal width ,Equal Height, Aspect ratio

Answer 6

You can use AutoLayout for this. You can assign aspect ratio base height to your buttons. Remember there is an option of setting ratio relationship to be 'equal to' or 'less than equal to.' You could use these instead of giving exact constraints. So this would cause button to adapt heights. Then in the code you could simply check if there is enough space remaining to draw an extra uiview or not. This will solve the 'Looking really big' problem also.

Check IB screenshot here to see what i am referring to: Click on 'Relation' to see these settings