iOS開發(fā)之3DTouch詳解

自蘋果在2015年發(fā)布3dtouch功能以來， iPhone 6s之后的機(jī)型全都匹配了 3dtouch功能。此功能的發(fā)布將手機(jī)屏幕的的操作坐標(biāo)由xy軸擴(kuò)大至z軸，增加了整整一個維度，這在屏幕時代屬于非常偉大的創(chuàng)新。

keep美女郵票鎮(zhèn)樓.jpeg

蘋果的3dtouch功能主要有3中呈現(xiàn)方式

  • 主屏交互(Home Screen Interaction)
  • 預(yù)覽和跳轉(zhuǎn)(Peek and Pop)
  • LivePhoto
    本文主要講解一下前兩種用法

主屏交互

所謂的主屏交互也就是在手機(jī)的桌面頁，用力的按壓（當(dāng)然別太用力。。按碎了屏幕）應(yīng)用圖標(biāo)，生成的幾個快捷操作按鈕的。


主屏交互的演示圖.jpg

主屏交互的按鈕有指定的模型類，UIApplicationShortcutItem，
添加shortCutItem有兩種方式：

  1. 靜態(tài)添加
  2. 動態(tài)添加

靜態(tài)添加 shortCutItem

這種方式主要是在工程的info.plist文件中添加相關(guān)的屬性。
如下圖所示


info plist.jpeg
  • UIApplicationShortcutItemIconFile
    主屏交互中使用的按鈕自定義圖片名。
  • UIApplicationShortcutItemTitle
    主屏交互中使用的按鈕名稱。
  • UIApplicationShortcutItemType
    主屏交互中使用的按鈕的唯一標(biāo)示符，用作判斷點擊了哪一個快捷按鈕。
  • UIApplicationShortcutItemSubtitle
    快捷可選項的子標(biāo)題(可選)
  • UIApplicationShortcutItemIconType
    快捷可選項的圖標(biāo)(可選)
  • UIApplicationShortcutItemUserInfo
    快捷可選項的附加信息(可選)

動態(tài)添加 shortCutItem

UIApplicationShortcutItem：可以看作是3D Touch點擊后，彈出菜單每行對應(yīng)的模型，一行對應(yīng)一個UIApplicationShortcutItem對象。
動態(tài)添加時就是我們可以通過生成shortcutItem對象數(shù)組，添加給
UIApplication單例對象.
UIApplicationShortcutItem 初始方法如下

- (instancetype)initWithType:(NSString *)type localizedTitle:(NSString *)localizedTitle localizedSubtitle:(nullable NSString *)localizedSubtitle icon:(nullable UIApplicationShortcutIcon *)icon userInfo:(nullable NSDictionary *)userInfo;
  • type
    快捷可選項的特定字符串(必填)
  • localizedTitle
    快捷可選項的標(biāo)題(必填)
  • localizedSubtitle
    快捷可選項的子標(biāo)題(可選)
  • icon
    快捷可選項的圖標(biāo)(可選)
  • userInfo
    快捷可選項的附加信息(可選)

初始化生成對象這一步操作我們可以寫在app的啟動方法里：

-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

生成shortcutItem代碼，以及賦值給UIApplication單例數(shù)組

NSMutableArray *arrShortcutItem = (NSMutableArray *)[UIApplication sharedApplication].shortcutItems;
    
UIApplicationShortcutItem *shoreItem1 = [[UIApplicationShortcutItem alloc] initWithType:@"co.erplus.search" localizedTitle:@"搜索" localizedSubtitle:nil icon:[UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeSearch] userInfo:nil];
[arrShortcutItem addObject:shoreItem1];
    
UIApplicationShortcutItem *shoreItem2 = [[UIApplicationShortcutItem alloc] initWithType:@"co.erplus.newTask" localizedTitle:@"新建任務(wù)" localizedSubtitle:@"" icon:[UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeCompose] userInfo:nil];
[arrShortcutItem addObject:shoreItem2];
    
[UIApplication sharedApplication].shortcutItems = arrShortcutItem;

在動態(tài)添加快捷按鈕時，我并沒有選擇使用自定義的圖片，因為蘋果也為我們準(zhǔn)備了很多系統(tǒng)圖標(biāo)，也是非常豐富的。

蘋果準(zhǔn)備的系統(tǒng)icon.jpg

蘋果的系統(tǒng)icon是豐富的，但如果想使用自定的圖標(biāo)icon，官方推薦一倍圖使用35x35。

監(jiān)聽主屏交互按鈕的點擊事件

成功設(shè)置好主屏交互的快捷按鈕后，我們剩下要做的就是在APP內(nèi)監(jiān)聽快捷按鈕的點擊事件，此時我們就需要用到UIApplicationShortcutItemType，快捷按鈕的唯一標(biāo)示符。

- (void)application:(UIApplication *)application performActionForShortcutItem:(UIApplicationShortcutItem *)shortcutItem completionHandler:(void (^)(BOOL))completionHandler {
    //不管APP在后臺還是進(jìn)程被殺死，只要通過主屏快捷操作進(jìn)來的，都會調(diào)用這個方法
    NSLog(@"name:%@\ntype:%@", shortcutItem.localizedTitle, shortcutItem.type);    
}

用這個方法就可以監(jiān)聽到按鈕的點擊事件了，通過shortcutItem.type區(qū)別點擊的是哪一個按鈕，進(jìn)行不同的跳轉(zhuǎn)或者操作。

預(yù)覽和跳轉(zhuǎn)

Peek and Pop 在操作上是指用戶在手機(jī)屏幕上用力按壓想要預(yù)覽的選項位置，彈出一個可以預(yù)覽二級頁面的預(yù)覽窗口，可以根據(jù)設(shè)置，設(shè)置一些快捷的操作選項，以類似sheetAlertView的方式呈現(xiàn)出來。

預(yù)覽窗.png

peek&pop.jpg

根據(jù)上圖流程，點擊ListView中指定欄，會跳轉(zhuǎn)到DetailView詳情頁，但加入3dtouch后，用力按壓會出現(xiàn)Preview視圖，力度到達(dá)最大極限會去到DetailView。

1. 要完成Peek and Pop，首先要在ListView視圖控制器需要遵守UIViewControllerPreviewingDelegate協(xié)議
@interface ViewController () <uiviewcontrollerpreviewingdelegate>
2. 在ListView控制器中注冊3dtouch功能。
[self registerForPreviewingWithDelegate:self sourceView:view];

sourceView就是控制器上需要響應(yīng)3dtouch的視圖。

3. ListView控制器實現(xiàn)peek方法
- (nullable UIViewController *)previewingContext:(id <UIViewControllerPreviewing>)previewingContext viewControllerForLocation:(CGPoint)location NS_AVAILABLE_IOS(9_0) {

}
  • previewingContext
    注冊了3dtouch的視圖，也就是sourceView。
  • location
    手指在屏幕上按壓的位置，通?？梢愿鶕?jù)這個位置計算出是在按壓哪一個單元格。

在peek方法中返回了UIViewController，這個控制器就是會預(yù)覽出來的控制器了，因為并沒有對這個返回值受限，所以返回的預(yù)覽視圖是可以自定義的，即可以預(yù)覽真是的二級頁面視圖，也可以自定義一個視圖，包含一些關(guān)鍵內(nèi)容給大家預(yù)覽。

注冊心得：
本人在學(xué)習(xí)使用3dtouch的時，看了很多開發(fā)者寫的關(guān)于3dtouch使用的博客，大部分peek效果都會用在tableViewCell上，長按cell預(yù)覽DetailView視圖。因為在peek方法里需要設(shè)置一個previewingContext.sourceRect，用力按壓中過度的一個效果，一般設(shè)置的范圍就是cell的frame范圍，為了方便的取到cell的frame,很多朋友的注冊都寫在了cellForRowAtIndexPath方法里。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

本人先開始也學(xué)習(xí)了這個方法，動態(tài)的注冊了3dtouch，但在后來在使用應(yīng)用中，ListView發(fā)生了慘烈的滑動卡頓問題，后來經(jīng)過排查發(fā)現(xiàn)在cellForRowAtIndexPath方法里動態(tài)注冊3dtouch嚴(yán)重消耗tableView的性能，造成了卡頓。

建議將3dtouch注冊在控制器的view或者tableView上，在頁面生成的時候注冊一次，然后通過peek方法中的location來計算點擊的單元格位置，這樣寫在體驗不變情況下，減少了性能的消耗。

4. ListView控制器實現(xiàn)pop方法
- (void)previewingContext:(id <UIViewControllerPreviewing>)previewingContext commitViewController:(UIViewController *)viewControllerToCommit NS_AVAILABLE_IOS(9_0) {
        NewTaskDetailVC *vc = [NewTaskDetailVC alloc] init];
        [self showViewController:vc sender:self];
}

pop方法是3dtouch 效果的最后一步了，用力的按壓想要預(yù)覽的單元格，力度達(dá)到了極限會直接進(jìn)入到DetailView。
在這個方法里做一般的Push操作就可以了。

5.快捷菜單的生成（類sheetAlertView）

如果我們需要在ListView快速預(yù)覽視圖出現(xiàn)時，向上拖拽得到一個快捷功能菜單，這個需要在DetailView中重寫以下方法：

- (NSArray<id<UIPreviewActionItem>> *)previewActionItems {
    
    NSMutableArray *arrItem = [NSMutableArray array];
    
    UIPreviewAction *previewAction0 = [UIPreviewAction actionWithTitle:@"開始任務(wù)" style:UIPreviewActionStyleDestructive handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) {
        
        NSLog(@"點擊開始任務(wù)");
    }];
    
    UIPreviewAction *previewAction1 = [UIPreviewAction actionWithTitle:@"快速延期" style:UIPreviewActionStyleDefault handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) {
      
        NSLog(@"點擊快速延期");
    }];
    
    [arrItem addObjectsFromArray:@[previewAction0 ,previewAction1]];
    
    return arrItem;
}

將這段代碼加入到 DetailView中，在peek階段向上滑動就可以出現(xiàn)類sheetAlertView的選項菜單欄了。

終語

寫到此處3DTouch的功能終于算是介紹完了！別攔住我！擼貓去咯～～～

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容