1

I have a UIViewController that has 4 subviews - left view, right view, bottom view and the center view. The center view actually embeds another view controller (AVPlayerViewController). On the press of a button, I wish to change the left view and bottom view and resize the center view. The center view will also have a different leading constraint this time as the left view to which it was hooked earlier is now not there anymore.

What is the easiest way to do this kind of thing using Autolayout and storyboards? Is there a way in Storyboards to define two designs of same UIViewController and alter states, all with animation?

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

2 Answers2

1

Pretty much the best way to achieve this is manipulating the constraints in code,

Storyboard declare UIViews visually with initial state only.

As you can't give 2 designs for the same UIViewController but you can for sure manipulate it state.

In code where you can animate, delete, add and resize constraints in clean way.

Currently UIStoryBoard doesn't support having 2 designs for the same UIViewController as far as i got from your question is that you doing simple things as animations and constraint resizing and the way to achieve that is to manipulate the constraints in code.

How to:

Simply drag an @IBOutlet of the constraint into the UIViewController class from the UIStoryBoard and you can adjust its proprieties such as .constant And .firstAnchor.

shortcut answer: No you can't have 2 designs for the same UIViewController in the storyboard

Mohmmad S
  • 5,001
  • 4
  • 18
  • 50
1

There are number of ways to do it. Select the way which suits you best

  1. You can use two container views. at a time, one will be hidden and the other will shown. Make the separate design in embed controller of each container view

    In this case, you will have two view controllers. you will have to manage communication between them, if any


  1. You can use two UIView's. at a time, one will be hidden and the other will shown. Make separate designs for each view in storyboard. For designing, set alpha of one to 0. so that you can design the other view

    In this case, one view controller two views inside it. overlapping each other. show one and hide other based on condition


  1. Manipulate constraints in code with animation. Design and set the constraints. Then make outlets of constraints and change yourConstraint.constant OR yourConstraint.anchor
Awais Fayyaz
  • 2,275
  • 1
  • 22
  • 45
  • This answer comes closest, however, I am already embedding a view controller (AVPlayerViewController) in the center view. It needs to be shared between two views (or two view controllers in option 1). How do we share the view? – Deepak Sharma Sep 27 '18 at 11:57
  • your center view is a container view which embeds AVPlayerViewController? – Awais Fayyaz Sep 27 '18 at 12:01
  • Yes. That's correct. Though it is one of the 5 views. But this is the only common view between the two designs. It is different size in the two layouts though. I guess I can move the AVPlayerViewController to another view without issues using UIViewController containment APIs? – Deepak Sharma Sep 27 '18 at 12:36
  • I have a new headache if I need to lay the two views out in different container views. I have already added so many constraints. How do I put all the views in a container view without destroying everything designed carefully so far? – Deepak Sharma Sep 27 '18 at 12:38
  • Also, making alpha 0 in Storyboard doesn't work. It makes it extremely difficult to make changes in view underneath by clicking (all clicks refer to the view in front). – Deepak Sharma Sep 28 '18 at 11:24
  • @DeepakSharma. Making alpha 0 hides the view completely. And you can change the position OR size of any view by going into size inspector of that view and going into view section. see x, y, width, height – Awais Fayyaz Sep 28 '18 at 12:19
  • yes, I can select the inspectors of each view, but it is not as easy as selection in the left pane. Any changes in view heirarchy will be a pain. – Deepak Sharma Sep 28 '18 at 12:26
  • Do what seems easy to you. it's easy for me using the size inspector to move views – Awais Fayyaz Sep 28 '18 at 13:41