千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:首页 > 关于学院 > 技术论坛  >  正文

技术解密:iOS 3D touch开发- peek and pop

时间:2016-12-02 13:27:57     来源:千锋教育 作者:千锋

  3D touch 是ios9+、iphone6s+的新功能,简单的说3Dtouch就是用力按压,通过3Dtouch增加了一组手势交互方式。

  3D touch主要常见的使用:

  1.Home Screen Quick Actions (主屏快捷行为入口)

  2.peek and pop (预览和弹出)

  3.Web view peek and pop API (HTML链接预览功能)

  4.Force Properties (按压力度)

图片1.png

  使用效果

  在tableview中,用力按住一栏,会出peek视图

图片2.png

图片3.png

  再次用力按一次,可以完全展示peek视图

  在预览页时,手指向上滑,会出现peek视图的快速选项

图片4.png

  iphone6s, iphone6s puls都支持3d touch 功能,原生应用email和短信都有这样的效果,大家可以动手试一下。

  代码实现

  大家都看了效果时候,是不是觉得挺酷呢,其实实现起来也非常的简单,我来做个简单的demo演示,分为3个步骤

  步骤1.显示peek视图

  步骤2.再次peek操作弹出视图

  步骤3.peek视图时手指上滑,唤出peek视图快速选项

  步骤1.显示peek视图

  实现peek视图我们需要在对应的tableViewController实现UIViewControllerPreviewingDelegate的方法

  func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {

  }

  然后在tableViewController中注册委托

  //注册委托

  registerForPreviewingWithDelegate(self, sourceView: view)

  在这个方法中,我们可以使用location拿到indexPath,方法如下:

  indexPath = tableView.indexPathForRowAtPoint(location)

  接着,我们申明一个peek视图的控制器,设置控制器内容和peek视图的大小,设置大小使用preferredContentSize属性,如果为0的话则系统自动配置最佳大小

  let detailViewController = DetailViewController()

  detailViewController.preferredContentSize = CGSize(width: 0.0, height: 0.0)

  previewingContext.sourceRect = cell.frame

  //设置peek视图显示的内容,这里我在detailViewController做的封装,设置了一个标题

  detailViewController.setContent("title", subTitle: "subtitle")

  //最后返回视图

  return detailViewController

  这样我们就完成了,运行程序,用力点击tableview的cell,就会出现peek视图了。

  步骤2.再次peek操作弹出视图

  要先有这个操作,需要实现UIViewControllerPreviewingDelegate的方法,并在方法中show这个视图就ok了,当然代码中也 可以加上一些逻辑处理,比如是不是有权限打开之类的操作

  func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) {

  // Reuse the "Peek" view controller for presentation.

  showViewController(viewControllerToCommit, sender: self)

  }

  步骤3.peek视图时手指上滑,唤出peek视图快速选项

  要实现这个操作,需要在peek视图对应的控制器中重写previewActionItems方法

  override func previewActionItems() -> [UIPreviewActionItem] {

  return previewActions

  }

  这里返回了一个UIPreviewActionItem,再来看看我们是如何构造这个Item的

  lazy var previewActions:[UIPreviewActionItem] = {

  func previewActionWithTitle(title:String, style:UIPreviewActionStyle = .Default) -> UIPreviewAction {

  return UIPreviewAction(title: title, style: style) { (previewAction, viewController) -> Void in

  NSLog("\(previewAction.title)")

  }

  }

  let a = previewActionWithTitle("a")

  let b = previewActionWithTitle("b", style: .Destructive)

  let c = previewActionWithTitle("c", style: .Selected)

  let d_e_f = UIPreviewActionGroup(title: "d&e&f ...",

  style: .Default,

  actions: [previewActionWithTitle("d"),previewActionWithTitle("e"),previewActionWithTitle("f")])

  return [a,b,c,d_e_f]

  }()

  这里稍微做几点说明:

  1.使用了swift特有的延迟加载功能,lazy关键字,这样的好处是在用到的时候才回去构造这个对象,当然这个并不是必须这样用的, 你也可以直接把他构造好。

  2.构造UIPreviewActionItem的方法函数是

  func previewActionWithTitle(title:String, style:UIPreviewActionStyle = .Default) -> UIPreviewAction {

  return UIPreviewAction(title: title, style: style) { (previewAction, viewController) -> Void in

  NSLog("\(previewAction.title)")

  }

  }

  这是一个闭包,最后一个方法里的函数是点击这个按钮后执行的代码。这个构造方法还有2个参数,一个是选项显示的文字,另一个是选项的样式, 选项的样式有3种,分别是default,select,Destructive

  3.可以通过构造UIPreviewActionGroup对象实现选项的2级选项

  好了,代码实现就到这里,下面自己动手赶快试一试吧。

相关文章

  • 北京天丰利校区(总部)地址:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2、3层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋3楼
    咨询电话: 0755-23015275/23015546-801(硅谷) 0755-86660670-801(大学城)
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训、好程序员
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训、好程序员
  • 郑州校区地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55191750
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:400-811-9990 028-83178771
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:400-811-9990 0571-86893632
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号 科技创新城19号楼B座五楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 南京校区地址:南京市建邺区应天大街780号应天智汇产业园弘辉园1幢2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱