iOS with UICollectionView how to achieve this type of layout

Question

Requirement:

• I should be able to scroll entire view if left view is visible or not (all components should scroll at a time if i scroll anywhere with in the view).
• By clicking on show/hide left view button button it should be able to hide or show left view.
• In cell (only cell not left view) there is a expand/collapse functionality (i can increase/decrease cell height)
• And If i change font size in device settings app, it should be effect here also(So supporting dynamic font size)

What i have tried:

I have tried with tableview, scroll view but no luck. Finally want to try with collection view, can any one please help me out how to proceed with collection view. And in future do we get any complications if we use collection view.

Answer 1

Best Approach.

1. Your UI hierarchy should be like this.

StackView

CollectionView

TableView

Note: You can take both CollectionView or TableView but I prefer both different so that I don't need to put condition in delegates & datasource and I can manage easily. Choice is your's what you like to prefer.

2. Now your UI design looks like this

   • Green color button is used to show hide your left collectionview (you mentioned in your post).

3. Set your datas in CollectionView and TableView as per your requirement.

4. To toggle left menu, just use below one line code on greenButton action.

   @IBAction func btnToggle(_ sender: Any) {
       colView.isHidden = !colView.isHidden 
   }
   

5. For simple animation

   @IBAction func btnToggle(_ sender: Any) {
       UIView.animate(withDuration: 0.3) {            
           self.colView.isHidden = !self.colView.isHidden
       }
   }
   

Output:

Edit

You can take stackView in scrollview and turn off colview, tblView scrolling. Check below :

1. UI heirarchy

2. Additional code work

   override func viewDidAppear(_ animated: Bool) {
       super.viewDidAppear(animated)
       colView.isScrollEnabled = false
       tblView.isScrollEnabled = false
   
       colView.reloadData()
       tblView.reloadData()
   
       scrollView.contentSize = CGSize(width: self.view.frame.width,
                                       height:  max(colView.contentSize.height, tblView.contentSize.height))
       stackHeight.constant = scrollView.contentSize.height
   
   }
   

Note : It may cause some unexpected output (can be / can not be), so you need to take care of it.

Output:

Answer 2

What you need is UICollectionView with custom layout. You can achieve the effect you need using this approach.

There is tone of tutorials how to implement own custom layout. Here is one of them