3D Touch大法

Demo同步更新到Swift2.3
本文出自: http://mokai.me/3d-touch.html

3D Touch最先应用在Apple Watch上面,但叫Force Touch,后在iPhone6s上加入了此特性,并改名3D Touch。值得注意的是目前3D Touch只支持iPhone6S以后的机型,包括现有Xcode7中6s的模拟器也不支持,不过Github上的SBShortcutMenuSimulator项目通过Hack方式已经实现了Quick Actions快捷访问,但不能使用Peek&Pop快速预览。

如果你还不知道3D Touch是什么,可以看看官方宣传视频

环境

系统环境: iOS9 or later
开发环境: Swift2.3 & Xcode7.3.1
Demo: 3DTouchDemo
效果:

开始

3D Touch可以分为三种:

  • Quick Actions【可以理解PC桌面的快捷方式】
  • Peek&Pop【应用内快速预览内容】
  • UITouch【自定义3D Touch事件】

Quick Actions 快捷方式

配置Actions可以通过工程Info.plist文件静态配置,也可以在运行时动态添加,两者可以一起使用。
静态配置在Info.plistUIApplicationShortcutItems节点数组下添加相应Actions Item信息

<key>UIApplicationShortcutItems</key>
<array>
    <dict>
        <key>UIApplicationShortcutItemIconType</key>
        <string>UIApplicationShortcutIconTypeSearch</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>搜索</string>
        <key>UIApplicationShortcutItemType</key>
        <string>me.mokai.TouchDemo.action.search</string>
    </dict>
    ...
</array>

动态配置通过UIApplication的shortcutItems添加,shortcutItems是一个UIApplicationShortcutItem数组

let type = "me.mokai.TouchDemo.action.identify"
let title = "听歌识别"
let shortcutItem = UIApplicationShortcutItem(type: type, localizedTitle: title,
 localizedSubtitle: nil, icon: UIApplicationShortcutIcon(templateImageName: "quick_filter"), userInfo: nil)
application.shortcutItems = [shortcutItem]

<b>Note</b>

  • Actions的图标可以使用系统预定的也可以自定义图片
  • 对于每个Actions来说type是必须的,它代表着我们从桌面点击Actions进入到应用调用application(application, performActionForShortcutItem:, completionHandler:)时的唯一标识,另外userInfo可以附加每个actions的数据,如最近听歌的歌曲id
  • 当APP启动时,shortcutItems的值是上次动态添加的,如果是第一次启动则为空数组。
  • Actions最多显示4个,优先显示静态Actions,然后剩余个数显示shortcutItems的前几个。

Peek&POP 快速预览

好了,下面介绍本文重头戏,先上效果

Peek窗口的内容其实是目标VC【ps即将要显示的ViewController】的一个实时快照,但它不可以点击。Peek触发阶段有三种:

  • 长按【显示一个焦点视图,触发Peek的源视图高亮,其它视图都处于模糊状态】
  • 轻压【显示Peek窗口,此时如果Peek窗口支持Quick Actions,往上滑会显示Quick Actions菜单,此时的Peek窗口是不可以点击的】
  • 重压 【进入到真正的ViewController】

Peek由一个可响应事件的View触发,默认是关闭的,我们需要通过控制器的registerForPreviewingWithDelegate: sourceView:方法注册,第一个参数为UIViewControllerPreviewingDelegate的代理,Peek触发轻压时会调用其previewingContext:viewControllerForLocation方法,重压时会调用previewingContext:commitViewController:方法。第二个参数为触发Peek事件的源视图

//注册
registerForPreviewingWithDelegate(self, sourceView: userVCBtn)
//Delegate
//轻压,进入第二阶段,显示Peek窗口
func previewingContext(previewingContext:  UIViewControllerPreviewing, viewControllerForLocation location:  CGPoint) -> UIViewController? {
    let userVc = self.storyboard?.instantiateViewControllerWithIdentifier("UserViewController") as! UserViewController
    return userVc;
}
//重压,进入第三阶段,显示真正的ViewController
func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) {
    showViewController(viewControllerToCommit, sender: self)
}

如果Peek窗口需要Quick Actions菜单,在目标VC中重写previewActionItems方法返回一个UIPreviewActionItem或者一个UIPreviewActionGroup数组就行了。

//目标VC
lazy var previewActions: [UIPreviewActionItem] = {
    func previewActionForTitle(title: String, style:  UIPreviewActionStyle = .Default) -> UIPreviewAction {
        return UIPreviewAction(title: title, style: style) { previewAction, viewController in
            print("点击了\(title)") //这里是Actions响应
        }
    }
    let action1 = previewActionForTitle("关注TA",style: .Destructive) //显示红色,代表重要Action
    let action2 = previewActionForTitle("私信TA")
    //子Actioons
    let subAction1 = previewActionForTitle("微博")
    let subAction2 = previewActionForTitle("好友圈")
    let subAction3 = previewActionForTitle("QQ")
    let subAction4 = previewActionForTitle("微信")
    let groupedActions = UIPreviewActionGroup(title: "分享…", style: .Default, actions: [subAction1, subAction2, subAction3, subAction4] )
    return [action1, action2, groupedActions]
}()
override func previewActionItems() -> [UIPreviewActionItem] {
    return previewActions
}

更快速的方法

上面是代码激活Peek的方式,还有更Peek的方式:直接在Storyboard中使用Segue,在Segue属性面板中把Peek & Pop 勾选上就完事了。

使用这种方式指定我们在代码中连注册都不用,所以使用SB的项目适配3D Touch那是分分钟搞定的事,尤其在Xcode7出了Storyboard References后,我大 Swift + Storyboard 组合势必统一iOS界~

好了,有点小激动了,继续回到正文

在正常情况下,Peek窗口默认显示目标VC的整个View,但在实际应用中,可能会有更多的需求,比如说二个Button Push的是同一个VC,但是需要分别显示不同的Peek窗口。
其实也很简单,我们只需要自定义一个Peek的生命周期扩展就行了,previewingContext:viewControllerForLocation:方法中代表Peek的开始,previewingContext:commitViewController代表Peek的结束,然后在目标VC中重写二个方法就行了

//UIViewController+PeekCycle.swift
/**
 Peek生命周期
**/
extension UIViewController {
    //开始peek,VC为Peek显示做初始化
    func beginPeek(){}
    //结束peek,VC为真正显示做初始化
    func endPeek(){}
}
//Delegate
func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
    let detailVc = self.storyboard?.instantiateViewControllerWithIdentifier("DetailViewController") as! DetailViewController
    //指定Peek窗口类型
    detailVc.peekType = .Image
    //设置Peek的高度
    detailVc.preferredContentSize = CGSize(width: 0.0, height: 320);
    detailVc.view //先访问一下view,初始化
    detailVc.beginPeek() //peek开始
    return detailVc;
}
func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) {
    viewControllerToCommit.endPeek()  //peek结束
    showViewController(viewControllerToCommit, sender: self)
}
//目标VC
override func beginPeek() { 
    if(peekType == .Comments){ //如果是评论则只显示评论视图
        imageView.hidden = true
    }else{ //否则显示图片
        commentsView.hidden = true
    }
}
override func endPeek() {
    if(peekType == .Comments){
        imageView.hidden = false
    }else{
        commentsView.hidden = false
    }
}

<b>Note</b>

  • 如果要改变Peek窗口的size可以设置目标VC的preferredContentSize
  • 对于直接使用registerForPreviewingWithDelegate注册VC的self.view,虽然可以自动注册subviews,但是如果说你的VC中不止一种视图要触发Peek,那么它会分分钟教你做人的道理。

UITouch

高级玩法,绘图、游戏,把3D Touch发挥到极致。不过我也唔知玩也暂时没这方面需求,有需求看官方绘图demo

参考

Adopting 3D Touch on iPhone
ApplicationShortcuts Demo
ViewControllerPreviews Demo

小小广告

本人目前是一名自由职业者,接受移动两端的项目开发,如果你有需求或者有资源请速与我联系吧,QQ865425695

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容

  • 专著:http://www.jianshu.com/p/3443a3b27b2d 1.简单的介绍一下3D Touc...
    violafa阅读 1,009评论 1 0
  • 前言 关于3D touch苹果官方文档是这么开始介绍的: 大意如下:iOS9开始,所有新的手机都增加了一个三维的用...
    VV木公子阅读 2,212评论 3 39
  • 1.简单的介绍一下3D Touch 3D Touch的触控技术,被苹果称为新一代多点触控技术。其实,就是此前在Ap...
    Camille_chen阅读 12,040评论 19 33
  • 前言 关于这篇文章 由于iPhone 6S发布不到一年的时间,很多新特性、新技术还未普遍,不管是3D Touch的...
    Tangentw阅读 4,471评论 8 18
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,029评论 4 62