SearchController.searchBar的三种UI布局应用案例:
应用在导航栏2级以上层级位置(非首页)
UI-1: 放置在UITableView的tableHeaderView视图的位置
优点: 搜索框可以跟随tableView视图一起进行垂直方向滑动;
代码:
tableView.tableHeaderView = _searchController.searchBar;
如图:
- 与列表中间有一条分隔线;
- 在列表视图置顶时,搜索框会暂时隐藏;
UI-2:放置在导航栏,且在返回按钮下方
优点:无分隔线(UI-1升级版,可设置搜索框滚动时不隐藏);
缺点:需要iOS11以上版本才支持;
代码:
if (@available(iOS 11.0, *)) {
self.navigationItem.searchController = _searchController;
// 如下设置,可一直显示搜索框
self.navigationItem.hidesSearchBarWhenScrolling = false;
}
如图:
何必曰(笔者):第一种方案兼容更多版本,但第二种方案拥有很多可设置的属性,用法上设置自定义时更灵活些
UI-3:放置在导航栏的标题位置
优点:位置居中 ;
代码:
self.navigationItem.titleView = _searchController.searchBar;
如图:
其实UI布局以上说的,仅仅是简单应用,更多的还是需要去因需而创:
直接自定义导航栏(更灵活);
使用系统原生的控件,可以使用每次WWDC带来的一点🤏新意(虽然不多)。这“不够新意”或许会让我们去怀念
乔歩斯-以及OneMoreThing的特场秀~