iOS AutoLayout issue(Tabman & SnapKit): Having trouble aligning the bottom of one container with the top of safe area

91 Views Asked by At

I'm having problems with autolayout(I'm using SnapKit).

I use Tabman (Tabman doc is here) to create my Home View.

I use Tabman's API to create custom layout for tabs.

Here is my code:

import UIKit
import Tabman
import Pageboy
import SnapKit

class HomeViewController: TabmanViewController {
    enum Tab: String, CaseIterable {
        case follow
        case explore
    }
    
    private let tabItems = Tab.allCases.map({ BarItem(for: $0) })
    private lazy var viewControllers = tabItems.compactMap({ $0.makeViewController() })
    let tabBar = HomeViewTabBar.make()
    let barContainer = UIView()
    var searchBar = HomeSearchBarView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // PageView dataSource and delegate
        self.dataSource = self
        view.backgroundColor = .systemBackground
        setupSearchBarLayout()
        setupBarContainerLayout()
        setupTabBar()
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        tabBar.layer.masksToBounds = false
    }
    
    private func setupSearchBarLayout(){
        view.addSubview(searchBar)
        searchBar.translatesAutoresizingMaskIntoConstraints = false
        searchBar.snp.makeConstraints{ make -> Void in
            make.top.equalTo(self.view).offset(self.view.statusBarHeight)
            make.left.equalTo(self.view.safeAreaLayoutGuide)
            make.right.equalTo(self.view.safeAreaLayoutGuide)
            make.bottom.equalTo(self.searchBar.snp.top).offset(self.view.statusBarHeight)
        }
    }
    
    private func setupBarContainerLayout(){
        view.addSubview(barContainer)
        barContainer.snp.makeConstraints{ make -> Void in
            make.top.equalTo(self.searchBar.snp.bottom)
            make.left.equalTo(self.view.safeAreaLayoutGuide)
            make.right.equalTo(self.view.safeAreaLayoutGuide)
            make.bottom.equalTo(self.view.safeAreaLayoutGuide.snp.top)
        }
    }
    
    private func setupTabBar(){
        addBar(tabBar, dataSource: self, at: .custom(view: barContainer, layout: { bar in
            bar.translatesAutoresizingMaskIntoConstraints = false
            NSLayoutConstraint.activate([
                bar.topAnchor.constraint(equalTo: self.barContainer.topAnchor),
                bar.centerXAnchor.constraint(equalTo: self.barContainer.centerXAnchor)
            ])
        }))
    }
    
}

So in the code above, I create a container for the tab bar to use Tabman custom layout

And I and tried to alight the container's bottom aligning the bottom of one container with the top of the next container: make.bottom.equalTo(self.view.safeAreaLayoutGuide.snp.top) but this just got me autolayout conflict. After I deleted it, everything gose fine.

Can anyuone taught me, thanks!

Can you provide me with some fundamental explanations about autolayout

update: I have a search bar on the top of the screen, and then a tabbar conatiner for tabbar switching, and I use safe area to display my main content. Here it is: layout pic

0

There are 0 best solutions below