在navigationController的navigationBar上添加UISearchBar

很多项目上的需求都是在navigationBar下面添加一个UISearchBar,之前我这个项目也是,但是需求改了,要求加到navabar上去,好吧,那就做呗,无非就是将UISearchBar加到navigationItem的titleView上去(这里用的是原生的,被没有自定义navigationBar),但是真做起来坑还是比较多的

我这个项目是用的UISearchViewController,回头会将searchController.searchBar添加上去.如果是自定的UISearchBar,我倒是没有试过.

首先来看下效果图:


在navigationController的navigationBar上添加UISearchBar_第1张图片
A395CEA1046907BE5FC6ADB3C6413179.png

需求是这样:


在navigationController的navigationBar上添加UISearchBar_第2张图片
BD873EB92075DFDE81B5CA4B1CF79629.png

现在我们来开始说我遇见的坑吧

一. 无法设置searchBar的大小,反正会很长.

解决方案: 自定义一个view,将searchBar添加到view上,然后将view设置为titleView即可解决问题,不妨试试调整view的大小看看效果,注意,约束的时候是贴边的.
UIView *titView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 300, 40)]; titView.backgroundColor = [UIColor colorWithRed:9/255.0 green:87/255.0 blue:131/255.0 alpha:1]; self.titView = titView; [titView addSubview:self.searchController.searchBar]; [self.searchController.searchBar mas_makeConstraints:^(MASConstraintMaker *make) { make.left.top.right.bottom.equalTo(titView); }];

二. 设置完searchBar的背景颜色会出现上下两条黑线(图就不截了)

解决方案:
// 去除searchbar上下两条黑线及设置背景 self.searchController.searchBar.barTintColor = [UIColor colorWithRed:9/255.0 green:87/255.0 blue:131/255.0 alpha:1]; UIImageView *barImageView = [[[self.searchController.searchBar.subviews firstObject] subviews] firstObject]; barImageView.layer.borderColor = [UIColor colorWithRed:9/255.0 green:87/255.0 blue:131/255.0 alpha:1].CGColor; barImageView.layer.borderWidth = 1;

三. 这是最坑的地方,点击searchBar,searchBar会出现下移的问题

先看图:
!!!注意现在的searchBar已经超出了navigationBar.

在navigationController的navigationBar上添加UISearchBar_第3张图片
A2CD50D2221002A57193F51B12FB3F31.png

这个问题我查找了一上午的资料,但是没有找到合适的,最后自己瞎蒙了一下把问题解决了,如何有更合适的解决方案,希望能告知我,大家共同学习,共同进步.
解决方案: 在searchBar的代理方法里面更新约束即可.
-(void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar { [self.searchController.searchBar mas_updateConstraints:^(MASConstraintMaker *make) { make.left.right.equalTo(self.titView); make.top.equalTo(self.titView).offset(-2); make.bottom.equalTo(self.titView).offset(-2); }]; }

最后贴上效果图吧

在navigationController的navigationBar上添加UISearchBar_第4张图片
CC018F864CB97487630F4C3D9AF8F4FC.png
在navigationController的navigationBar上添加UISearchBar_第5张图片
6FA72D1A09D024A9637E15841C14D87C.png

因为我看网上很少说这块内容的,所以就简单写一下,希望能够帮到正在阅读的你!!!

你可能感兴趣的:(在navigationController的navigationBar上添加UISearchBar)