如何实现上下滚动时导航栏搜索栏完全显示/隐藏?
解决导航栏SearchBar滚动时仅完全显示/隐藏的问题
系统默认实现方案(无需手动写代理)
- 用UISearchController配合系统属性
如果你是通过UISearchController将搜索栏嵌入导航栏,设置searchController.hidesNavigationBarDuringPresentation = false,再结合导航栏的prefersLargeTitles(如果使用大标题样式),系统会自动处理滚动时的显示逻辑,避免出现部分露出的情况。 - 将SearchBar设为导航栏titleView
直接把UISearchBar赋值给navigationItem.titleView,这种方式下,滚动时导航栏的整体显示/隐藏会带动搜索栏同步变化,不会出现半露的状态,Notes、WhatsApp这类App大多采用这种实现。
自定义逻辑方案(scrollViewDidScroll实现)
如果上述默认方式不符合你的需求,再通过滚动代理手动控制:
- 在
scrollViewDidScroll方法中监听滚动偏移量 - 以搜索栏的高度为临界值,判断滚动方向和偏移量
- 超过临界值时完全隐藏导航栏(或搜索栏),反之则完全显示
示例代码:
func scrollViewDidScroll(_ scrollView: UIScrollView) { let searchBarHeight = navigationItem.titleView?.frame.height ?? 44 let offsetY = scrollView.contentOffset.y // 根据实际需求调整判断逻辑,比如加入滚动方向判断避免频繁切换 if offsetY > searchBarHeight { navigationController?.setNavigationBarHidden(true, animated: true) } else { navigationController?.setNavigationBarHidden(false, animated: true) } }
内容的提问来源于stack exchange,提问作者JN0514
相关产品推荐
相关产品推荐

