Scalable container views containing view controllers

Question

I want to have several UIViewControllers located in the form of panels at once, as shown in the diagram below. With an opportunity:

• add additional panels while the program is running.
• drag and drop columns between panels to resize them.

I was thinking about using container views (which are only view controllers?)

How could I achieve this?

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

Answer 1

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

I will explain the point here. You can check the details in the repo.

• All panels and dividers are bounded leading to each other.
• Separators are connected to each other (from the master to the master), the first separator being limited to the leading side of the supervisor
• Each delimiter contains a link to its restriction on the previous delimiter and updates the restrictions associated with pan gestures
• Panels have a minimum width limit. Not strictly necessary, but looks good.
• Separator restrictions have a lower priority (for example, 999), so that they take into account the minimum width of the panels, which also gives the nice effect of panels growing back to their size if there are more rooms
• When adding or removing panels, remove the restrictions and add them again for all panels and separators. This item can be improved to preserve the dimensions of existing panels or animations.

Here is a rough diagram:

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

Answer 2

I would not use the ContainerViewController for the storyboard. They are more suitable for use in storyboards when you already know how many controllers should be on the screen. Instead, you want to dynamically add deletion controllers to your code.

First, create a controller that handles simple views (panels). Put all your logic so that you can add a panel, delete it and resize existing views when adding / removing a new panel. I will also not use restrictions, it will be too difficult. When you add a panel, you will need to know which sides surround it, grab them and add restrictions to it. When deleting a panel, you will also need to remove some restrictions (not all) of certain panels .. a lot.

However, if you use frames, you can simply build an equation that takes the width and height of the container and recounts all the view frames.

Once you do this, just add controllers to these panels (views), for example:

 //Here self would be the containerController and paneContainer one of the pane views UIViewController *newPaneVC = [UIViewController new]; newPaneVC.view.frame = [self calculateFrameForNewPane]; [self.paneContainer addSubview:newPaneVC.view]; [self addChildViewController:newPaneVC]; [newPaneVC didMoveToParentViewController:self]; //Add resizing masks to make sure new VC resizes with superview changes (example: when more panes are added/removed) [newPaneVC.view setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight]; 

Finally, take a look at this library: https://github.com/yatsu/treemapkit

This was done 3 years ago, but I used it in the project and worked well. This gives you the logic to draw different sizes on the screen based on an array of values. You add and remove panels with this and use delegates to return cells (panels) with the controller already added.

Answer 3

I would set each view + constraint in a separate xib and use Masonry to create simple AutoLayouting constraints in the code for constraints between views.

Answer 4

I would have a ViewController that was responsible for managing and resizing the view controllers you added.

Then I would add view controllers and their views to this main view controller.

So, a few things you should pay attention to:

• If you use auto-layout, you need to add your views from constrained view controllers, so when the size changes, the contents of the view also change.
• If you are not using automatic layout, you can make some changes when resizing, and you can do it in viewDidLayoutSubviews
• You can also use viewDidLayoutSubViews if you need to customize the size of table views / collections.

Answer 5

A simple solution is to create and manage UIViews, which in turn are managed by a single ViewController. You can achieve different sizes and tiling effects using the Layout Format tool to resize. To create new tiles, you can get a random number between a given interval to get different sizes.