IOS 学习笔记 Toolbar NavigationBar 导航栏 工具栏

Toolbar使用gif图展示效果图：

NavigationBar使用gif效果图

 

 

导航栏和工具栏（UIToolbar and NavigationBar）

工具栏和导航栏实际上是有很大差距的，这里放到一起来学习是因为两者有个共同的特性，两者的item都是通过UIBarButtonItem实现的。

 

 

目录

UIToolbar

1.1 UIToolbar布局

1.2 UIBarButtonItem布局

1.3 Toolbar布局优化

1.4 Flexible Space让布局更美观

1.5 Fixed Space 固定空格

1.6 代码中体验UIToolbar中UIBarButtonItem的

2 使用代码布局UIToolbar和添加UIBarButtonItem

2.1 代码布局UIToolbar

2.2 weak属性引起的xcode警告

NavigationBar

3.1 NavigationBar布局

3.2 纯代码NavigationBar布局

---

UIToolbar

工具栏在IOS中是UIToolbar，在iphone应用中UIToolbar通常位于屏幕的底部，UIToolbar中按钮的数量一般最好不要添加多余5个，要不看起来会很紧凑，不太好看。

UIToolbar作为UIBarButtonItem的父容器，UIToolbar中的每一个按钮就是一个UIBarButtonItem。

 

1.1 UIToolbar布局

这里通过Interface Builder 故事板拖拽布局，如下图：

 

 

1.2 UIBarButtonItem布局

往UIToolbar添加item元素UIBarButtonItem，同样通过拖拽加入，如下图：

 

1.3 Toolbar布局优化

在进过上面的步骤之后我们添加了6个UIBarButtonItem，然后我们得到下面的运行效果，如下图：

布局十分的不合理，很丑，而且并不是所说的最多显示5个按钮，这不是打脸嘛？不急，下面我们来优化,

这里我们将使用Flexible Space和Fixed Space，也就是可变空格和固定空格来优化布局，让item之间的举例变的合理，形如下图：

1.4 Flexible Space让布局更美观

Flexible Space是一个弹性空格视图，在显示上是看不见的，但是它可以让item之间的间距都保持一致，并且随着item的数量变化而弹性变化，让布局Toolbar里面的item的布局变得更加的美观。

添加Flexible Space也同样可以通过拖拽的方式进行，如下操作图：

 

依次添加5个Flexibale Space后，得到下面效果图：

 

看起来效果似乎好很多，不过6个按钮看起来太挤了，网上说多余5个按钮的时候，只会显示5个，并且最后一个变成“更多”，这里测试发现并不是这样，实际上还可以添加7个，8个，只是这样不太美观。

 

总结：一下Flexible Space，它能够让item之间的控件弹性变化，但是能够保证item之间的间距都是一样的。

 

1.5 Fixed Space 固定空格

与Flexible Space相对应的是Fixed Space控件，如下图：