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: 