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.

Answer 2

What I have done is to observe the UIDevice.orientationDidChangeNotification and update the necessarily constraints to achieve different layouts, as you have already implemented. And I think this is the better way to solve the problem and never trying or even thinking to create different views for each orientation 🙅🏿‍♂️ .

Attending the conditions:

• The first condition only needs to set the axis property accordingly.
• The order of the arrangedSubviews is part of the design, and therefore, its up to the developer to rearranged them manually if he/she has to.
• In this part what I would do is what you have said: to removeFromSuperview() the button and addSubview(view:) from one subview to another.
• This is made automatically, as long as we activate the constraints for one orientation and deactivate the other ones, the system update the UI without any problem.

The most important thing is to make sure that when removing subviews, any constraint attached to it is removed, or the app will crash.