当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:当页面出现键盘时隐藏导航栏,同样也是为了给页面内容提供更多的展示空间。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 15,202评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 178,978评论 25 709
  • 本周践行检视: 关于早起,目前每天保持在五点左右起床,有两天因为前一天在10:50左右睡觉,导致第二天起床的时...
    拆拥阅读 188评论 0 0
  • 文:夏夏 不论你是工作不顺利、学习遇到瓶颈,还是感情上产生了矛盾,亦或是孤身一人、度日如年......不论你现在遇...
    五月之夏电台阅读 375评论 0 1

友情链接更多精彩内容