3D Touch 简单应用与分析

1.什么是3D Touch?

3D Touch属于一种人机交互的一种方式,具体点用户与手机屏幕的一种交互方式。在3D Touch出现前看看现有的一些用户与手机屏幕的交互方式有哪些?

现有的交互方式:点按,双击,长按,捏合,旋转,拖动,轻扫,快速滑动

官方介绍:iOS Human Interface GuidelinesBeta Gesture

总结以上的交互都是在一个二维的界面上根据接触的区域、时间、速度、方向,次数等维度,计算得出一种用户的手势操作

3D Touch是从一个新的维度出创建一种交互方式

3D Touch是触摸屏的压力感应功能。是在二维的Multi-Touch触摸屏基础上添加了可以对用户按压屏幕的力度大小作出响应于反馈的功能。3D Touch不是Apple的一个使用压力感应的产品,之前已经在MacBook和Apple Watch上使用,不过之前的叫Force Touch.Force Touch是3D Touch的雏形。他只可以区分轻触和重压。

官方介绍:iOS Human Interface GuidelinesBeta 3D Touch

这里提及一下Android平台上的压力感应功能。华为 128GB Mate S支持Force Touch技术,这是Force Touch 第一次应用在手机(比苹果还早,苹果之前使用在了电脑上)。Synaptics(新思国际)提供完整的解决方案Clear Force。

2.3D Touch应用场景分析

应用外的快速导航

在桌面时,用力按app icon,会弹出一个快速导航的列表,点击相应的选项会进入相应的页面

应用内的预览于选择

某音乐类APP 首页点击一个歌单,会有这个歌单的预览于一些操作

3.3D Touch Demo

以上讲的都是一些感念于效果表现,现在是代码层面的分析。主要是以下四种情况:

Home Screen Quick Actions​ (应用外的快速导航)

Static quick actions静态标签

Static quick actions are available to the userimmediately upon app installation. Define Home screen static quick actions in your app’sInfo.plistfile in theUIApplicationShortcutItemsarray.

就是在info.plist的文件中添加UIApplicationShortcutItems数组就可以使用了,具体数组里面的配置下面会有说明,还有一点需要强调的是,使用静态标签是程序安装以后就可以立即使用了。

UIApplicationShortcutItemType(required) 这个键值设置一个快捷通道类型的字符串

UIApplicationShortcutItemTitle(required) 这个键值设置标签的标题

UIApplicationShortcutItemSubtitle 设置标签的副标题

UIApplicationShortcutItemIconType 设置标签Icon类型

UIApplicationShortcutItemIconFile设置标签的Icon文件

UIApplicationShortcutItemUserInfo 设置信息字典(用于传值)

Dynamic quick actions动态标签

Dynamic quick actions are available to the userafter first launch. Define Home screen dynamic quick actions with theUIApplicationShortcutItem,UIMutableApplicationShortcutItem, andUIApplicationShortcutIconclasses. Add dynamic quick actions to your app’s shared UIApplication object using theshortcutItemsproperty.

动态标签是在程序初始化之后,才可以去配置的,UIApplicationShortcutItem, UIMutableApplicationShortcutItem, and UIApplicationShortcutIcon classes这3个类创建一个标签,UIApplication的shortcutItems管理整个app的标签。

动态标签需要注意的两点:1.动态的标签修改不了已有的静态标签2.动态标签初始化一次以后会保留在shortcutItems不需要每次都创建

Home Screen Quick Actions​的样式


标签的个数是有限制的,最多4个

图标在那边展示是系统根据当前app icon的位置决定的,会自动调整,图标只能使用系统的图片或者是打包在bundle中的图片。

Home Screen Quick Actions​的响应方法

类似推送,当我们点击标签进入应用程序时,也可以进行一些操作,我们可以在AppDelegate中增加了这样一个方法,在方法中可以做一些页面跳转等需求:

- (void)application:(UIApplication*)application performActionForShortcutItem:(UIApplicationShortcutItem*)shortcutItem completionHandler:(void(^)(BOOL))completionHandler;

UIKit Peek and Pop

To supportpeek and popon 3D Touch-capable devices, the iOS 9 SDK includes:

New methods in theUIViewControllerclass forregisteringandunregisteringa view controller for participation in 3D Touch

New view controller protocols (UIViewControllerPreviewingDelegate) to support 3D Touch

To supportpeek quick actions, the iOS 9 SDK includes:

The newUIPreviewActionandUIPreviewActionGroupclasses

The newUIPreviewActionItemprotocol

增加了一个protocol UIViewControllerPreviewingDelegate

在UIViewController类中增加了注册和取消注册的Delegate的方法

具体看代码demo

Web View Peek and Pop

safari浏览器,3D Touch一个链接时

导入WebKit的文件,


创建一个WKWebView对象,设置allowsLinkPreview=true

WKWebView和SFSafariViewController#importWKWebView *webView =

[[WKWebView alloc]initWithFrame:self.view.bounds];

[self.view addSubview:webView];

[webView loadRequest:

[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com/"]]];

// 需要设置为true才有预览的功能

webView.allowsLinkPreview = true;

safari浏览器

Force Properties in UITouch Objects

3D Touch在UITouch类中增加了两个属性force​和maximumPossibleForce

The force of the touch, where a value of 1.0 represents the force of an average touch (predetermined by the system, not user-specific). (read-only)

Force反应当前压力的大小,1.0标示平均值。如果使用 Apple Pencil时,还需要计算altitudeAngle

The maximum possible force for a touch. (read-only)

maximumPossibleForce是Force的最大值

如果你监控touchesBegan,touchesMoved,touchesEnded这3个放回就可以拿到UITouch,从而回到到这两个属性值。

使用UITouch中的3D Touch的force属性实现的画笔效果

自己写的demo,文中的展示的程序也使用了apple文档中的程序,以下的链接中找到。

写这篇文章时引用的资料链接

2015年苹果秋季新品发布会(中文翻译)

一张图让你了解3D Touch与Force Touch区别

Getting Started with 3D Touch

3D Touch开发初体验(模拟器使用3DTouch)

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

推荐阅读更多精彩内容

  • 前言 关于这篇文章 由于iPhone 6S发布不到一年的时间,很多新特性、新技术还未普遍,不管是3D Touch的...
    Tangentw阅读 4,444评论 8 18
  • 3D Touch介绍 从iPhone 6s开始,产品都添加了一项硬件属性,叫做3D touch。作为屏幕的一部分,...
    歪笔书生_阅读 597评论 0 0
  • 前言 关于3D touch苹果官方文档是这么开始介绍的: 大意如下:iOS9开始,所有新的手机都增加了一个三维的用...
    VV木公子阅读 2,190评论 3 39
  • 专著:http://www.jianshu.com/p/3443a3b27b2d 1.简单的介绍一下3D Touc...
    violafa阅读 997评论 1 0
  • 一、3D Touch 介绍 3D Touch 是 Apple 推出的通过压力感触区分轻按和重按来进行不同的用户交互...
    Magician阅读 598评论 1 6