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实现mysql数据库增删改查

    利用python操作mysql数据库用法简单,环境配置容易,本文将实现对库增.删.改.查的简易封装!   1. 环境配置 安装第三方包  ,导入模块 mysql.connector  pip inst ...

  2. 排序算法之插入排序的python实现

    插入排序的工作原理如下: (1)从数组第一个元素开始(0下标),从该元素开始进行构建有序序列: (2)取出待排序列中第一个元素,然后从“有序”序列中,从后往前扫描: (3)如果该元素(有序序列)大于待 ...

  3. Java连载81-枚举类型,生成五个不重复的随机数,集合简介

    一.枚举类型 1.枚举类型的格式就是enum+枚举类型的名称,可见下面的例子. package com.bjpowernode.java_learning; ​ public class D81_1_ ...

  4. CSS样式的优先级(权重)

    当使用不同的选择器选中同一个元素并设置相同样式时,这时样式间产生了冲突 最终采用的是哪个选择器? 由选择器的优先级(权重)决定,权重高的优先显示 优先级规则(多个按位置分别进行计算,不进位): 内联样 ...

  5. PyQt5信号与槽详解

    1.信号与槽函数基础'''信号与槽函数基础,信号是一个事件,发射信号之后槽函数就会执行'''from PyQt5.QtWidgets import *import sys class signal(Q ...

  6. pom.xml文件中properties有什么用

    properties标签的作用: 在标签内可以把版本号作为变量进行声明,后面dependency中用到版本号时可以用${变量名}的形式代替,这样做的好处是:当版本号发生改变时,只有更新properti ...

  7. node.js+mysql环境搭建

    https://www.jianshu.com/p/9b338095cbe8 node.js+mysql环境搭建 0x01 前言 随着html web技术的发展,和全栈式开发的需求,对于前端人员来讲, ...

  8. leetcode 0205

    目录 700 二叉搜索树中的搜索 175 组合两个表 仍旧不理解 left join 590. N叉树的后序遍历 递归: 迭代: 589 N叉树的前序遍历 递归, 注意 递归 过程中附带的 actio ...

  9. 疫情对国内5G发展的影响

    导读 2020年春节期间,“新型冠状病毒”引发了自SARS之后又一次全国性疫情,而世卫组织也将之列为国际关注的突发公共卫生事件,随后多国发布了针对中国的旅行警告和入境限制,从当前情况来看,疫情对中国各 ...

  10. vue.js 第八课

    列表渲染 v-for template v-for 数组变动检查 变异方法 替换数组 track-by track-by $index 问题 对象 v-for 值域 v-for 显示过滤/排序的结果 ...