3D Touch学习笔记
jopen
8年前
<p>2015年，苹果发布了iOS9以及iphone6s及iphone6s Plus。其中最吸引大家的就是新的触控方式3D Touch。临近年底工作不忙，学习了一下3D Touch的简单使用，在这儿和大家分享一下。</p> <p>参考苹果官方文档<a href="/misc/goto?guid=4959653050432607714" target="_blank">3D Touch APIS</a></p> <h3>1.Home Screen Quick Actions</h3> <p>主屏幕快速操作，当按压桌面图标时，会出现如下图所示菜单（以QQ为例）：<br /> </p> <div class="image-package" href="https://simg.open-open.com/show/c228bdd50b13ab268aa2b7817f52fc25.png"> <img src="https://simg.open-open.com/show/c228bdd50b13ab268aa2b7817f52fc25.png" width="284" height="278" data-original-src="https://simg.open-open.com/show/25c758a8745dca70fcf2cf5dc7b9d881.png" /> <br /> <div class="image-caption"> Quick Actions.png </div> </div> <p>想要实现这种菜单，有静态和动态两种设置方法。静态添加方法就是在info.plist中添加如下字段：</p> <div class="image-package" href="https://simg.open-open.com/show/73e0b49e92a4620eede8d4564243a5b2.jpg"> <img src="https://simg.open-open.com/show/73e0b49e92a4620eede8d4564243a5b2.jpg" width="700" height="177.7602523659306" data-original-src="https://simg.open-open.com/show/08e1387a666721eefd9698da42df19fb.jpg" /> <br /> <div class="image-caption"> 静态添加.png </div> </div> <p>可以现实如下效果：</p> <div class="image-package" href="https://simg.open-open.com/show/bbce94b3514b0a81ce9a0f9ebbc006c3.png"> <img src="https://simg.open-open.com/show/bbce94b3514b0a81ce9a0f9ebbc006c3.png" width="298" height="212" data-original-src="https://simg.open-open.com/show/8b94aa604ddaf279ca597f9a81cee52a.png" /> <br /> <div class="image-caption"> 静态添加实现效果.png </div> </div> <p>动态添加需要Application在iOS9之后新增的一个属性：</p> <blockquote> <p>@property (nullable, nonatomic, copy) NSArray<UIApplicationShortcutItem *> *shortcutItems NS_AVAILABLE_IOS(9_0) __TVOS_PROHIBITED;</p> </blockquote> <p>然后在项目中添加代码：</p> <pre class="brush:cpp; toolbar: true; auto-links: false;">UIApplicationShortcutIcon *icon1 = [UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypePlay]; UIMutableApplicationShortcutItem *item1 = [[UIMutableApplicationShortcutItem alloc] initWithType:@"playItem" localizedTitle:@"play" localizedSubtitle:@"打开" icon:icon1 userInfo:nil]; UIApplicationShortcutIcon *icon2 = [UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeShare]; UIMutableApplicationShortcutItem *item2 = [[UIMutableApplicationShortcutItem alloc]initWithType:@"shareItem" localizedTitle:@"share" localizedSubtitle:@"分享" icon:icon2 userInfo:nil]; [UIApplication sharedApplication].shortcutItems = @[item1,item2];</pre> <p>效果如下图所示：</p> <div class="image-package" href="https://simg.open-open.com/show/64c30c5c0fc20c4ba06a3251318d3aa0.png"> <img src="https://simg.open-open.com/show/64c30c5c0fc20c4ba06a3251318d3aa0.png" width="292" height="298" data-original-src="https://simg.open-open.com/show/3579974af299d0b272d31c9b2e3ecb31.png" /> <br /> <div class="image-caption"> 动态添加效果.png </div> </div> <p>接下来为大家列举一下UIApplicationShortcutItem每个参数的含义：</p> <div class="image-package" href="https://simg.open-open.com/show/113fbd468e2cdd346685558651f82649.png"> <img src="https://simg.open-open.com/show/113fbd468e2cdd346685558651f82649.png" width="700" height="245" data-original-src="https://simg.open-open.com/show/16260e05d855f7300651a4ec6682746a.png" /> <br /> <div class="image-caption"> UIApplicationShortcutItem.png </div> </div> <p><br /> 通过以上方法，就可以设置符合自己需求的快捷菜单了,不过要注意的是：<br /> <strong>动态添加方法需要代码执行过一次才会被加载,静态方法比动态方法优先加载。并且最多只能有4个shortcutItems</strong>。</p> <p>OK，快捷菜单已经设置完毕，然后为shortcutItem添加回调就可以了：</p> <pre class="brush:cpp; toolbar: true; auto-links: false;">- (void)application:(UIApplication *)application performActionForShortcutItem:(UIApplicationShortcutItem *)shortcutItem completionHandler:(void (^)(BOOL))completionHandler{ if ([shortcutItem.type isEqualToString:@"playItem"]) { FirstViewController *fvc = [[FirstViewController alloc] init]; [self.window.rootViewController showViewController:fvc sender:nil]; } if ([shortcutItem.type isEqualToString:@"shareItem"]) { SecondViewController *svc = [[SecondViewController alloc] init]; [self.window.rootViewController showViewController:svc sender:nil]; } }</pre> <hr /> <h3>2.Peek and Pop</h3> <p>经过授权的应用的试图控制器可以响应用户不同的按压力量，随着按压力量的增加，会有三个交互阶段：<br /> 1.暗示预览功能可用，会有一个虚化的效果。<br /> 2.Peek：展示预览的视图以及快捷选项菜单（peek quick action）。<br /> 3.Pop：跳转到预览的视图控制器。</p> <p>首先是检测设备是否支持3D Touch,可以放在viewWillAppear中：</p> <pre class="brush:cpp; toolbar: true; auto-links: false;">- (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; if(self.traitCollection.forceTouchCapability == UIForceTouchCapabilityAvailable){ self.isOpen3DTouch = YES; } }</pre> <p>为了防止用户在程序运行过程中修改3D Touch设置，还要添加另一处检测：</p> <pre class="brush:cpp; toolbar: true; auto-links: false;">- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection{ if(self.traitCollection.forceTouchCapability == UIForceTouchCapabilityAvailable){ self.isOpen3DTouch = YES; } }</pre> <p>如果设备支持3D Touch,下一步是对需要响应Peek&Pop手势的视图进行注册,我的demo里模拟的是对tableViewCell添加手势,注册放在了table:cellForRowAtIndexPath函数里：<br /> <code>[self registerForPreviewingWithDelegate:self sourceView:cell];</code></p> <p>然后视图控制器接受代理<code><UIViewControllerPreviewingDelegate></code></p> <p>Peek代理方法：返回需要预览的视图控制器</p> <pre class="brush:cpp; toolbar: true; auto-links: false;">- (UIViewController *)previewingContext:(id<UIViewControllerPreviewing>)previewingContext viewControllerForLocation:(CGPoint)location{ //通过预览上下文获取到当前按压的视图,判断indexPath值 NSIndexPath *indexPath = [self.tableView indexPathForCell:(UITableViewCell *)previewingContext.sourceView]; //通过上下文可以调整不被虚化的范围 previewingContext.sourceRect = CGRectMake(10, 10, 10, 10); if (indexPath.row == 0) { FirstViewController *FVC = [[FirstViewController alloc]init]; //可以调整预览视图的大小 FVC.preferredContentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 200); return FVC; } if (indexPath.row == 1) { SecondViewController *SVC = [[SecondViewController alloc] init]; return SVC; } if (indexPath.row == 2) { ThirdViewController *tvc = [[ThirdViewController alloc] init]; return tvc; } return nil; }</pre> <p>也可以根据location的位置来判断按压的是哪个控件,进而做出响应。</p> <p>Pop代理方法：相当于push操作</p> <pre class="brush:cpp; toolbar: true; auto-links: false;">- (void)previewingContext:(id<UIViewControllerPreviewing>)previewingContext commitViewController:(UIViewController *)viewControllerToCommit{ [self showViewController:viewControllerToCommit sender:self]; }</pre> <p>在弹出预览视图而没有触发Pop操作的时候，向上滑动预览视图,在视图下方可以展示一些选项去操作，可以通过在预览视图控制器中添加previewActionItems来实现，需要实现以下方法,然后再Block中去实现操作就可以了：</p> <pre class="brush:cpp; toolbar: true; auto-links: false;">- (NSArray<id<UIPreviewActionItem>> *)previewActionItems { // 生成UIPreviewAction UIPreviewAction *action1 = [UIPreviewAction actionWithTitle:@"Action 1" style:UIPreviewActionStyleDefault handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) { NSLog(@"Action 1 selected"); }]; UIPreviewAction *action2 = [UIPreviewAction actionWithTitle:@"Action 2" style:UIPreviewActionStyleDestructive handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) { NSLog(@"Action 2 selected"); }]; UIPreviewAction *action3 = [UIPreviewAction actionWithTitle:@"Action 3" style:UIPreviewActionStyleSelected handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) { NSLog(@"Action 3 selected"); }]; NSArray *actions = @[action1, action2, action3]; return actions; }</pre> <p>效果如下图所示：</p> <div class="image-package" href="https://simg.open-open.com/show/6527ef82e406481ab8fafb123fb9b50d.png"> <img src="https://simg.open-open.com/show/6527ef82e406481ab8fafb123fb9b50d.png" width="286" height="490" data-original-src="https://simg.open-open.com/show/34235213310cc1da6e20f26761b3a248.png" /> <br /> <div class="image-caption"> previewActionItems.png </div> </div> <p><br /> 也可以把这些item放到一个组中，再把不同的group放到一个数组中就可以了。大家可以根据自己的需求去实现：</p> <pre class="brush:cpp; toolbar: true; auto-links: false;">UIPreviewActionGroup *group1 = [UIPreviewActionGroup actionGroupWithTitle:@"Action Group" style:UIPreviewActionStyleDefault actions:actions];</pre> <p>这样3D Touch简单的使用就基本上实现了，如果以上有什么理解错误的地方，欢迎大家交流讨论。</p> <p>来自： <a href="/misc/goto?guid=4959653050528866137" rel="nofollow" target="_blank">http://www.jianshu.com/p/c5b70a65f4b8</a></p>