7、UIViewController导航栏

概述

上一节咱们算是跟UIViewController打了个招呼，同时也表示咱们正式介入iOS开发。本节咱们将介绍UI界面的一个经常使用元素：导航栏。

iOS为UIViewController提供了内置导航栏，其界面符合iOS系统主题，同时有系统进行辅助维护，是一个很是方便的导航栏。

可是，无论iOS提供了多么好用的导航栏，也没法赶的上开发者们的想象力，有时候咱们但愿自定义导航栏的样式，这时候咱们就须要本身定制导航栏了。

 

内嵌导航栏

咱们新建1个工程Charpter7EmbeddedNav

 

在Main.storyboard选中ViewController面板（对面板单击一下鼠标便可），而后选择Editor->Embed In->NavigationController。

 

因而咱们就获得了内嵌的导航栏了，咱们能够看到ViewController的顶部多出了1块阴影面积，那就是导航栏。 

点击导航栏，咱们就能够在右边的属性栏里修改导航栏属性（title等）了。

 

若是你不满意字体的大小颜色等，还能够点击Navigation Controller面板顶部区域，而后修改相应的属性。

运行结果以下

 

前面咱们说过，约束（AutoLayout）是开发静态页面的利器，可是对动态页面却无能为力，而代码却专长于此。添加以下图所示代码，它能够根据动态条件（好比人品），使用代码修改导航栏的标题及其颜色。其中arc4random()会返回1个整数介于0～4294967295（2^ 32-1)。至于个人人品好很差，此处就再也不展现了。

 

 

单单只玩1个标题，彷佛还不过瘾，因而咱们再拖入1个按钮

 

改为“+”的样子。

 

不过瘾，再来一个

 

不过瘾，再来。。。反正我过瘾了，大家继续玩。

有人可能会问，这些按钮尚未添加约束，要是运行在小屏iPhone上会不会被遮住呢？

答案是不会，理由很简单：内嵌导航栏，iOS本身管，咱们不用瞎操心，因此无需约束，并且也添加不了约束，不信你试试。

 

自定义导航栏

内嵌导航栏虽然功能强大，可是在人类的想（zuo）象（si）力面前，仍是略显无力。好比我吧，就很是迷信数学之美，我非得要把页面标题放在导航栏的黄金比例分割处（0.618），不然我就感到来自APP深深的敌意。

 

首先，咱们再新建1个工程Charpter7CustomNav，而后在ViewController面板上拖入1个View

 

给拖入的View添加约束：左/上/右边距0，高60

 

拖入1个label到刚刚添加的View中

 

修改为我要的标题内容

 

如今我要给标题添加这样两条约束：

(1) title.centerY = superview.centerY

(2) title.centerX = 0.618 * superview.width

其中约束（1）能够直接使用容器约束“Vertically in Container”，可是约束（2）须要咱们作一些修改。因而咱们先添加2条容器约束“Horizontailly in Container”和“Vertically in Containner”，而后再对“Horizontally in Container”进行修改来达到咱们的效果。

首先选中“正大光明”label，添加2条容器约束

 

当咱们想修改约束时“Horizongtally in Container”，发现其“Second Item”不能修改成“superview.width”。这是由于“First Item”（正大光明.CenterX）是位置（矢量）而“width”是尺寸（标量），因此二者不能创建相等关系，那怎么办呢？

 

咱们知道centerX位于width一半的位置，既然不能引用“width”，那咱们就引用“centerX”，咱们不妨建个方程：

设新系数为P，则

title.centerX = 0.618 * superview.width = P * superview.centerX

=> 0.618 * 2 * superview.centerX = P * superview.centerX

=> P = 1.236

因而咱们将约束修改为下图状

 

太好了，终于以为世界和平了。

 

 

总结

“导航栏”，顾名思义就是为了引导用户使用咱们的APP，话说咱们的APP也就1个界面，须要导航个毛线啊？！好不容易学了1个新东西，结果发现没有什么卵用，难免让人有一种英雄无用，怀才不遇之感。因此下一节，咱们将介绍多UIViewController的使用。

 

源码下载（内置导航栏）：https://pan.baidu.com/s/1UgrENNxz1jrz5OO-RXUCHQ

源码下载（自定义导航栏）：https://pan.baidu.com/s/1mx5djAqpO0LP0Ep5K0IXNw

 

 

上一节           回目录          下一节