iOS之实现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个快捷键。
操作 - 用手指用力按压Appicon,会出现类似的菜单快捷键(ShortcutItem),附上Demo的效果图(Home Screen Quick Actions)

按压icon.png
1. Home Screen Quick Actions

生成菜单 - 按压icon弹出快捷键的实现方法分为静态菜单、动态菜单等2种。

. 静态菜单 - 配置项目的.plist文件
目前Xcode版本的plist文件还没对应的key来获取,则 需要用户自己来手动输入UIApplicationShortcutItemsNSArray类型 - 内部都是字典- 对应 - 每个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 ()<UIViewControllerPreviewingDelegate>

具体实现

- (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,上划预览视图,则下面可去设置一些选项

//这个方法实现设置一些选项
- (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为我们提供了一个新的交互参数:力度。我们可以检测某一交互的力度值,来做相应的交互处理

// 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<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];
}
//时尚之都界面 测试压力改变在其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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,332评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,930评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,204评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,348评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,356评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,447评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,862评论 3 394
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,516评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,710评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,518评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,582评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,295评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,848评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,881评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,121评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,737评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,280评论 2 341

推荐阅读更多精彩内容