Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adaptive layout for iPad

I am following this article for building adaptive layout in ios Building Adaptive User Interfaces for iOS 8.

It will work fine on iPhones . Now i wan't to give the same effect on iPad. But for iPad adaptive layout is not work.
Here is screenshot of application in iPhone5 (green box represent view1 and yellow box represent view2)
1.Portrait mode

enter image description here

  1. Landscape mode
    enter image description here

Question: how can achieve same effect for iPad?
Expanded Question: How to set up initial orientation of iPad in landscape mode?

like image 803
Rizwan Shaikh Avatar asked Jun 01 '15 07:06

Rizwan Shaikh


People also ask

What is adaptive layout in iOS?

The introduction of Adaptive Layout caused a huge paradigm shift for iOS app designers. By using it, you can now create a single layout for your app which works on all current iOS devices — without crufty, platform-specific code! This tutorial serves as your introduction to Adaptive Layout.

What is universal layout in iOS?

Apple encourages developers to design apps with the universal user interface and universal layout. Under the concept of universal, an app should be able to be deployed to any iOS device with any screen size, even those not existed now.

How do I make different layouts for iPad and iPhone?

1) You can use Autolayout constraints and size classes to make the view compatible to both iPhone and iPad screen sizes. 2) You can create and use separate Storyboards or . Xibs each for iPhone and iPad and use accordingly.

How do I make apps fit my iPhone screen?

Go to Settings -> Display & Brightness. Then go to the bottom to the Display Zoom. Change the View to Standard.


1 Answers

The problem with the iPad is that both orientation is represented as Regular.

One of the solution is to add two IBOutlet collection to your view controller where you want this orientation change to happened, for example:

@IBOutlet var landscapeConstraints: [NSLayoutConstraint]!
@IBOutlet var portraitConstraints: [NSLayoutConstraint]!

Go to the storyboard, switch to the Adaptive Layout you want to happened in iPad portrait orientation and control drag from every ACTIVE constraints to portraitConstraints IBOutlet. Change the Adaptive Layout to the one you want to happened for landscape and again control drag from just ACTIVE constraints to landscapeConstraints IBOutlet.

In view controller override viewWillTransitionToSize method:

    override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
        let transitionToLandscape = size.width > size.height 
        let constraintsToUninstall = transitionToLandscape ? ortraitConstraints : landscapeConstraints 
        let constraintsToInstall = transitionToLandscape ? landscapeConstraints : portraitConstraints

        view.layoutIfNeeded()
        coordinator.animateAlongsideTransition({
            _ in
            NSLayoutConstraint.deactivateConstraints(constraintsToUninstall) 
            NSLayoutConstraint.activateConstraints(constraintsToInstall) 
            self.view.layoutIfNeeded()
        }, completion: nil)
}

// Expanded, constraints example:

enter image description here

Go to any-any size class and see the constraint some of them will be gayed out which means that are not active here but will be active in different size classes, for example any-regular.

// Expanded

To set up initial orientation you can override viewWillAppear and install/uninstall the right constraints:

override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)

        let transitionToLandscape = view.frame.size.width > view.frame.size.height

        let constraintsToUninstall = transitionToLandscape ? portraitConstraints : landscapeConstraints
        let constraintsToInstall = transitionToLandscape ? landscapeConstraints : portraitConstraints

        view.layoutIfNeeded()
        NSLayoutConstraint.deactivateConstraints(constraintsToUninstall)
        NSLayoutConstraint.activateConstraints(constraintsToInstall)
    }
like image 87
Greg Avatar answered Oct 05 '22 10:10

Greg