Reordering View Controllers in the Document Outline when in the Storyboard

Greetings everyone.


It looks like the forum look has changed.


OK, here is my small problem. I have been working on a comic book with animation and sound on some of the pages. In the storyboard I have built alot of View Contorllers. As I create a new View Controller it shows up in the Document Outline on the left of the storyboard. I want to reorder those view controllers into groups in the document outline so it makes more sense visually.


I tired dragging them but they stay put. Is there an other way to do this?


JR

Replies

My request is being pushed back in this forum and I am writing this note to put it where all of you can see it again. Does anyone have an answer? Or is it impossible to reorder the View Controllers in the Document Outline.


JR

I don't know about Xcode 6, but in Xcode 7 they have introduced storyboard references so you could put groups of VCs in separate storyboards.


Generally you shouldn't have large numbers of VCs though, so maybe your design could be improved too.

Thank you junkpile for your reply. I'll look into this grouping of VCs.


The large number of VCs is unavoidable for my application. I started my project using the page based application template that Xcode offers. It is a comic book, and on some of the pages there is animation and sound. The graphics and sound relies on NSTimer as a trigger. But because Apple's template recycles the view controller on the fly when the user turns the page, programmatically you stay on the same View Controller ( which is very clever on Apple's part ) I am not able to stop the sound if the user decides to turn the page before the animation finishes. This creates a very unprofessional looking (and sounding) app.


I got around this using 2 methods - ignoreInteraction & respondToInteractions which prevented the user from turning the page until the animation was finished. But I could see how this would annoy a user if they wanted to turn the pages back or forward for some reason. They would have to stop and wait for the animation to finish before the continue 'leafing' through the app. This would turn the animation, which is supposed to be a delight, to an annoyance.


Plus the fact that the plot in my comic book branches 3 ways early on in the story. The protagonist comes to 3 doors, and he has to go through one of them, this means the plot has 3 different endings. I found that I had to abandone Apples page based template because it won't allow branching 3 ways. Their template is meant to be linear like a book and therefore doesn't allow branching. So after the point of the 3 doors I made various View Controllers with corresponding ViewController classes, connected by push segues. Suddenly I could stop the audio part of the animation in this situation plus it went a little easier on the memory. When the app was running on the page based model it went up to 700 MB. Now that I have made this change it goes up to no more than 570 MB making it OK for running on the iPad Air 2.


This is why I don't want to abandon the numerous View Controllers.


JR

If the layout of each page in your book is the same, you only need 1 viewController. You'd keep track of the page number and display the appropriate content conditionally. If you had, for example, three different layouts, you could have three different VCs (and so three scenes in your storyboard) or you could have all of the required views in one VC and display just the required ones. You really shouldn't need one VC per page.

Hello Simpsonics.


Thank you for your reply.


While there are some pages that have the same layout, most don't. I will list a few layouts...

  1. 12 views (3 across - 4 down) all still .png files displayed in each view
  2. 7 views (1 top panoramic view - 6 lower views) or...
  3. 7 views (6 views - 1 lower panoramic view)
  4. 12 views with the first view displaying animation with sound
  5. 12 views with the last view displaying animation with sound
  6. a full page view
  7. a full page view displaying animation with sound, then that view is hidden and 12 views becoming unhidden displaying 12 still .png files.
  8. a full page view displaying animation and then cutting to a camera feed from the iPad's camera to put the users face into the comic book page, then hiding the user's face and cutting to a standard 12 views. (It is imperative to the plot that the user sees themselves right in the comic book!)

and a few more, but you get the idea.


Now at first I used the page based app template (as I described in the above post) and had all these different configuration of sub-views on one main view and it worked fine, but I was unable to stop the sound of a particular animation if the user turned to the next page or a previous page before the animation stopped. And I found that intolerable.


Plus this model wouldn't work after I had the plot of the comic split into 3 different ending plots. I could reuse the same view controller by hiding and unhiding views right up to the 3 doors but after that I had to have separate view controllers with accompanying view controller classes. I found I could stop an animation's sound after the 3 doors but not before.


So I abandoned this idea and had one view controller per page for the whole app. Now I could stop the sound without any problem. Plus, much to my surprise, it was a bit easier on the memory when the app ran on my iPad air 2.


I couldn't find any indication that there is a limit on the number of view controllers that can be used in the storyboard anywhere on the net. And with the way I have it now, my control of everything from animation to sound and much much more is total and easy. (JUST the WAY I like it!)


🙂


But I prefer the structure of my code and the accompanying controllers to be ordered in the same way as the plot of the story and I would still like to know if I can reorder them somehow in the document outline.


JR

You can right click the storyboard and Open As -> Source Code.


You can then cut and paste "scenes", so for example, you have sections like



<!--Tab Bar Controller-->
<scene sceneID="lDY-Kn-kGl">
...stuff...
</scene>


which you can cut and paste in any order.


The order in the source code is the order in which they appear in the Document Outline.

This work-around works perfect. But it seems like it should be a simple click-drag to re-order. Amazing...Lol! Thx for your inside look into XML.