你曾注意过Safari移动客户端里美轮美奂的导航栏缩放效果么,以及那些tab bar是如何消失的吗?

在iOS 8中,苹果让这种类型的交互变得非常容易,虽然在WWDC上演示了缩放导航栏效果,不过后来他们用隐藏导航的方式替代了这个想法,但tab bar不包括在内(我猜想他们后期会添加隐藏标签栏的属性)。

以下是iOS 8中非常酷的导航交互方式,可以让用户看到更多内容。

滚动页面时隐藏Bar

如果你有一个Table View,仅需要将导航控件的hidesBarsOnSwipe属性设置为true就OK了。

class QuotesTableViewController: UITableViewController {
 
    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
         
        navigationController?.hidesBarsOnSwipe = true
    }
}

注意导航栏的行为会影响到在你的导航堆栈里所有的视图控件,所以如果你希望某一视图控控件的导航条不会跟着隐藏的话,你需要设置一下viewDidAppear。

点击时隐藏

如果你的视图并不像上面所示那样的卷动的话,你可以试着将hidesBarsOnTap的属性设置为true.

class QuoteImageViewController: UIViewController {
 
    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
         
        // 将hidesBarsOnSwift设置为false
        // 在此后的这个条件下它不会有任何效果
        // 不过在上一个VC中它被设置成了true
        navigationController?.hidesBarsOnSwipe = false
         
        // setting hidesBarsOnTap to true
        navigationController?.hidesBarsOnTap = true
    }
 
}

请注意,如果你之前在导航栈中某个视图控件里设置过hidesBarOnSwipe,你需要再次将其赋值为false以避免这个视图会发生像其他的视图那样的行为。同样的,如果对于Table View也曾有过设置,那你仍需要重新将navigationController?.hidesBarsOnTap设为false避免出错。

展示键盘输入时隐藏

如上图,使用导航控件的新特性hidesBarsWhenKeyboardAppears,你可以在输入键盘出现时将导航栏隐藏:

class CreateQuoteTableViewController: UITableViewController {
 
    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
         
        navigationController?.hidesBarsOnSwipe = false
         
        // 这个例子恰到好处的结合了hidesBarsOnTap和hidesBarsWhenKeyboardAppears两个特性
        // 这样用户可以轻松的唤回导航栏并保存
        navigationController?.hidesBarsOnTap = true
         
        navigationController?.hidesBarsWhenKeyboardAppears = true
    }
}

为了确保用户在使用时可以轻易的唤出隐藏的导航栏,你应该在需要的时候将hidesBarsOnTap或者hidesBarsOnSwipe设置为true.

其他特性

下面演示的是其他新的导航控制器属性,你可以看一下:

class UINavigationController : UIViewController {
 
    //... truncated
     
    /// When the keyboard appears, the navigation controller's navigationBar toolbar will be hidden. The bars will remain hidden when the keyboard dismisses, but a tap in the content area will show them.
    @availability(iOS, introduced=8.0)
    var hidesBarsWhenKeyboardAppears: Bool
    /// When the user swipes, the navigation controller's navigationBar & toolbar will be hidden (on a swipe up) or shown (on a swipe down). The toolbar only participates if it has items.
    @availability(iOS, introduced=8.0)
    var hidesBarsOnSwipe: Bool
    /// The gesture recognizer that triggers if the bars will hide or show due to a swipe. Do not change the delegate or attempt to replace this gesture by overriding this method.
    @availability(iOS, introduced=8.0)
    var barHideOnSwipeGestureRecognizer: UIPanGestureRecognizer { get }
    /// When the UINavigationController's vertical size class is compact, hide the UINavigationBar and UIToolbar. Unhandled taps in the regions that would normally be occupied by these bars will reveal the bars.
    @availability(iOS, introduced=8.0)
    var hidesBarsWhenVerticallyCompact: Bool
    /// When the user taps, the navigation controller's navigationBar & toolbar will be hidden or shown, depending on the hidden state of the navigationBar. The toolbar will only be shown if it has items to display.
    @availability(iOS, introduced=8.0)
    var hidesBarsOnTap: Bool
    /// The gesture recognizer used to recognize if the bars will hide or show due to a tap in content. Do not change the delegate or attempt to replace this gesture by overriding this method.
    @availability(iOS, introduced=8.0)
    unowned(unsafe) var barHideOnTapGestureRecognizer: UITapGestureRecognizer { get }
}

不容错过的iOS 8的导航交互的更多相关文章

  1. iOS开发人员不容错过的10大工具

    内容简介 1.iOS简介 2.iOS开发十大实用工具之开发环境 3.iOS开发十大实用工具之图标设计 4.iOS开发十大实用工具之原型设计 5.iOS开发十大实用工具之演示工具 6.iOS开发十大实用 ...

  2. 每位iOS开发人员不容错过的10大实用工具

    内容简介 1.iOS简介 2.iOS开发十大实用工具之开发环境 3.iOS开发十大实用工具之图标设计 4.iOS开发十大实用工具之原型设计 5.iOS开发十大实用工具之演示工具 6.iOS开发十大实用 ...

  3. 每位iOS开发者不容错过的10大有用工具

    内容简单介绍 1.iOS简单介绍 2.iOS开发十大有用工具之开发环境 3.iOS开发十大有用工具之图标设计 4.iOS开发十大有用工具之原型设计 5.iOS开发十大有用工具之演示工具 6.iOS开发 ...

  4. 十款不容错过的Swift iOS开源项目及介绍

    1.十款不容错过的Swift iOS开源项目. http://www.csdn.net/article/2014-10-16/2822083-swift-ios-open-source-project ...

  5. Java框架介绍-13个不容错过的框架项目

    本文转自互联网,个人收藏所用. 下面,我们将一同分享各有趣且颇为实用的Java库,大家请任取所需.不用客气~ 1.极致精简的Java Bootique是一项用于构建无容器可运行Java应用的极简技术. ...

  6. 13个不容错过的Java项目

    今天我们将整理一大波干货满满的Java示例代码与能力展示素材. GitHub可谓一座程序开发的大宝库,有些素材值得fork,有些则能帮助我们改进自有代码或者学习编程技能.无论如何,开发工作当中我们几乎 ...

  7. iOS与JS开发交互总结

    hybrid.jpg 前言 Web 页面中的 JS 与 iOS Native 如何交互是每个 iOS 猿必须掌握的技能.而说到 Native 与 JS 交互,就不得不提一嘴 Hybrid. Hybri ...

  8. 立足GitHub学编程:13个不容错过的Java项目

    立足GitHub学编程:13个不容错过的Java项目 今天我们将整理一大波干货满满的Java示例代码与能力展示素材. GitHub可谓一座程序开发的大宝库,有些素材值得fork,有些则能帮助我们改进自 ...

  9. iOS开发UINavigation——导航控制器UINavigationController

    iOS开发UINavigation系列一——导航栏UINavigtionBar摘要iOS中的导航条可以附着于导航控制器之中使用,也可以在controller中单独使用,这篇博客,主要讨论有关导航栏的使 ...

随机推荐

  1. PBOC2.0与3.0的区别

    一.PBOC规范颁布的历程 1997年12月,PBOC V1.0  定义了五个方面的事项  电子钱包/电子存折应用(EP,ED)  卡片和终端的接口  卡片本身的技术指标  应用相关的交易流程  终端 ...

  2. linux查看文件权限

    ls -l abc (abc是文件名) 那么就会出现相类似的信息,主要都是这些:drwxr-xr-x 一共有10位数 其中: 最前面那个 d 代表的是类型 目录文件 中间那三个 rw- 代表的是所有者 ...

  3. 如何使用css和jquery控制文章标题字数?

    如何使用css控制文章标题字数? 最佳答案 控制文章标题字数,不是动态网页的专利,如果静态页面使用CSS样式,也可以实现相同的效果! 看这个例子,你们可以复制到记事本保存为HTML文件看效果! < ...

  4. Asp.net将图片转为Base64编码

    protected void Page_Load(object sender, EventArgs e) { Image img = new Bitmap(Server.MapPath("/ ...

  5. 1564: [NOI2009]二叉查找树 - BZOJ

    Description Input Output只有一个数字,即你所能得到的整棵树的访问代价与额外修改代价之和的最小值.Sample Input4 101 2 3 41 2 3 41 2 3 4Sam ...

  6. Websphere中静态资源配置

    Tomcat, Jetty, JBoss, GlassFish 自带的默认Servlet的名字 default Google App Engine 自带的 默认Servlet的名字 ah_defaul ...

  7. json_encode charset

    json_encode  utf-8   mysql   charset  utf8

  8. Codeforces Round #231 (Div2) 迟到的解题报告

    题目A: 给一个火柴等式,可以从左边移动一根到右边,也可以从右边移到左边,但是不能移动“+”,”=“的火柴, 而且加法里面的数都要大于0(很重要的条件),基本上注意到这点的都过了,没注意的都被HACK ...

  9. Android App集成支付宝

    原地址:http://blog.csdn.net/wenbingoon/article/details/7933078 手机的在线支付,被认为是2012年最看好的功能,我个人认为这也是移动互联网较传统 ...

  10. Extjs文本输入框

    var loginForm = Ext.create('Ext.form.Panel', {         title: '单行输入',         renderTo: Ext.getBody( ...