iOS定制UISearchBar导航栏同步iOS11的方法

2020-01-21 03:19:09刘景俊

系统原生的UISearchBar在iOS 11经历了一次变革,高度由原来的44变成了56 (使用默认高度的估计都被坑了),样式也发生了些微的变化,比如在未输入状态下圆角变化,放大镜图标和文本的文字不再居中而是靠左了。具体看图

 

 
ios,UISearchBar,iOS11,定制导航栏,导航栏

 

一些主流App也常见在导航栏嵌入searchBar,以网易云音乐和知乎为例,左边是主页,右边是搜索页面 (注意光标)。

 

 
ios,UISearchBar,iOS11,定制导航栏,导航栏
 
ios,UISearchBar,iOS11,定制导航栏,导航栏

 

实现思路与案例

核心思想是设置导航栏的titleView和左右的barButtonItem。主要有3种方式

     首页导航栏的titleView使用button来实现,搜索页面使用searchBar。 首页和搜索页面导航栏的titleView都是用searchBar,searchBar的样式针对两个页面做不同的修改。这种方式可以重用我们定制的searchBar,减少冗余。 首页导航栏titleView使用button来实现,搜索页面的使用textField。这种方式更彻底,更灵活,相对也更复杂一些。

为什么上面的titleView说是button不是其他的?其他的当然也可以实现。button自带imageView和titleLabel,只需要设置偏移量更容易达到我们想要的,而且视图层级更少,在流畅性方面更有保证些。

案例

 

 
ios,UISearchBar,iOS11,定制导航栏,导航栏
 

 

ios,UISearchBar,iOS11,定制导航栏,导航栏

网易云音乐首页和搜索页面的导航栏视图层级,titleView都使用MCSearchBar来实现,并且设置了导航栏左右两边的按钮 。这类似上文所说的第二种思路。

 

 
ios,UISearchBar,iOS11,定制导航栏,导航栏 
 

 

ios,UISearchBar,iOS11,定制导航栏,导航栏