3D Touch-对TableView里的具体控件操作,类似微博。
2016-09-01 22:30
369 查看
去年6S上市之后,立马入了新机,然后简单看了下3D Touch的API。当时只写了对Tableview的每个cell进行了操作的简单demo,还有就是对图标加了3D TOUCH操作。
最近的一个需求,就是TableView里的控件进行3D Touch操作。类似新浪微博那样,重按评论按钮或者重按点赞按钮,或者重按cell里的图片。
对整个Cell的3D TOUCH操作很简单,但是对立面的具体控件,一开始没思路...Google了很久,居然没找到类似。最后还是自己研究出来了...
这篇简书总体分为2部分:
一、对图标的3D TOUCH,直接代码添加,而且每次进入App后,关闭App,下次再对图标进行3D TOUCH,显示的title会改变。如下图,易车App的图标3D TOUCH的条目每次会记录你上次浏览的车型。
FullSizeRender.jpg
可以用NSUserDefaults或者其他数据持久化,来保存数据。
二、自定义cell,如下图,有头像、评论按钮和点赞按钮。
QQ20160901-0@2x.png
新建ViewController,集成自UITableViewController。
具体注释看下面代码。
效果截图:
按下按钮瞬间的效果
QQ20160901-1@2x.png
QQ20160901-0@2x.png
QQ20160901-0@2x.png
Peek 、Pop效果
Simulator Screen Shot 2016年9月1日 11.51.39.png
Simulator Screen Shot 2016年9月1日 11.51.46.png
Simulator Screen Shot 2016年9月1日 11.51.30.png
Demo下载地址:https://github.com/Karl0n/3D-Touch----TableView-
觉得还行的话,请给个...star。
有更好的实现,请留言,互相学习,3Q。
文/Karl0n(简书作者)
原文链接:http://www.jianshu.com/p/00e142f72686
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
最近的一个需求,就是TableView里的控件进行3D Touch操作。类似新浪微博那样,重按评论按钮或者重按点赞按钮,或者重按cell里的图片。
对整个Cell的3D TOUCH操作很简单,但是对立面的具体控件,一开始没思路...Google了很久,居然没找到类似。最后还是自己研究出来了...
这篇简书总体分为2部分:
一、对图标的3D TOUCH,直接代码添加,而且每次进入App后,关闭App,下次再对图标进行3D TOUCH,显示的title会改变。如下图,易车App的图标3D TOUCH的条目每次会记录你上次浏览的车型。
FullSizeRender.jpg
可以用NSUserDefaults或者其他数据持久化,来保存数据。
#import "AppDelegate.h" #import "ViewController.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [self set3DTouch]; self.window=[[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]]; self.window.backgroundColor=[UIColor whiteColor]; self.window.rootViewController=[[UINavigationController alloc]initWithRootViewController:[ViewController new]]; [self.window makeKeyAndVisible]; return YES; } -(void)set3DTouch { //每次进入app,count+1 //这里是为了演示动态加载 3D TOUCH,使用NSUserDefaults存储数据。 NSString * photocount = @""; if(![[NSUserDefaults standardUserDefaults]objectForKey:@"SharePhoto"]) { [[NSUserDefaults standardUserDefaults]setObject:@"0" forKey:@"SharePhoto"]; [[NSUserDefaults standardUserDefaults]synchronize]; count=0; photocount = @"分享照片"; } else { NSString * s =(NSString*)[[NSUserDefaults standardUserDefaults]objectForKey:@"SharePhoto"]; count=[s integerValue]+1; [[NSUserDefaults standardUserDefaults]setObject:[NSString stringWithFormat:@"%ld",count] forKey:@"SharePhoto"]; [[NSUserDefaults standardUserDefaults]synchronize]; photocount = [NSString stringWithFormat:@"分享照片+%ld",(long)count]; } UIApplicationShortcutIcon *icon1 = [UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeCompose]; UIApplicationShortcutIcon *icon2 = [UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeSearch]; UIApplicationShortcutIcon *icon3 = [UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeCapturePhoto]; UIMutableApplicationShortcutItem *item1 = [[UIMutableApplicationShortcutItem alloc]initWithType:@"0" localizedTitle:@"创建活动" localizedSubtitle:nil icon:icon1 userInfo:nil]; UIMutableApplicationShortcutItem *item2 = [[UIMutableApplicationShortcutItem alloc]initWithType:@"1" localizedTitle:@"查找店铺" localizedSubtitle:nil icon:icon2 userInfo:nil]; UIMutableApplicationShortcutItem *item3 = [[UIMutableApplicationShortcutItem alloc]initWithType:@"2" localizedTitle:photocount localizedSubtitle:nil icon:icon3 userInfo:nil]; NSArray *items = @[item1, item2, item3]; [UIApplication sharedApplication].shortcutItems = items; } - (void)application:(UIApplication *)application performActionForShortcutItem:(UIApplicationShortcutItem *)shortcutItem completionHandler:(void (^)(BOOL))completionHandler { NSString * type = shortcutItem.type; NSLog(@"type=%@",type); //在这里处理页面跳转 type 1、2、3就是3D touch的3个按钮。 }
二、自定义cell,如下图,有头像、评论按钮和点赞按钮。
QQ20160901-0@2x.png
新建ViewController,集成自UITableViewController。
具体注释看下面代码。
#import "ViewController.h" #import "DetailViewController.h" #import "TableViewCell.h" #define ScreenWidth self.view.frame.size.width #define ScreenHeight self.view.frame.size.height @interface ViewController ()<UITableViewDelegate,UITableViewDataSource,UIViewControllerPreviewingDelegate> @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.tableView.tableFooterView=[UIView new]; [self registerForPreviewingWithDelegate:self sourceView:self.tableView]; //注册代理 } -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return 20; } -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 70; } -(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { TableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"cell"]; if(!cell) { cell=[[TableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"]; cell.selectionStyle=UITableViewCellSelectionStyleNone; } return cell; } - (UIViewController *)previewingContext:(id <UIViewControllerPreviewing>)previewingContext viewControllerForLocation:(CGPoint)location { NSIndexPath * IndexPath = [self.tableView indexPathForRowAtPoint:location]; TableViewCell * cell = [self.tableView cellForRowAtIndexPath:IndexPath]; //获取touch的那个cell NSInteger index=3; NSMutableArray * array =[NSMutableArray array]; [array addObject:cell.imageview]; [array addObject:cell.button1]; [array addObject:cell.button2]; for(UIView * view in array) { if([self touchedView:view and:location]) { if([view isKindOfClass:[UIButton class]]) //判断touch是不是在button上 { UIButton*btn = (UIButton*)view; index=[array indexOfObject:btn]; // index为1或者2 } else if([view isKindOfClass:[UIImageView class]]) //判断touch是不是在imageview上 { index=0; } } } /* 只有 设置了 previewingContext.sourceRect,你touch的那个控件才会突出显示,其他区域变模糊。 */ DetailViewController * vc=[[DetailViewController alloc]init]; if(index==3) //touch在button1 button2 imageview 之外的区域 即cell上 { vc.string=[NSString stringWithFormat:@"3D Touched 第%ld行",IndexPath.row]; previewingContext.sourceRect = cell.frame; } else if(index==0) //touch 头像 { vc.string=[NSString stringWithFormat:@"3D Touched 第%ld行的头像",IndexPath.row]; previewingContext.sourceRect = [self.view convertRect:cell.imageview.frame fromView:cell]; } else if(index==1) //touch 评论 { vc.string=[NSString stringWithFormat:@"3D Touched 第%ld行的评论",IndexPath.row]; previewingContext.sourceRect = [self.view convertRect:cell.button1.frame fromView:cell]; } else if(index==2) //touch 赞 { vc.string=[NSString stringWithFormat:@"3D Touched 第%ld行的赞",IndexPath.row]; previewingContext.sourceRect = [self.view convertRect:cell.button2.frame fromView:cell]; } return vc; } -(void)previewingContext:(id<UIViewControllerPreviewing>)previewingContext commitViewController:(UIViewController *)viewControllerToCommit { [self showViewController:viewControllerToCommit sender:nil]; } -(BOOL)touchedView:(UIView*)view and:(CGPoint)location { CGPoint point = [view convertPoint:location fromView:self.tableView]; return CGRectContainsPoint(view.bounds,point); }
效果截图:
按下按钮瞬间的效果
QQ20160901-1@2x.png
QQ20160901-0@2x.png
QQ20160901-0@2x.png
Peek 、Pop效果
Simulator Screen Shot 2016年9月1日 11.51.39.png
Simulator Screen Shot 2016年9月1日 11.51.46.png
Simulator Screen Shot 2016年9月1日 11.51.30.png
Demo下载地址:https://github.com/Karl0n/3D-Touch----TableView-
觉得还行的话,请给个...star。
有更好的实现,请留言,互相学习,3Q。
文/Karl0n(简书作者)
原文链接:http://www.jianshu.com/p/00e142f72686
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
相关文章推荐
- IOS 实现3D Touch在tableView的简单应用
- IOS 实现3D Touch在tableView的简单应用(swift版)
- iOS 3D Touch开发tableview页面内的使用
- 类似朋友圈或微博的动态界面,NineGridImageView(九宫格图片控件)
- IOS在Table View添加3D Touch功能
- JavaFX表格控件TableView高级应用:自动添加ID列、删除操作列、单元格内容个性化渲染
- iOS中3DTouch预览导致TableView滑动卡顿问题解决的方法
- iPhone开发【七】常用控件之表TableView
- 用JS写的一个TableView控件代码
- 用JS写的一个TableView控件
- Monotouch Table View 里面动态增加Table View Cell Switch 触发Switch事件 程序崩溃
- sencha-touch类似combobox的控件
- iphone 下拉刷新控件 EGORefreshTableHeaderView 手动显示更新
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)
- android 解决 addView()操作之后,之前的控件位置重置的问题
- tableView中插入switch控件
- iphone开发之TableView控件实例
- Asp.Net Table控件动态生成表格操作实例(代码调试通过)
- 3d tableView 效果实现
- iPad横屏后TableView等控件相应的区域有问题