iOS导航栏

iOS7之后UI发生大变化。apple鼓励开发者进行全屏设计,这些并在UI的一些特性上也有所表现。

1.屏幕坐标起始点的变化
新建一个UIViewController并作为项目的RootController,在其View顶部添加一个UILabel,frame=(0,0,200,20)如图:

bar01.png

可以发现label与导航栏发生了重叠,由此可以推知:

iOS7后,坐标(0, 0)从整个屏幕的左上顶点开始计算。

当我们在该UIViewController外套一个UINavigationController后显示如图:


bar02.png

整个label被UINavigationBar覆盖了。

利用检测任意view的subviews的关系树一文中提供的工具方法打印keyWIndow的subViews树:如图

bar03.png

由上图可以知晓:

UINavigationBar的高度依旧是44px,
 其子View: UINavigationBarBackground高度为64px,origin.y=-20,
所以UINavigationBarBackground充当了状态栏和导航栏的背景。这也解释了通过修改UINavigationBar背景来改变导航栏背景的原理。

我们为UINavigationBar添加背景图片:如图

bar04.png

此时打印视图树,如图:

bar05.png

label视图出现在了导航栏下方,该效果由UIViewController的一个属性决定的:extendedLayoutIncludesOpaqueBars,这个属性指定了当Bar使用了不透明图片时,视图是否延伸至Bar所在区域,默认值时NO。如果把这个属性设置为YES,那么视图将会延伸至导航栏区域,即使我们把导航栏设置成了自定义背景。

1, 通过修改UINavigationBar的背景可以来修改状态栏背景
2, 当UIViewController. extendedLayoutIncludesOpaqueBars = NO 时,UINavigationBar添加背景图片后,UIViewController的视图的原点坐标为(0, 64), 下移了64px,并且高度缩减了64px。

通过设置UIViewController的属性:edgesForExtendedLayout来使label出现在导航栏下方:

self.edgesForExtendedLayout = UIExtendedEdgeNone;

如图:视图不会再延伸到导航栏后面了

bar06.png
bar07.png

可以发现界面的变化,由此得出:

与为UINavigationBar添加背景图片效果相同
当视图中存在UIScrollView时

1,存在唯一一个UIScrollView或者其子类时:<注意唯一一个>

  • ScrollView为添加的第一个子视图
    代码:
override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.whiteColor()

         /*****添加顶部UITableView*****/
        let table = UITableView.init(frame: self.view.bounds, style: .Plain);
        table.delegate = self;
        table.dataSource = self;
        self.view .addSubview(table)
        
        self.automaticallyAdjustsScrollViewInsets = true;
  
        /*****添加顶部UILabel*****/
        let label = UILabel.init(frame: CGRectMake(0, 0, 200, 20))
        label.text = "I am a label";
        self.view .addSubview(label)
    }

效果和视图树如图:

bar08.png

bar09.png

分析:
以上代码self.automaticallyAdjustsScrollViewInsets = true;,其中属性automaticallyAdjustsScrollViewInsets默认为true; 当其值为true时,如果视图里面存在唯一一个UIScrollView或其子类View,那么它会自动设置相应的内边距,但是不会重置scrollView的frame,这样可以让scroll占据整个视图,又不会让导航栏遮盖。

  • ScrollView不是添加的第一个子视图或者不止一个ScrollView
    代码:
 override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.whiteColor()
        
        /*****添加顶部UILabel*****/
        let label = UILabel.init(frame: CGRectMake(0, 0, 200, 20))
        label.text = "I am a label";
        self.view .addSubview(label)
        
         /*****添加顶部Table*****/
        let table = UITableView.init(frame: self.view.bounds, style: .Plain);
        table.delegate = self;
        table.dataSource = self;
        self.view .addSubview(table)
        
        self.automaticallyAdjustsScrollViewInsets = true;
    }

本次是先添加label然后添加ScrollView,其效果和子视图如图:

bar11.png
bar10.png

分析:代码self.automaticallyAdjustsScrollViewInsets = true;失效了。

此时我门可以使用属性:self.edgesForExtendedLayout = UIExtendedEdgeNone;,然后将ScrollView的高相应的缩减64px,来达到目的。

总结

iOS7之后apple鼓励开发者使用全屏布局,这样导致了视图的原点(0,0)为屏幕左上顶点,而不再是状态栏左下位置开始。

UIViewController的属性:

extendedLayoutIncludesOpaqueBars, 默认为false,
说明:这个属性指定了当Bar使用了不透明图片时,视图是否延伸至Bar所在区域,默认值时false。
所以我们如果自定义了导航栏的背景图片,那么视图会从导航栏以下开始,不会延伸到导航栏区域。
如果把这个属性设置为true,那么视图将会延伸至导航栏区域,即使我们把导航栏设置成了自定义背景

edgesForExtendedLayout, 默认为UIExtendedEdgeNone,
说明: 这个属性指定边缘要延伸的方向。
因为iOS7鼓励全屏布局,它的默认值很自然地是UIRectEdgeAll,四周边缘均延伸,就是说,如果即使视图中上有navigationBar,下有tabBar,那么视图仍会延伸覆盖到四周的区域。

automaticallyAdjustsScrollViewInsets, 默认为true
当设置为YES时(默认YES),如果视图里面存在唯一一个且为第一个加入视图的UIScrollView或其子类View,那么它会自动设置相应的内边距,这样可以让scroll占据整个视图,又不会让导航栏遮盖。若ScrollView不止一个或者不是第一个加入子视图则该属性将失效。

导航栏图片背景

添加背景图片

 self.navigationController?.navigationBar .setBackgroundImage(UIImage.init(imageLiteral: "barbar66.png"), forBarPosition: UIBarPosition.Top, barMetrics: UIBarMetrics.Default)

1,作为导航背景的图片:该图片是一个@2x图片:160*88

barbar88@2x.png

效果如图:

bar12.png

2,将图片换成barbar66@2x.png:160*66
效果如图:

bar13.png

3,将图片换成barbar100@2x.png:182*100
效果如图:

bar14.png

4,将图片换成barbar100@2x.png:182*128
效果如图:

bar15.png

5,将图片换成barbar228@2x.png:415*228
效果如图:

bar16.png

有以上结果可见:
假设图片高度为h,

  1. 当h<88 或者 88<h<128时,纵向横向平铺,覆盖导航栏
  2. 当h=88时,横向平铺,不覆盖导航栏
  3. 当h=128时,横向平铺,覆盖导航栏
  4. 当h>128时,纵向截取,横向平铺,覆盖导航栏

得到以上结论的前提是:所有图片是@2x图。关于一倍图,无论何种情况都是横向平铺纵向拉伸。

有关参数:BarPosition和barMetrics的确切作用目前还不十分清楚,等弄清楚了后续补充。

附上UINavigationBar的扩展,内涵:bar去下边线,bar透明,bar恢复默认状态等。见地址:http://pan.baidu.com/s/1i4UqdFJ

以上内容如有不足或错误欢迎指正留言。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容

  • 参考文章 navigationItem UINavigationItem UINavigationBar UIBa...
    刘大帅阅读 52,533评论 37 147
  • 一点说明:本文中“导航控制器”区别于“视图控制器”存在 UINavigationController UINavi...
    WeiHing阅读 4,987评论 0 11
  • 最近项目里有个需求和导航栏的样式定制有关,深入之后发现之前理解的一些概念有些模糊,刚好趁着这次机会全面整理了一下。...
    Kevin追梦先生阅读 481评论 0 0
  • 最近项目里有个需求和导航栏的样式定制有关,深入之后发现之前理解的一些概念有些模糊,刚好趁着这次机会全面整理了一下。...
    hi_xgb阅读 4,986评论 4 39
  • 这个时代不缺聪明的人,用心的人却不多。 真正的勤奋来自于一个人的内心深处,对于那些无法获得即刻回报的事情,依然能够...
    筱南爱吃肥肉阅读 160评论 0 1