3D Touch簡介
2015年，蘋果釋出了
iOS9以及iphone6s/iphone6s Plus，其中最具有創新的就是新的觸控方式3D Touch，相對於多點觸控在平面二維空間的操作，3D Touch技術增加了對力度和手指面積的感知，可以通過長按快速預覽、檢視你想要的簡訊、圖片或者超連結等內容，Peek和Pop手勢的響應時間可迅捷到 10ms和15ms等。
3D Touch三大模組
1. Home Screen Quick Actions
2. Peek、Pop
3. Force Properties
3D Touch實現
3D Touch實現起來不算難，就是實現需要硬體的支援，只能在6s/6s p等上面可以測試體驗，模擬器是不能的，ShortcutItem主要由Item型別，主標題，副標題、圖示，還可新增一些附加資訊，每個App最多新增4個快捷鍵。
操作 – 用手指用力按壓App的icon，會出現類似的選單快捷鍵（ShortcutItem），附上Demo的效果圖（Home Screen Quick Actions）：
按壓icon.png
1. Home Screen Quick Actions
生成選單 – 按壓icon彈出快捷鍵的實現方法分為靜態選單、動態選單等2種。
. 靜態選單 – 配置專案的.plist檔案
目前Xcode版本的plist檔案還沒對應的key來獲取，則 需要使用者自己來手動輸入UIApplicationShortcutItems（NSArray型別 – 內部都是字典– 對應 – 每個item）；字典內一些key的解釋：
UIApplicationShrtcutItemSubtitle（副標題）
UIApplicationShrtcutItemTitle（ 必填）（可監聽該項判斷使用者是從哪一個標籤進入App）
UIApplicationShortcutItemType（ 必填）（可監聽該項判斷使用者是從哪一個標籤進入App）
UIApplicationShrtcutItemIconType（圖示）（系統提供了29種樣式的圖示）
UIApplicationShrtcutItemIconFile（自定義圖片的檔案路徑）- 直接傳入圖片的名字即可
注意：若是設定了自定義的圖片 則系統的不再生效
.plist配置.png
. 動態選單 – 程式碼實現快捷選單，動態新增方法需要程式碼執行一次，因此靜態方法比動態方法優先載入
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { /** * 通過程式碼實現動態選單 * 一般情況下設定主標題、圖示、type等，副標題是不設定的 - 簡約原則 * iconWithTemplateImageName 自定義的icon * iconWithType 系統的icon */ //系統ShortcutIcon UIApplicationShortcutIcon *favrite = [UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeFavorite]; UIApplicationShortcutItem *itemOne = [[UIApplicationShortcutItem alloc] initWithType:@"favrite" localizedTitle:@"時尚之都" localizedSubtitle:nil icon:favrite userInfo:nil]; UIApplicationShortcutIcon *bookMark = [UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeBookmark]; UIApplicationShortcutItem *itemTwo = [[UIApplicationShortcutItem alloc] initWithType:@"book" localizedTitle:@"知識海洋" localizedSubtitle:nil icon:bookMark userInfo:nil]; //自定義ShortcutIcon UIApplicationShortcutIcon *iconContact = [UIApplicationShortcutIcon iconWithTemplateImageName:@"contact"]; UIApplicationShortcutItem *itemThree = [[UIApplicationShortcutItem alloc] initWithType:@"contact" localizedTitle:@"聯絡的人" localizedSubtitle:nil icon:iconContact userInfo:nil]; [UIApplication sharedApplication].shortcutItems = @[itemOne,itemTwo,itemThree]; return YES; } |
實現點選選單ShortcutItem對應的item跳轉到對應的頁面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
//選單跳轉 - (void)application:(UIApplication *)application performActionForShortcutItem:(UIApplicationShortcutItem *)shortcutItem completionHandler:(void (^)(BOOL))completionHandler{ UITabBarController *tabBarVC = (UITabBarController *)self.window.rootViewController; /* * 方式one - localizedTitle if ([shortcutItem.localizedTitle isEqualToString:@"時尚之都"]) { tabBarVC.selectedIndex = 0; }else if ([shortcutItem.localizedTitle isEqualToString:@"知識海洋"]){ //知識海洋 tabBarVC.selectedIndex = 1; }else{ tabBarVC.selectedIndex = 2; //聯絡的人 } */ //方式two - type if ([shortcutItem.type isEqualToString:@"movie"]) { //時尚之都 tabBarVC.selectedIndex = 0; }else if ([shortcutItem.type isEqualToString:@"book"]){ //知識海洋 tabBarVC.selectedIndex = 1; }else{ tabBarVC.selectedIndex = 2; //聯絡的人 } } |
2. Peek、Pop
經過授權的應用檢視控制器可響應使用者不同的按壓力量，隨著按壓力量的增加，會有三個互動階段：
1.暗示預覽功能可用，會有一個虛化的效果
2.Peek：重按一下後出現的預覽，展示預覽的檢視以及快捷選單
3.Pop：跳轉到預覽的檢視控制器，是在Peek後進一步按壓後進入預覽的檢視控制器
首先需遵守代理協議UIViewControllerPreviewingDelegate
|
1 |
<span class="hljs-keyword">@interface</span> <span class="hljs-title">TableViewController</span> ()<<span class="hljs-title">UIViewControllerPreviewingDelegate</span>> |
具體實現
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
- (NSMutableArray *)dataArray{ if (!_dataArray) { _dataArray = [NSMutableArray new]; int i = 0; while (i < 30) { //模擬資料 [_dataArray addObject:@"http://www.baidu.com"]; i ++; } } return _dataArray; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *cellID = @"cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID]; if (!cell) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID]; } cell.textLabel.text = [NSString stringWithFormat:@"模擬第%ld個知識點",indexPath.row]; /** * UIForceTouchCapability 檢測是否支援3D Touch */ if (self.traitCollection.forceTouchCapability == UIForceTouchCapabilityAvailable) { //支援3D Touch //系統所有cell可實現預覽（peek） [self registerForPreviewingWithDelegate:self sourceView:cell]; //註冊cell } return cell; } - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ [tableView deselectRowAtIndexPath:indexPath animated:YES]; WebViewController *webVC = [WebViewController new]; webVC.urlStr = self.dataArray[indexPath.row]; //傳資料 webVC.hidesBottomBarWhenPushed = YES; [self.navigationController pushViewController:webVC animated:YES]; } #pragma mark - UIViewControllerPreviewingDelegate - (nullable UIViewController *)previewingContext:(id <UIViewControllerPreviewing>)previewingContext viewControllerForLocation:(CGPoint)location{ WebViewController *webVC = [WebViewController new]; //轉化座標 location = [self.tableView convertPoint:location fromView:[previewingContext sourceView]]; //根據locaton獲取位置 NSIndexPath *path = [self.tableView indexPathForRowAtPoint:location]; //根據位置獲取字典資料傳傳入控制器 webVC.urlStr = self.dataArray[path.row]; return webVC; } - (void)previewingContext:(id <UIViewControllerPreviewing>)previewingContext commitViewController:(UIViewController *)viewControllerToCommit{ viewControllerToCommit.hidesBottomBarWhenPushed = YES; [self.navigationController pushViewController:viewControllerToCommit animated:YES]; } |
peek預覽.png
在還沒觸發Pop，上劃預覽檢視，則下面可去設定一些選項
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
//這個方法實現設定一些選項 - (NSArray<id<UIPreviewActionItem>> *)previewActionItems{ //贊 UIPreviewAction *itemOne = [UIPreviewAction actionWithTitle:@"贊" style:UIPreviewActionStyleDefault handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) { [self showHint:@"已贊"]; }]; //舉報 UIPreviewAction *itemTwo = [UIPreviewAction actionWithTitle:@"舉報" style:UIPreviewActionStyleDestructive handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) { [self showHint:@"舉報成功"]; }]; //收藏 UIPreviewAction *itemThree = [UIPreviewAction actionWithTitle:@"收藏" style:UIPreviewActionStyleSelected handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) { [self showHint:@"收藏成功"]; }]; [self performSelector:@selector(hideHud) withObject:nil afterDelay:1]; //建立一個組包含操作 // UIPreviewActionGroup *group = [UIPreviewActionGroup actionGroupWithTitle:@"" style:UIPreviewActionStyleDefault actions:@[@"",@""]]; return @[itemOne,itemTwo,itemThree]; } - (void)viewDidLoad { [super viewDidLoad]; //控制器view置為webView - 請求傳入的url [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:_urlStr]]]; } |
peek設定預覽的一些觸發操作.png
3. Force Properties
iOS9.0為我們提供了一個新的互動引數:力度。我們可以檢測某一互動的力度值，來做相應的互動處理
|
1 2 3 4 |
// Force of the touch, where 1.0 represents the force of an average touch @property(nonatomic,readonly) CGFloat force NS_AVAILABLE_IOS(9_0); // Maximum possible force with this input mechanism @property(nonatomic,readonly) CGFloat maximumPossibleForce NS_AVAILABLE_IOS(9_0); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//聯絡的人介面 測試壓力大小對其view的背景顏色改變 - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ UITouch *touch = touches.anyObject; /** * maximumPossibleForce 最大 6.67 */ NSLog(@"%.2f,%2f",touch.force,touch.maximumPossibleForce); //iOS 9.0之後 CGFloat radio = touch.force / touch.maximumPossibleForce; self.view.backgroundColor = [UIColor colorWithRed:radio green:radio blue:radio alpha:1]; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//時尚之都介面 測試壓力改變在其view畫圓大小 - (void)drawRect:(CGRect)rect { [[UIColor blueColor] set]; [self.path fill]; } - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ UITouch *touch = touches.anyObject; UIBezierPath *path = [UIBezierPath bezierPath]; //壓力系數為半徑 觸控點為圓心 [path addArcWithCenter:[touch locationInView:self] radius:touch.force * 25 startAngle:0 endAngle:2 * M_PI clockwise:YES]; self.path = path; [self setNeedsDisplay]; } |
依據按壓力度畫圓.png
依據按壓力度大小改變控制器view的背景顏色.png
整體效果圖
3D Touch
基本上涉及到3D Touch的知識點就上面這些吧，也可以看下官網的3D Touch