5

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?

Deepak Sharma
  • 5,577
  • 7
  • 55
  • 131

2 Answers2

2

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.

Fantini
  • 2,067
  • 21
  • 32
  • 1
    I did the same thing, but the problem with it is you need to manage two UIButtons or UIStackViews in the code everytime. – Deepak Sharma Dec 22 '18 at 17:40
  • You could add a method that returns the active `UIButton` or `UIStackView` depending the device's rotation (or if they're attached to a superview or not) that way your code will be more stable and clean by no repeating the same every time. – Fantini Dec 26 '18 at 21:10
1

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.

Ángel Téllez
  • 987
  • 9
  • 13
  • Now the problem I have with removeFromSuperView() & addSubview is the following. How do I define the constraints for both the modes in Storyboard? In order to define constraints for portrait mode, I would first need to pull the view from superview and add it to another subview in storyboard for Compact WidthxRegular Height trait collection. But that isn't allowed in vary for traits. Only option left is programatic definition of constraints in both modes. – Deepak Sharma Dec 07 '18 at 18:15
  • I try not to work with Interface Builder because my brain explote at the moment of linking the mockup with the code. Sorry about that, we have to wait for a superhero in IB. But for the programmatically way: you only need to create a Storyboard for one orientation and the other create it by code. A good example can be seen around 30:00 in [WWDC video](https://developer.apple.com/videos/play/wwdc2017/245/), but instead of observing `traitCollections` we have to observe if `UIDevice.current.orientation.isLandscape` or not, and deactivate or activate correspondingly the constraints. – Ángel Téllez Dec 07 '18 at 19:03