navigationItem的titleView属性的设置本身是很简单的,容易出问题的原因是自动化布局与frame混用造成的。

本文一步一步的讲解,力求找到问题的起源。如果你也在这块同样遇到问题,不妨耐下心来,一起看看怎么回事。

titleView这个属性默认值是nil。也就是说,它是不存在的。如果开发者使用[self.navigationItem.titleView addsubView:customView];是没有作用的,虽然OC语法采用的消息机制,向nil发送消息是不会出现异常的,但是这样做是不能将customView展现出来。

正确的姿势,是将customView对象赋值给titleView属性。那么customView对象的CGRect值如何设置呢?这是一个好问题,弄清楚这个问题之前,需要弄明白titleView的可用区域。

问题一:titleView的可用区域以及其所处位置

导航栏上面是状态栏(用来显示电池、时间等信息),状态栏的高度是20px。

导航栏的高度是44px(但是如果将UISearchController中的属性searchBar作为导航栏的titleView,在iOS11以后,导航栏的高度将不再是44,而是56。接下来的话,需要对导航栏上面的其他控件,比如返回按钮重新进行位置的调整)。

导航栏可以设置背景色(backgroundColor)、背景图片(background)、左按钮组(leftBarButtonItems)、右按钮组(rightBarButtonItems)、标题(title)、标题视图(titleView)。

它们之间的在可用区域的制衡上是这样的:如果设置了titleView,那么title就视为无效。导航栏中去除左按钮组占用的区域和右按钮组占用的区域之后,剩下的的横向区域才是留给titleView使用的。那titleView的纵向区域有多少呢?44px。

因此,customView的frame的orign不管为多少,都无济于事。titleView在乎的是customView的size,它会在titleView的可用区域内,尽量地保证customView在导航栏上居中(水平居中+竖直居中)。注意,不是在titleView的可用区域上居中!另外size的宽和高如果超出有效值,那么视为最大的有效值。

比如,如果设置customView的frame是(60,-20,200,80)。我们来分析下,首先,orign(60,-20)直接视为无效。然后通过左按钮组和右按钮组占用的区域,计算出来的横向可用值为270,那么200视为有效。有效的最大高度是44,这里设置的80,视为有效值的最大值即44。这样一系列的转换下来,用自然语言表达就是:customView的宽高为200*44,整体在导航栏上面地布局,请允许我用图形表示:

本来是想文字表述出来的,但是我觉得还是没有直接看图直观。

文章写到这里,需要稍微收拢下了,不然容易失去重心。接下来需要考虑的问题是,titleView的frame如何设置。

结论是这样的,事情本来很简单的,注意一点,如果用来赋值给titleView的customView使用frame,那么其内部的子view对象的布局也使用frame。如果customView使用masonry,那么其内部的子view对象布局也要使用masonry。

看下代码吧:

UIControl *bgView = [[UIControl alloc] initWithFrame:CGRectMake(, ,  , )];
bgView.backgroundColor = [UIColor redColor];
bgView.layer.cornerRadius = .f;
bgView.layer.masksToBounds = YES;
[bgView addTarget:self action:@selector(searchBeginAction) forControlEvents:UIControlEventTouchUpInside]; self.navigationItem.titleView = bgView;

或者是

 UIControl *bgView = [[UIControl alloc] initWithFrame:CGRectZero];
bgView.backgroundColor = [UIColor colorWithHexString:@"#4B9DDB"];
bgView.layer.cornerRadius = .f;
bgView.layer.masksToBounds = YES;
[bgView addTarget:self action:@selector(searchBeginAction)
forControlEvents:UIControlEventTouchUpInside];
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(SCREEN_WIDTH - , ));
}]; self.navigationItem.titleView = bgView; UIImageView *searchImage = [[UIImageView alloc] initWithImage:[UIImage
imageNamed:@"icon_nav_search"]];
[bgView addSubview:searchImage];
[searchImage mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(bgView).offset();
make.centerY.mas_equalTo(bgView);
make.size.mas_equalTo(CGSizeMake(, ));
}];
UITextField *searchTextField = [[UITextField alloc] init];
searchTextField.textColor = [UIColor colorWithHexString:@"#ffffff"];
searchTextField.userInteractionEnabled = NO;
searchTextField.font = SYSTEMFONT_14;
searchTextField.placeholder = @"搜感兴趣的活动";
[searchTextField setValue:[UIColor whiteColor] forKeyPath:@"_placeholderLabel.textColor"];
[bgView addSubview:searchTextField];
[searchTextField mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(searchImage.mas_right).offset();
make.centerY.mas_equalTo(bgView);
make.right.mas_equalTo(bgView.mas_right).offset(-);
}];

titleView发生偏移、titleView与masonry、titleView的设置、titleView的使用的更多相关文章

  1. swift项目第八天:自定义转场动画以及设置titleView的状态

    如图效果: 一:Home控制器 /* 总结:1:设置登陆状态下的导航栏的左右按钮:1:在viewDidLoad里用三目运算根据从父类继承的islogin的登陆标识来判断用户是否登陆来显示不同的界面.未 ...

  2. iOS 11 导航栏 item 偏移问题 和 Swift 下 UIButton 设置 title、image 显示问题

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  3. WinForm搭载ScintillaNET时文本由于发生偏移被隐藏解决方案

    项目用ScintillaNet搭载到WinForm以满足文本编辑的需求,在用FindReplace.Scintilla.Text=“显示内容”输出文本内容的时候会碰到文本被WinForm边框隐藏的情况 ...

  4. tableview 位置发生偏移

    状况描述:1.首次进入该界面时正常 2.push了新的界面后,再返回该界面 tableview和导航栏直接出现了间隔区域 tableview为代码创建 _tableView =  [[UITableV ...

  5. 在使用NavigationController情况下的布局的Y轴的起始位置

    在有的时候,当一个ViewController被push进一个NavigationController的时候,view上会有一个高度为64的NavigationBar(除非主动隐藏了Navigatio ...

  6. margin负边距的使用(超简单)

    写在开头: 在css的世界中,一切都是框,所有的框都处于流动的状态 margin负边距可以使文档流发生偏移   在没有设置margin-bottom的时候,parent的高度会跟随child的内部元素 ...

  7. iOS中navigationItem的titleView如何居中

    开发过程中,发现titleview很难居中,通过各种尝试终于找到了解决方法. 首先清楚你个概念: leftBarButtonItem,导航条中左侧button. rightBarButtonItem, ...

  8. 设置导航栏 self.navigationItem.titleView 居中

    喜欢交朋友的加:微信号 dwjluck2013-(void)viewDidLayoutSubviews{ [self setDisplayCustomTitleText:@"每日头条&quo ...

  9. (十六)WebGIS中偏移补偿量引发的问题之探讨

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章里讲解地图平移功能的实现时,我在最后提出了两个问题: ...

随机推荐

  1. 四、Python文件操作

    描述:Python的文件操作涉及对文件的读/写与编码的处理. 1.两种写法 1.1 第一种 1 f = open('文件路径', '文件操作方式', encoding='utf-8') 2 对文件操作 ...

  2. elasticsearch ik解析器

    ik解析器 1.      ik解析器 The IK Analysis plugin integrates Lucene IK analyzer (http://code.google.com/p/i ...

  3. Spring学习(九)

    JdbcTemplate需要的jar包 1.Spring核心必须依赖的库:commons-logging-1.1.1.jar2.Spring IoC部分核心库: spring-beans-4.3.9. ...

  4. EBCDIK,EBCDIC,ASCII,shift JIS間の変換

    http://itdoc.hitachi.co.jp/manuals/3020/3020759580/G5950334.HTM#ID01056

  5. kafka中常用API的简单JAVA代码

    通过之前<kafka分布式消息队列介绍以及集群安装>的介绍,对kafka有了初步的了解.本文主要讲述java代码中常用的操作. 准备:增加kafka依赖 <dependency> ...

  6. layui弹窗全屏显示

    var index =layer.open({ id: 'id', type: 2, area: ['100%', '100%'], fix: false, maxmin: true, shadeCl ...

  7. MBR扇区故障修复!

    一:进行分区且格式化硬盘 [root@roomc~]#mkfs -t ext4 /dev/sdb1    //格式化sdb1盘 二:模拟破坏/sda主硬盘破坏再修复! [root@roomc~]#mk ...

  8. Flask - 运行APP

    from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return 'Hello, ...

  9. python合并大量ts文件成mp4格式(ps:上限是450,亲测)

    import os #exec_str = r'copy /b ts/c9645620628078.ts+ts/c9645620628079.ts ts/1.ts' #os.system(exec_s ...

  10. laravel API

    /** * [api] * @author Foreach * @param string $method [请求方式] * @param string $url [地址] * @param arra ...