iOS開發之3D Touch

1.簡單的介紹一下3D Touch

3D Touch的觸控技術,被蘋果稱為新一代多點觸控技術。其實,就是此前在Apple Watch上采用的Force Touch,屏幕可感應不同的感壓力度觸控。

2.在模擬器上如何進行3D Touch測試

聲明:可能由于本人技術水平有限,按照此方法未能在模擬器上實現3D Touch功能,所以僅供參考!若有能實現者,請快告訴我喲!!!????

3D Touch 是一個很新穎的設計,可是蘋果文檔有言:

With Xcode 7.0 you must develop on a device that supports 3D Touch. Simulator in Xcode 7.0 does not support 3D Touch.

看到這句話心是不是涼了一半,是的,xcode7是支持3D Touch開發的,可是模擬器并不支持這個手勢,我們只能在真機上進行學習與測試,但是在IT的世界,從來都不缺拯救世界的人物,github上有人為我們提供了這樣的一個插件,可以讓我們在模擬器上進行3D Touch的效果測試:

git地址:https://github.com/DeskConnect/SBShortcutMenuSimulator

附.SBShortcutMenuSimulator的安裝和使用

其實安裝和使用并不需要怎么介紹,git主頁里介紹的很清楚,這里在記錄一遍,其中只有一點需要注意,如果你像我一樣,電腦中裝有Xcode6和Xcode7兩個版本,那個Xcode的編譯路徑,需要做一下修改。

安裝:

在終端中一次運行如下指令:

git clone https://github.com/DeskConnect/SBShortcutMenuSimulator.gitcd SBShortcutMenuSimulator

make

如果電腦中有多個Xcode版本,先做如下操作,如果只有Xcode7,則可以跳過

sudo xcode-select -switch /Applications/Xcode2.app/Contents/Developer/

注意:上面命令中,Xcode2.app是你電腦中Xcode的名字,這里如要特別注意,如果名字中有空格,需要修改一下,把空格去掉,否則會影響命令的執行。

之后在SBShortcutMenuSimulator的目錄中執行如下操作:

xcrun simctl spawn booted launchctl debug system/com.apple.SpringBoard --environment DYLD_INSERT_LIBRARIES=$PWD/SBShortcutMenuSimulator.dylib

xcrun simctl spawn booted launchctl stop com.apple.SpringBoard

如果沒有報錯,我們可以通過向指定端口發送消息的方法來在模擬器上模擬3D Touch的效果:

echo 'com.apple.mobilecal' | nc 127.0.0.1 8000

其中,com.apple.mobilecal是應用的Bundle ID ,如果要測試我們的應用,將其改為我們應用的BundleID即可,上面的示例應用是系統日歷,可以看到模擬器的效果如下:

3.如何實現3D Touch功能

3D Touch的三大模塊

3D Touch功能主要分為以下三個模塊:

1、Home Screen Quick Actions

通過主屏幕的應用Icon,我們可以用3D Touch呼出一個菜單,進行快速定位應用功能模塊相關功能的開發。如上面的日歷。

2、peek and pop

這個功能是一套全新的用戶交互機制,在使用3D Touch時,ViewController中會有如下三個交互階段:

(1)提示用戶這里有3D Touch的交互,會使交互控件周圍模糊

(2)繼續深按,會出現預覽視圖

(3)通過視圖上的交互控件進行進一步交互

? ? ? ? 這個模塊的設計可以在網址連接上進行網頁的預覽交互。

3、Force Properties

iOS9為我們提供了一個新的交互參數:力度。我們可以檢測某一交互的力度值,來做相應的交互處理。例如,我們可以通過力度來控制快進的快慢,音量增加的快慢等。

4.通過實例來看是如何實現3D Touch功能的

用一個簡單的相冊來舉例說明:

首先,創建Quick Action(用力按壓圖標出現的標簽)有兩種方式:靜態和動態

①靜態創建的方式是在Info.plist文件中進行聲明的

有兩種方式進行編輯:

(1)第一種方法——如圖所示:

選擇紅色框中的選項

將上面的代碼填入Info.plist文件中

必填項(下面兩個鍵值是必須設置的):

UIApplicationShortcutItemType 這個鍵值設置一個快捷通道類型的字符串

UIApplicationShortcutItemTitle 這個鍵值設置標簽的標題

選填項(下面這些鍵值不是必須設置的):

UIApplicationShortcutItemSubtitle 設置標簽的副標題

UIApplicationShortcutItemIconType 設置標簽Icon類型

UIApplicationShortcutItemIconFile? 設置標簽的Icon文件

(2)第二種方法

直接在Info.plist文件中添加如下代碼(紅色方框中的代碼):

其實靜態添加的兩種方法都是在Info.plist文件中添加的,只是通過的方式不同。

②以動態方式創建

動態創建是在程序初始化的時候用代碼動態添加。UIApplication對象多了一個支持快捷方式的數組(shortcutItems),如果需要增加快捷方式,可以賦值給shortcutItems屬性。

可在rootViewController的viewDidLoad中添加(具體寫哪,可根據自己情況而定),代碼如下:

UIApplicationShortcutItem * item = [[UIApplicationShortcutItem alloc]initWithType:@"two" localizedTitle:@"標簽2" localizedSubtitle:@"222" icon:[UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeLove] userInfo:nil];

// 設置自定義標簽圖片

UIApplicationShortcutItem * itemTwo = [[UIApplicationShortcutItem alloc]initWithType:@"two" localizedTitle:@"標簽3" localizedSubtitle:@"333" icon:[UIApplicationShortcutIcon iconWithTemplateImageName:@"jieri"] userInfo:nil];

UIApplicationShortcutItem * itemThird = [[UIApplicationShortcutItem alloc]initWithType:@"two" localizedTitle:@"標簽4" localizedSubtitle:@"444" icon:[UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeSearch] userInfo:nil];

[UIApplication sharedApplication].shortcutItems = @[item, itemTwo, itemThird];

說明:

1)系統限制每個App最多能夠顯示4個Action Item,其中包括靜態方式和動態方式進行創建的;

2)如果靜態和動態方式同時使用的時候,給UIApplication的shortcutItems賦值的時候不會覆蓋


按壓圖標的效果圖

響應回調

當App在后臺的時候UIApplication提供了一個回調方法

- (void)application:(UIApplication *)application performActionForShortcutItem:(UIApplicationShortcutItem *)shortcutItem completionHandler:(void(^)(BOOL succeeded))completionHandler NS_AVAILABLE_IOS(9_0);

我們依據這個回調中的shortcutItem的type和userinfo來做出不同的事件處理,代碼如下:

// 用來處理3D Touch觸發事件

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

//判斷先前我們設置的唯一標識

if([shortcutItem.localizedTitle isEqualToString:@"標簽1"]){

NSArray *arr = @[@"hello 3D Touch"];

UIActivityViewController *vc = [[UIActivityViewController alloc]initWithActivityItems:arr applicationActivities:nil];

//設置當前的VC 為rootVC

[self.window.rootViewController presentViewController:vc animated:YES completion:^{

}];

}

if ([shortcutItem.localizedTitle isEqual: @"標簽2"]) {

// 點擊標簽2時,顯示提示框

UIAlertController *alertC = [UIAlertController alertControllerWithTitle:@"OPPS!" message:@"啦啦啦" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *alert = [UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

}];

[alertC addAction:alert];

[self.window.rootViewController presentViewController:alertC animated:YES completion:^{

}];

return;

}

}

點擊標簽1的效果圖


點擊標簽2的效果圖

實際上就是,當我們按壓圖標,出現標簽,點擊某個標簽后觸發的事件

在rootViewController中創建一個UICollectionView,并實現其協議方法,代碼如下:

- (void)createCollectionView {

UICollectionViewFlowLayout *flow = [[UICollectionViewFlowLayout alloc] init];

/* API */

/* item 大小 */

flow.itemSize = CGSizeMake(100, 100);

/* 行間的最小間距 */

flow.minimumLineSpacing = 5.0f;

flow.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);

/* 創建collectionView對象 */

self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height - 64) collectionViewLayout:flow];

[self.view addSubview:self.collectionView];

self.collectionView.backgroundColor = [UIColor whiteColor];

/* 兩個協議 */

self.collectionView.dataSource = self;

self.collectionView.delegate = self;

[self.collectionView registerClass:[PicCollectionViewCell class] forCellWithReuseIdentifier:@"pic"];

}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

return self.arrPic.count;

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

PicCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pic" forIndexPath:indexPath];

cell.backgroundColor = [UIColor whiteColor];

cell.name = [self.arrPic objectAtIndex:indexPath.row];

return cell;

}

整理圖片相關數據:

- (void)handleData {

self.arrPic = [NSMutableArray array];

self.arrName = [NSMutableArray array];

for (int i = 1; i < 27; i ++) {

[self.arrPic addObject:[NSString stringWithFormat:@"%d", i]];

[self.arrName addObject:[NSString stringWithFormat:@"%c", i + 64]];

}

}

在自定義Cell中給圖片賦值

需要簽UIViewControllerPreviewingDelegate代理方法,為了實現peek and pop功能

(1)peek功能的實現

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事件的源視圖

首先要在viewDidLoad中進行注冊:

// 注冊預覽視圖的代理和來源視圖

[self registerForPreviewingWithDelegate:(id)self sourceView:self.view];

實現方法:

#pragma mark - 按壓圖片進入預覽模式

- (UIViewController * _Nullable)previewingContext:(id_Nonnull)previewingContext viewControllerForLocation:(CGPoint)location {

ContentViewController *content = [[ContentViewController alloc] init];

NSIndexPath *index = [self.collectionView indexPathForItemAtPoint:CGPointMake(location.x, location.y - 64 + self.collectionView.contentOffset.y)];

if (index == NULL) {

return nil;

} else {

content.name = [self.arrPic objectAtIndex:index.item];

content.picName = [self.arrName objectAtIndex:index.item];

return content;

}

}

按壓圖片進入預覽模式的效果圖

#pragma mark - 繼續按壓進入查看圖片

- (void)previewingContext:(id_Nonnull)previewingContext commitViewController:(UIViewController * _Nonnull)viewControllerToCommit

{

viewControllerToCommit.view.backgroundColor = [UIColor whiteColor];

[self showViewController:viewControllerToCommit sender:self];

}

繼續按壓進入查看圖片的效果圖

(2)pop功能的實現

在創建的ContentViewController中實現如下代碼:

首先在.h文件中聲明兩個屬性

@property (nonatomic, copy) NSString *name; ?// 圖片的文件名(如xxx.png)

@property (nonatomic, copy) NSString *picName; ?// 圖片名(如自己給圖片起的名字)

在.m文件中實現如下方法:

// 設置預覽視圖向上滑動時出現的視圖

- (NSArray> *)previewActionItems {

UIPreviewAction *action1 = [UIPreviewAction actionWithTitle:@"Action 1" style:UIPreviewActionStyleDefault handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) {

// 點擊此選項觸發

self.alertC = [UIAlertController alertControllerWithTitle:@"你查看的是:" message:[NSString stringWithFormat:@"圖片%@", self.picName] preferredStyle:UIAlertControllerStyleActionSheet];

UIAlertAction *alert = [UIAlertAction actionWithTitle:@"噢噢" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

}];

[self.alertC addAction:alert];

// 因為預覽視圖與根視圖不在一個視圖層級上,所以需要通過根視圖去推出這個

[[UIApplication sharedApplication].keyWindow.rootViewController presentViewController:self.alertC animated:YES completion:^{

}];

}];

// 可以添加多個選項

NSArray *arr = @[action1];

return arr;

}

視圖向上滑動時的效果圖


點擊Action1出現的效果圖

在viewDidLoad中添加如下代碼,將圖片顯示出來:

UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:self.name]];

image.frame = CGRectMake(20, 0, self.view.frame.size.width - 40, self.view.frame.size.width - 40);

image.center = CGPointMake(self.view.frame.size.width / 2, (self.view.frame.size.height - 64) / 2);

[self.view addSubview:image];

大概總結到這里,有待完善。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 專著:http://www.lxweimin.com/p/3443a3b27b2d 1.簡單的介紹一下3D Touc...
    violafa閱讀 1,040評論 1 0
  • 3D Touch是一種立體觸控技術,被蘋果稱為新一代多點觸控技術,是在Apple Watch上采用的Force T...
    暴_暴閱讀 1,266評論 1 9
  • 前言 3D Touch為用戶提供了全新維度上的交互,在支持3D Touch的設備上,用戶可以改變手指的按壓力度使設...
    Qiuny閱讀 572評論 0 2
  • 3D Touch簡介 2015年,蘋果發布了iOS9以及iphone6s/iphone6s Plus,其中最具有創...
    簡簡蝸牛閱讀 632評論 0 0
  • 3D Touch簡介 2015年,蘋果發布了iOS9以及iphone6s/iphone6s Plus,其中最具有創...
    愛恨的潮汐閱讀 390評論 0 2