首页 > 系统 > iOS > 正文

详解iOS11关于导航栏问题

2020-02-19 15:44:53
字体:
来源:转载
供稿:网友

一般网站的导航栏都会在页面的顶部位置,这样用户可以在刚进入页面的时候进行选择,本文是武林技术频道小编为大家介绍的详解iOS11关于导航栏问题,一起来了解一下吧!

前言

iOS11导航栏除了新加入了largeTitles和searchController两个新特性,可能是加入largeTitles的原因其结构较iOS 10发生了些变化。

iOS11之前导航栏的navigationBarButton则直接添加在navigationBar上面

在iOS11之后,苹果添加了新的类来管理,可以看到titleView直接加在_UINavigationBarContentView上,UIBarButtonItem则添加在_UIButtonBarStackView上面,而_UIButtonBarStackView则添加在_UINavigationBarContentView上面,最后添加到UINavigationBar上面,如下图所示:

由于结构的变化,在iOS 11中我们自定义设置leftBarButtonItem,其点击区域变得很小,让人点的很焦灼,如下图绿色区域所示:

具体代码如下,设置的frame在这里并没有什么卵用,点击区域依然只有图片原本的size那么大:

    UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 40)];    [btn setImage:imageWhite forState:UIControlStateNormal];    [btn addTarget:self action:@selector(bpBack) forControlEvents:UIControlEventTouchUpInside];    btn.backgroundColor = [UIColor greenColor];    UIBarButtonItem *leftItem = [[UIBarButtonItem alloc] initWithCustomView:btn];    leftItem.width = 60;    self.navigationItem.leftBarButtonItem = leftItem;

为了能增加点击区域,我们就需要增加button的size,然后就想到通过改变ContentEdgeInsets来增大button的size,

... ... btn.backgroundColor = [UIColor greenColor]; if (@available(iOS 11.0,*)) {     [btn setContentMode:UIViewContentModeScaleToFill];     [btn setContentEdgeInsets:UIEdgeInsetsMake(0, 5, 5, 20)];  } UIBarButtonItem *leftItem = [[UIBarButtonItem alloc] initWithCustomView:btn];......

另:searchBar设置为titleview,会导致navigation的高度发生异常(ps:push到下一个界面,下个界面的view距离navigation出现了一段黑色区域)需要处理下:

  CGRect frame = CGRectMake(0, 0, 150, 44);  UISearchBar *search = [[UISearchBar alloc] initWithFrame:frame];  search.placeholder = @"搜索";  search.delegate = self;  UITextField *searchField=[search valueForKey:@"_searchField"];  searchField.backgroundColor = [UIColor groupTableViewBackgroundColor];// --- iOS 11异常处理  if(@available(iOS 11.0, *)) {    [[search.heightAnchor constraintEqualToConstant:44] setActive:YES];  }  self.navigationItem.titleView = search;

以上就是武林技术频道小编为大家带来的详解iOS11关于导航栏问题,这让许多伙伴都产生了共鸣,想要了解更多的伙伴,欢迎您关注js.Vevb.com吧!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表