How can I achieve following layout in iOS?

Question

I have a layout as follows for iOS app development.

The layout contains following parts:

1. Collapsing toolbar: This view should work like in android i.e. on scrolling it must be collapsed.
2. Tab menu: This is tab menu. On swiping, the tableview must be updated as per menu selected. On scrolling tab menu must be fixed at top.
3. Tableview : This is simply a tableview contains data as per menu selected in tab menu.
4. Bottom tab: This is UITabbarMenu.

I tried with following approach:

I used Pagingkit library for tab menu. I created height of vProductList (parent view of tabbar and tableview) to height of device screen.

The problem appeared when tableview was inside scrollview. The problem was tableview and scrollview acts differently on scrolling. So to remove this I disable scrolling of tableview at first and enabled in viewDidScroll method on condition that the tab menu view is at (0,0) point of screen. But, one has to scroll twice to get the effect. This felt glitchy. How can I achieve smooth scrolling with this approach? Is there any library that can solve this problem?

Answer 1

This is how you can work this out.

View Hierarchy:

You can use a UICollectionView to create the Tabbar. A UITableView to handle the data when a tab is selected. To handle the data in both UICollectionView and UITableView, create a ViewModel. Here is an example of how you can,

enum ListType: Int {
    case fruits, animals, vegetables
}

class ViewModel {
    let tabs: [ListType] = [.fruits, .animals, .vegetables]

    let fruits = ["Apple", "Banana", "Grapes", "Papaya", "Apple", "Banana", "Grapes", "Papaya", "Apple", "Banana", "Grapes", "Papaya"]
    let animals = ["Rabbit", "Monkey", "Bear", "Deer", "Rabbit", "Monkey", "Bear", "Deer", "Rabbit", "Monkey", "Bear", "Deer"]
    let vegetables = ["Carrot", "Potato", "Cucumber", "Spinach", "Carrot", "Potato", "Cucumber", "Spinach", "Carrot", "Potato", "Cucumber", "Spinach"]

    func numberOfTabs() -> Int {
        return self.tabs.count
    }

    func tab(at index: Int) -> ListType {
        return self.tabs[index]
    }

    func numberOfRows(for listType: ListType) -> Int {
        switch listType {
        case .fruits: return fruits.count
        case .animals: return animals.count
        case .vegetables: return vegetables.count
        }
    }

    func element(at index: Int, for listType: ListType) -> String? {
        switch listType {
        case .fruits: return fruits[index]
        case .animals: return animals[index]
        case .vegetables: return vegetables[index]
        }
    }
}

In the above code, I’ve created

1. an enum ListType that identifies the types of tabs in collectionView and the data that is to be presented in the tableView.
2. a class ViewModel that handles the dataSource for both collectionView and tableView.

Let’s create a UIViewController with some outlets, i.e.

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var collapsingViewHeightConstraint: NSLayoutConstraint!

    private let viewModel = ViewModel()
    private var lastContentOffset: CGFloat = 0.0

    override func viewDidLoad() {
        super.viewDidLoad()
        self.collectionView.selectItem(at: IndexPath(row: 0, section: 0), animated: false, scrollPosition: .left)
    }
}

Add the methods for UITableViewDataSource

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if let selectedIndex = self.collectionView.indexPathsForSelectedItems?.first?.row, let listType = ListType(rawValue: selectedIndex) {
            return self.viewModel.numberOfRows(for: listType)
        }
        return 0
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let selectedIndex = self.collectionView.indexPathsForSelectedItems?.first?.row, let listType = ListType(rawValue: selectedIndex) {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
            cell.textLabel?.text = self.viewModel.element(at: indexPath.row, for: listType)
            return cell
        }
        return UITableViewCell()
    }
}

UICollectionViewDataSource and UICollectionViewDelegate methods

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.viewModel.numberOfTabs()
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CustomCollectionCell
        cell.textLabel.text = String(describing: self.viewModel.tab(at: indexPath.row)).capitalized
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        collectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
        self.tableView.reloadData()
    }
}

To handle the collapsing view on tableView scroll, implement scrollViewDidScroll(_:) method and handle the collapse and expand based on the lastContentOffset of the tableView, i.e.

extension ViewController: UITableViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == self.tableView {
            if (scrollView.contentOffset.y >= (scrollView.contentSize.height - scrollView.frame.size.height)) {
                //Scrolled to bottom
                UIView.animate(withDuration: 0.3) {
                    self.collapsingViewHeightConstraint.constant = 0.0
                    self.view.layoutIfNeeded()
                }
            }
            else if (scrollView.contentOffset.y < self.lastContentOffset || scrollView.contentOffset.y <= 0) && (self.collapsingViewHeightConstraint.constant != 150.0)  {
                //Scrolling up, scrolled to top
                UIView.animate(withDuration: 0.3) {
                    self.collapsingViewHeightConstraint.constant = 150.0
                    self.view.layoutIfNeeded()
                }
            }
            else if (scrollView.contentOffset.y > self.lastContentOffset) && self.collapsingViewHeightConstraint.constant != 0.0 {
                //Scrolling down
                UIView.animate(withDuration: 0.3) {
                    self.collapsingViewHeightConstraint.constant = 0.0
                    self.view.layoutIfNeeded()
                }
            }
            self.lastContentOffset = scrollView.contentOffset.y
        }
    }
}