Custom interfaces for Portrait & Landscape mode iOS

Question

I am trying to layout user interfaces differently for Portrait & Landscape orientations. The difference comes in the following ways:

1. I have few UIStackViews. Some of their axis becomes horizontal in landscape but vertical in portrait mode,

2. The order of buttons in UIStackView may be different in both the modes,

3. A button which is added to subview1 in landscape needs to be removed & added to subview2 in landscape. subview1 may not be present at all in portrait mode,

4. Autolayout constraints are different in both the modes.

I started with vary for traits in XCode but it seems to have limitations. I am manually switching constraints in the code on observing trait collection changes (viewWillTransition:...) but it seems clumsy. Is there a better way or the best way would be to have duplicate sets of controls for both the modes and hide the ones not needed in landscape/portrait modes?

Answer 1

The interface builder is really powerful if you use it right, I'm not completely sure what you're trying to do, it'd be useful if you share some screenshots at least. I'm assuming that you're every subview of the UIStackView is a button, or it contains a button, in that case what I'd do is:

Having 2 different UIStackView, one for landscape and the other for portrait.

Add variants to the installed interface builder property for traits. So only one of the two UIStackView will be installed at a time.

For every UIButton add the event, connect it to the respective IBAction or selector. This will work even if there're 2 buttons that do the same.

So regarding your issues:

1. The axis itself wont change, but this will work because there're 2 version of the UIStackView.
2. You can choose to arrange the button on each UIStackView.
3. Just add the buttons wherever you want on each UIStackView.
4. Set the constraints as you want depending on which UIStackView you're working on.

An I missing something? please update your question with more information so people can help you in a better way.