很多时候,我们对导航栏的个性化设计,都可以通过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的颜色
备注:
- Bar Tint只控制导航栏本身的颜色,而要改变返回按钮和其他barbuttonItem的颜色则需要设置Tint的颜色值,而要改变标题颜色则需要通过Title Color
- 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:当页面出现键盘时隐藏导航栏,同样也是为了给页面内容提供更多的展示空间。