Container view for a screen with multiple tableviews in iOS?

Question

I have a UI as shown in the screenshot. I have currently done this using tableviews. The screen is a tableview with static prototype cell 4 rows. One for the header including the profile image, next for the profile bio, third row for the favourites, subscriptions, event image button, and last row for the content which is another tableview.

Favourite section

Subscription section

I have used a single inner table view for the content with all elements in the favourites, subscriptions, and events in one cell. One load, I hide other elements and show only the one depending on the icon tap.

The problem is the cell height is inconsistent in favourites section. There is gap when there is more than one line in the label. In the subscriptions section, the last item touches the tabbar.

I have disabled scrolling for the outer table view, so only the inner table view (content section) scrolls, which is not pleasant on smaller screens.

class ProfileViewController: UITableViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        profileTableView = ProfileSectionTableView()  // inner table view
        profileTableView.profileDelegate = self
        profileSectionTableView.delegate = profileTableView
        profileSectionTableView.dataSource = profileTableView
        profileSectionTableView.rowHeight = UITableView.automaticDimension
        profileSectionTableView.estimatedRowHeight = 44
    }

    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        switch (indexPath.row) {
        case 0:
            return 176
        case 1:
            return 72
        case 2:
            let height = self.view.frame.height - (176 + 72 + (self.tabBarController?.tabBar.frame.height)! + 8)
            return height
        default:
            return UITableView.automaticDimension
        }
    }

    override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        return 44
    }
}

The content section table view code is:

class ProfileSectionTableView: UITableView, UITableViewDelegate, UITableViewDataSource, ProfileSectionViewDelegate {
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        let cell = updateTableCell(tableView, indexPath) as! ProfileCell
        var height = UITableView.automaticDimension
        if (ProfileData.profileViewType == .favourite) {
            height = cell.favouritesTitleLabel.text!.height(withConstrainedWidth: cell.favouritesTitleLabel.frame.width - 64, font: UIFont(name: "Roboto", size: 17.0)!) + 28
        } else if (ProfileData.profileViewType == .subscription) {
            height = cell.subscriptionTitleLabel.text!.height(withConstrainedWidth: cell.subscriptionTitleLabel.frame.width - 64, font: UIFont(name: "Roboto", size: 17.0)!) + 16
        }
        return height
    }

    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }

    // ...
}

extension String {
    func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
        let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
        let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [.font: font], context: nil)

        return ceil(boundingBox.height)
    }
}

How to fix the gap between the cells? I have label lines set as 0. How to layout UI elements for screens like this? Is the above method correct? Or should I use a UIViewController with a container view for the sections?

Related question on this How to change the cell height of inner table view cell in iOS?

score 1 · Answer 1 · answered Feb 24 '19 at 10:09

Dependent your work, i am friendly with only tableView in screen. Then setup tableView with composionSection:[[String:Any]] data; either item is data of section. ex: Favourites, Subscription ... For section: i setup keyId for section, headSection, footer section, of course cell section. you can scroll to top section for an other section.

For example:

// MARK: UITableViewDataSource

var composionSection = [[String: Any]]() 

extension CountryDetailViewController: UITableViewDataSource {
func numberOfSections(in tableView: UITableView) -> Int {
    return composionSection.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    if let componentSection = self.composionSection[section] as? [String:Any]{
        if let keyId = componentSection[kId] as? String, let object = componentSection[kObject] as? [String:Any] {
            if keyId == kFavourites || keyId == kSubscription{
                return object.count
            }
        }
    }
    return 0
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if let componentSection = self.composionSection[indexPath.section] as? [String:Any]{
        if let keyId = componentSection[kId] as? String, let object = componentSection[kObject] as? [String:Any] {
            if keyId == kFavourites {
                let cell = tableView.dequeueReusableCell(withIdentifier: identifierForViewCell, for: indexPath) as! ViewFavourites
                return cell
            }
            else if keyId == kSubscription {
                let cell = tableView.dequeueReusableCell(withIdentifier: identifierForViewCell, for: indexPath) as! ViewSubscription
                return cell
            }
        }
    }
    return UITableViewCell()
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return UITableView.automaticDimension
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    if let componentSection = self.composionSection[section] as? [String:Any]{
        if let keyId = componentSection[kId] as? String, let object = componentSection[kObject] as? [String:Any] {
            if keyId == kFavourites {
                let sectionView = UIView()
                return sectionView
            }
            else if keyId == kSubscription {
                let sectionView = UIView()
                return sectionView
            }
        }
    }
    return nil
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    if let componentSection = self.composionSection[section] as? [String:Any] {
        if let keyId = componentSection[kId] as? String {
            if keyId == kFavourites {
                return 80
            }
            else if keyId == kSubscription {
                return 64 // or other
            }
        }
    }
    return 0
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return CGFloat.leastNormalMagnitude
}

Container view for a screen with multiple tableviews in iOS?

1 Answers1