Responsive design template for ipad orientations

Question

I need to customise a particular UI with different design template for landscape and portrait modes of an iPad application. Basically this screen should have an image ,a content area to hold a description about the topic, related items of that topic and the address.

This image would give a clear picture.

From the picture (2) is the section where image should go , (4) the description ,(5) the related topic (6) the address . (3) is the container block that should vary based on 4, 5 and 6 and (1) is the scrollview which should have its contents as well as content size properly set up based on 2 and 3 .

Is it possible to achieve this scenario purely with Autolayout or using a custom UICollectionViewLayout is the better option

Appreciate any suggestions

Answer 1

The solution that i can see is to change the AutoLayout Constraints when the device rotates, and you do it programmatically : you can detect orientation change in this method : viewDidLayoutSubviews of your view controller.

and for AutoLayout constraint to make it simpler you can use PureLayout third party framework, here is its github repository : https://github.com/smileyborg/PureLayout

Answer 2

Little bit outdated, but still actual...

You can do this by introducing parent view controller that will adjust trait collection of your view controller.

You can start with projects like AdaptivePhotosAnAdaptiveApplication or more specifically AAPLTraitOverrideViewController class and applying size classes to make distinction between let's say Portrait and Landscape orientation's views sizes and positions.

With some small adjustment of viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id <UIViewControllerTransitionCoordinator>)coordinator you can achieve your goal.

Here you can find code: https://github.com/ios8/AdaptivePhotosAnAdaptiveApplication/blob/master/AdaptivePhotos/AAPLTraitOverrideViewController.m