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
?