当Storyboard遇上NavigationBar

漫漫Xcode长路

很多时候，我们对导航栏的个性化设计，都可以通过Storyboard进行设置（虽然并不是百分百），这样可以满足需求的同时，减少手敲代码的时间，提高效率。下面MARK下我自己经常使用Storyboard来设置NavigationBar的一些属性。

设置全局样式

路径：storyboard -> NavigationController -> NavigationBar -> 属性面板
几个有用的属性：

• Navigation Bar分组下的属性：
  • Style：控制导航栏的默认样式：灰色或黑色
  • Translucent：选中后后导航栏将变成半透明状态，且允许内容在其下面显示。
  • Bar Tint：设置导航栏的颜色，颜色的alpha值不起作用。半透明受Translucent属性的控制。
  • Title Font：设置导航栏标题的样式（字体、样式、字号）
  • Title Color：设置导航栏标题的颜色
  • Title Shadow：设置标题阴影的颜色和OffSet
• View 分组的属性：
  • Background：设置颜色之后，会在原有导航栏基础上加了一层渐变的颜色（很奇怪的样式）而且对Alpha值无效
  • Tint：所有UIView的子类都会继承此属性，可以用来控制导航栏的：返回按钮、其他barbuttonItem的颜色

备注：

1. Bar Tint只控制导航栏本身的颜色，而要改变返回按钮和其他barbuttonItem的颜色则需要设置Tint的颜色值，而要改变标题颜色则需要通过Title Color
2. Stroyboard面板没有提供设置导航栏背景图片的属性，可以使用代码进行设置：setBackgroundImage:

设置页面上的导航栏信息

• 设置标题：
  • 路径：ViewController -> NavigationItem（如果没有可以自己拖进一个）
  • Title：设置导航栏标题
  • Prompt：设置额外的信息
  • Back Button：返回该页面时在其他页面的Back按钮上显示的标题，如果只需显示箭头，则输入空格。不填则显示为Title。

设置导航栏的交互

路径：Story -> Navigation Controller ->属性面板

• ** Bar Visibility**：控制导航栏的可见性
  • Shows Navigation Bar：是否显示导航栏。（默认选中）
  • Shows ToolBar：是否在底部显示工具栏。（默认不选）
• Hide Bars：触发导航栏隐藏的交互
  • On Swipe：选中后，向上滑动隐藏导航栏，向下滑动则重新显示。如果页面是列表类则向下滚动到页面顶部才会重新显示导航栏。（很多长列表页面采用这种方式，这样可以内容提供更多展示空间）
  • On Tap：单击页面时隐藏导航栏，再单击则重新显示。（很多查看图片的页面都采用这种交互，例如微信）
  • When Keyboard Appears：当页面出现键盘时隐藏导航栏，同样也是为了给页面内容提供更多的展示空间。