3D Touch簡介

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

. 動態菜單 - 代碼實現快捷菜單,動態添加方法需要代碼執行一次,因此靜態方法比動態方法優先加載

- (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跳轉到對應的頁面

//菜單跳轉

- (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

@interface TableViewController ()

具體實現

- (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 )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 )previewingContext commitViewController:(UIViewController *)viewControllerToCommit{

? ?viewControllerToCommit.hidesBottomBarWhenPushed = YES;

? ?[self.navigationController pushViewController:viewControllerToCommit animated:YES];

}

peek預覽.png

在還沒觸發Pop,上劃預覽視圖,則下面可去設置一些選項

//這個方法實現設置一些選項

- (NSArray> *)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為我們提供了一個新的交互參數:力度。我們可以檢測某一交互的力度值,來做相應的交互處理

// 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);

//聯系的人界面 測試壓力大小對其view的背景顏色改變

- (void)touchesMoved:(NSSet *)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];

}

//時尚之都界面 測試壓力改變在其view畫圓大小

- (void)drawRect:(CGRect)rect {

? ?[[UIColor blueColor] set];

? ?[self.path fill];

}

- (void)touchesMoved:(NSSet *)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

?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,786評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,656評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,697評論 0 379
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,098評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,855評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,254評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,322評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,473評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,014評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,833評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,016評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,568評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,273評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,680評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,946評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,730評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,006評論 2 374

推薦閱讀更多精彩內容

  • 3D Touch簡介 2015年,蘋果發布了iOS9以及iphone6s/iphone6s Plus,其中最具有創...
    愛恨的潮汐閱讀 388評論 0 2
  • 專著:http://www.lxweimin.com/p/3443a3b27b2d 1.簡單的介紹一下3D Touc...
    violafa閱讀 1,023評論 1 0
  • 前言 關于這篇文章 由于iPhone 6S發布不到一年的時間,很多新特性、新技術還未普遍,不管是3D Touch的...
    Tangentw閱讀 4,524評論 8 18
  • 一、屏幕圖標使用3D Touch創建快速進入入口: 1、與之相關的類: (1)、 UIApplicationSho...
    尋形覓影閱讀 726評論 0 0
  • 1.簡單的介紹一下3D Touch 3D Touch的觸控技術,被蘋果稱為新一代多點觸控技術。其實,就是此前在Ap...
    Camille_chen閱讀 12,076評論 19 33