cannyboy cannyboy - 3 months ago 14
iOS Question

Resizable container views containing view controllers

I want to be able have several UIViewControllers on the screen at once, arranged as panes, as per the diagram below.
With the ability to:


  • add additional panes while the program is running.

  • drag the bars between the panes to resize them



I was thinking of using container views (which are just view controllers?)

How would I best achieve this?

┌───────────────────┳────────────────────────────┐
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
┣━━━━━━━━━━━━━━━━━━━┫ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
│ ┃ │
└───────────────────┻────────────────────────────┘

Answer

I have created a quick prototype to demonstrate how this can be done: https://github.com/MrNickBarker/iOSAccordionPanels/tree/master

enter image description here

I'll explain the essence here. You can check the details in the repo.

  • All panels and separators are constrained trailing to leading to each other
  • Separators are constrained to each other (trailing to leading) with the first separator being constrained to the leading side of the superview
  • Each separator holds a reference to its constraint to the previous separator and updates that constraints constant with a pan gesture
  • Panels have a minimum width constraint. Not strictly needed but looks nice.
  • Separator constraints have a lower priority (for ex. 999) so that they respect the minimum width of panels which also gives a nice effect of panels growing back to their size if there is more room
  • When adding or removing a panels remove the constraints and add them again for all panels and separators. This point can be improved to preserve the sizes of existing panels or animations.

Here is a crude diagram:

superview-panel-separator-panel-separator-panel-superview
superview-------separator-------separator