如何将 UIView 固定在 iOS 11 NavigationBar 不断变化的高度框架下方?
How to pin a UIView underneath the iOS 11 NavigationBar's changing height frame?
我有一个导航栏和一个 collection 视图以编程方式添加到我的应用程序中,我也在尝试添加一个自定义视图。我已经让视图位于 collection 视图上方和导航栏下方,这是我想要的,但是,在 iOS 11 上,导航栏的高度会发生变化,具体取决于您是否拉伸collection 往下看。我也想让视图向下移动,这样 collection 视图和导航栏之间就没有空白 space 了,因为我的自定义视图不会进一步向下移动,因为视图的 safeInsets不要换。它将向上移动到折叠标题,这不是问题。
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.title = "Home"
navigationController?.navigationBar.prefersLargeTitles = true
collectionView?.backgroundColor = UIColor.white
collectionView?.translatesAutoresizingMaskIntoConstraints = false
//collectionView?.contentInset = UIEdgeInsets(top: 50, left: 0, bottom: 0, right: 0)
//collectionView?.scrollIndicatorInsets = UIEdgeInsets(top: 50, left: 0, bottom: 0, right: 0)
collectionView?.register(StockCell.self, forCellWithReuseIdentifier: "cellid")
setupMenuBar()
}
let menuBar: MenuBar = {
let mb = MenuBar()
mb.translatesAutoresizingMaskIntoConstraints = false
mb.backgroundColor = .black
return mb
}()
private func setupMenuBar() {
view.addSubview(menuBar)
NSLayoutConstraint.activate([
(collectionView?.topAnchor.constraint(equalTo: menuBar.bottomAnchor))!,
(collectionView?.widthAnchor.constraint(equalTo: view.widthAnchor))!,
(collectionView?.bottomAnchor.constraint(equalTo: view.bottomAnchor))!,
menuBar.heightAnchor.constraint(equalToConstant: 50),
menuBar.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1),
menuBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)
])
}
This is the starting screen, showing the view in its resting position
This is the navigation bar overlapping the view, which is what I want to fix
您可以将自定义菜单视图的底部锚点约束到导航栏的底部锚点;这样菜单视图将始终保持相同的垂直偏移(不过您可能必须熟悉其他一些约束):
navigationController!.navigationBar.bottomAnchor.constraint(equalTo: menuBar.bottomAnchor)
有关扩展示例,请参阅 。
我找到了一种解决方法,无需在导航栏和菜单栏之间使用约束,因为它们不在同一视图层次结构中。
override func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (scrollView.contentOffset.y < -50) {
let val = (-50 - scrollView.contentOffset.y)
menuBar.frame.origin.y = val - 0.5
}
}
通过覆盖此函数,菜单栏将向下移动其 y 偏移量,并在向下滚动集合视图时将固定功能保留在顶部。
我有一个导航栏和一个 collection 视图以编程方式添加到我的应用程序中,我也在尝试添加一个自定义视图。我已经让视图位于 collection 视图上方和导航栏下方,这是我想要的,但是,在 iOS 11 上,导航栏的高度会发生变化,具体取决于您是否拉伸collection 往下看。我也想让视图向下移动,这样 collection 视图和导航栏之间就没有空白 space 了,因为我的自定义视图不会进一步向下移动,因为视图的 safeInsets不要换。它将向上移动到折叠标题,这不是问题。
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.title = "Home"
navigationController?.navigationBar.prefersLargeTitles = true
collectionView?.backgroundColor = UIColor.white
collectionView?.translatesAutoresizingMaskIntoConstraints = false
//collectionView?.contentInset = UIEdgeInsets(top: 50, left: 0, bottom: 0, right: 0)
//collectionView?.scrollIndicatorInsets = UIEdgeInsets(top: 50, left: 0, bottom: 0, right: 0)
collectionView?.register(StockCell.self, forCellWithReuseIdentifier: "cellid")
setupMenuBar()
}
let menuBar: MenuBar = {
let mb = MenuBar()
mb.translatesAutoresizingMaskIntoConstraints = false
mb.backgroundColor = .black
return mb
}()
private func setupMenuBar() {
view.addSubview(menuBar)
NSLayoutConstraint.activate([
(collectionView?.topAnchor.constraint(equalTo: menuBar.bottomAnchor))!,
(collectionView?.widthAnchor.constraint(equalTo: view.widthAnchor))!,
(collectionView?.bottomAnchor.constraint(equalTo: view.bottomAnchor))!,
menuBar.heightAnchor.constraint(equalToConstant: 50),
menuBar.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1),
menuBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)
])
}
This is the starting screen, showing the view in its resting position
This is the navigation bar overlapping the view, which is what I want to fix
您可以将自定义菜单视图的底部锚点约束到导航栏的底部锚点;这样菜单视图将始终保持相同的垂直偏移(不过您可能必须熟悉其他一些约束):
navigationController!.navigationBar.bottomAnchor.constraint(equalTo: menuBar.bottomAnchor)
有关扩展示例,请参阅
我找到了一种解决方法,无需在导航栏和菜单栏之间使用约束,因为它们不在同一视图层次结构中。
override func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (scrollView.contentOffset.y < -50) {
let val = (-50 - scrollView.contentOffset.y)
menuBar.frame.origin.y = val - 0.5
}
}
通过覆盖此函数,菜单栏将向下移动其 y 偏移量,并在向下滚动集合视图时将固定功能保留在顶部。