Visualizzazioni container ridimensionabili contenenti controller vista

Question

Desidero poter disporre contemporaneamente di diversi UIViewControllers sullo schermo, disposti come riquadri, come da diagramma seguente. Con la possibilità di:

• aggiungere riquadri aggiuntivi mentre il programma è in esecuzione.
• trascinare le barre tra le lastre di ridimensionare loro

Stavo pensando di utilizzare una vista container (che sono appena vedono i controllori?)

Come dovrei meglio raggiungere questo obiettivo?

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

Answer 1

Ho creato un rapido prototipo per dimostrare come questo può essere fatto: https://github.com/MrNickBarker/iOSAccordionPanels/tree/master

spiegherò le essenza qui. È possibile controllare i dettagli nel repository.

• Tutti i pannelli e separatori sono vincolati in svantaggio a condurre all'altro
• separatori sono vincolati tra loro (trascinamento a leader) con il primo separatore essendo vincolato al lato principale della superview
• Ciascun separatore contiene un riferimento al suo vincolo al separatore precedente e aggiorna i vincoli costanti con un gesto di panoramica
• I pannelli hanno un vincolo di larghezza minimo. Non strettamente necessario ma sembra bello.
• I vincoli del separatore hanno una priorità inferiore (per esempio 999) in modo che rispettino la larghezza minima dei pannelli che dà anche un buon effetto di pannelli che tornano alle loro dimensioni se c'è più spazio
• Quando si aggiunge o si rimuove un i pannelli rimuovono i vincoli e li aggiungono di nuovo per tutti i pannelli e separatori. Questo punto può essere migliorato per preservare le dimensioni di pannelli o animazioni esistenti.

Qui è un diagramma greggia:

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

Answer 2

sarei messa a punto ogni vista + vincoli in un XI ter separata e utilizzare Massoneria per la creazione di semplici vincoli AutoLayouting in codice per i vincoli tra i punti di vista.

Answer 3

Avrei un ViewController responsabile della gestione e del ridimensionamento dei controller di visualizzazione che avresti aggiunto.

Quindi aggiungerei i controller di visualizzazione e le relative viste al controller di visualizzazione principale.

Così, un paio di cose è necessario prestare attenzione a:

• Se si utilizza la configurazione automatica è necessario aggiungere le vostre opinioni da vista controllori con vincoli, in modo che quando cambia la dimensione, il contenuto di guarda anche i cambiamenti.
• Se non si utilizza il layout automatico che si potrebbe desiderare di fare alcuni cambiamenti quando la dimensione modifiche, e si può fare che nel viewDidLayoutSubviews
• È inoltre possibile utilizzare viewDidLayoutSubViews se è necessario regolare le dimensioni di tableviews/collectionviews

Answer 4

Non vorrei utilizzare ContainerViewController di Storyboard. Quelli sono più progettati per essere utilizzati su storyboard quando sai già quanti controller devono essere sullo schermo. Si desidera invece aggiungere i controller di rimozione in modo dinamico nel codice.

Per prima cosa implementare un controller che gestisca viste semplici (riquadri). Metti tutta la tua logica in essere in grado di aggiungere un riquadro, rimuoverlo e ridimensionare le viste già presenti quando un nuovo pannello viene aggiunto/rimosso. Non utilizzerei nemmeno i vincoli, sarà troppo complicato. Quando aggiungi un riquadro dovresti sapere quali lati della vista lo circondano, afferrali e aggiungi vincoli. Quando si rimuove un pannello, è necessario rimuovere anche alcuni vincoli (non tutti) di alcuni pannelli .. troppo.

Tuttavia, se si utilizzano i frame è possibile semplicemente creare un'equazione che occupa la larghezza e l'altezza del contenitore e ricalcola tutti i fotogrammi della vista.

Una volta che avete che il lavoro, è sufficiente aggiungere controllori in quei riquadri (visualizzazioni) come:

//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]; 

Infine, date un'occhiata a questa libreria: https://github.com/yatsu/treemapkit

E 'stato fatto 3 anni fa, ma L'ho usato in un progetto e ha funzionato bene. Ti dà tutta la logica per disegnare viste con dimensioni diverse sullo schermo in base a una matrice di valori. Aggiungi e rimuovi riquadri con questo e usa i delegati per restituire celle (riquadri) con il controller già aggiunto.

Answer 5

Una soluzione semplice sarebbe quella di creare e gestire UIViews che sono a loro volta gestite da un'unica ViewController. È possibile ottenere le varie dimensioni e l'effetto affiancato utilizzando lo strumento di proporzioni Auto Layout per ridimensionare. Per creare nuove tessere potresti ottenere un numero casuale tra un intervallo impostato per ottenere dimensioni diverse.