美文网首页iOS相关技术程序员iOS进阶指南
SwiftCafe 快报 - 3D Touch 之 Peek &

SwiftCafe 快报 - 3D Touch 之 Peek &

作者: SwiftCafe | 来源:发表于2015-10-20 07:51 被阅读515次
    Peek Pop

    在前面几期快报中,我们介绍了 3D Touch 的基本内容,以及如何创建 3D Touch 桌面快捷菜单。这次咱们来讨论 3D Touch 的另外一个内容 - Peek & Pop 操作。

    所谓 Peek & Pop 其实就是 iOS 9 中为我们提供的一种预览功能,通过 3D Touch 来激发它的调用。比如我们在看短信或者邮件等信息的时候,通过按压列表中得内容,我们就能够得到一个预览视图。然后再继续用力按压,我们就可以从预览界面直接进入到内容页面。

    Peek & Pop 操作,也是 WWDC 中演示 3D Touch 的主要方面。它的实现其实也并不复杂,我们自己的 APP 中可以通过新的 API 很轻易的实现这个功能。

    下面咱们就来看看吧,首先我们定义一个 UIViewController:

    class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UIViewControllerPreviewingDelegate {
    
      let tableView = UITableView()
    
      let news = ["SwiftCafe 快报 - 3D Touch 实践之桌面快捷方式第二篇","SwiftCafe 快报 - TIOBE 10月编程语言排行 Swift 即将超越 Objective-C","SwiftCafe 快报 - iOS 9 新特性之 3D Touch"]
    
      override func viewDidLoad() {
          super.viewDidLoad()
    
    
      }
    
    }
    

    这个 ViewController 实现了三个 Protocol - UITableViewDelegate, UITableViewDataSource, UIViewControllerPreviewingDelegate

    前两个相信大家都比较熟悉了,都和 UITable 相关,用于我们展示列表信息。而最后一个 Protocol - UIViewControllerPreviewingDelegate 就比较重要了。它是实现 Peek & Pop 操作的关键。

    当然,我们还定义了两个属性 tableViewnews,它们只是用于信息展示。

    接着就是 UITableView 相关的代理方法的实现,都比较熟悉,大家一带而过即可:

    // MARK: TableView Delegate
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    
        return news.count
    
    }
    
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    
        return 1
    
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    
        let cellIdentifier = "cellIdentifier"
    
        var cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier)
    
        if cell == nil {
    
            cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: cellIdentifier)
    
        }
    
        cell?.textLabel?.text = news[indexPath.row]
    
        return cell!
    
    }
    
    

    无非是确定如何显示 UItableView 相关的信息。

    然后我们实现 viewDidLoad 方法,对整个控制器进行初始化工作:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        self.title = "3D Touch - Peek & Pop 示例"
        self.navigationItem.backBarButtonItem?.title = "返回"
        tableView.dataSource = self
        tableView.delegate = self
    
        self.navigationController?.navigationBar.translucent = false
    
        tableView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)
        self.view.addSubview(tableView)
    
        if traitCollection.forceTouchCapability == UIForceTouchCapability.Available {
    
            registerForPreviewingWithDelegate(self, sourceView: view)
    
        }
    
    }
    

    这个方法的前半部分,也基本都是一些 UI 元素的初始化工作。比较重要的是这个方法的后半部分,也就是:

    if traitCollection.forceTouchCapability == UIForceTouchCapability.Available {
    
        registerForPreviewingWithDelegate(self, sourceView: view)
    
    }
    

    这个判断的作用是检测当前设备是否支持 3D Touch,如果支持,就调用 registerForPreviewingWithDelegate(self, sourceView: view) 方法,将视图控制器的主视图注册为 3D Touch Peek & Pop 的主体。

    这时我们运行程序,就可以看到列表内容的展现了:

    UI 列表界面
    Peek Pop

    在前面几期快报中,我们介绍了 3D Touch 的基本内容,以及如何创建 3D Touch 桌面快捷菜单。这次咱们来讨论 3D Touch 的另外一个内容 - Peek & Pop 操作。

    所谓 Peek & Pop 其实就是 iOS 9 中为我们提供的一种预览功能,通过 3D Touch 来激发它的调用。比如我们在看短信或者邮件等信息的时候,通过按压列表中得内容,我们就能够得到一个预览视图。然后再继续用力按压,我们就可以从预览界面直接进入到内容页面。

    Peek & Pop 操作,也是 WWDC 中演示 3D Touch 的主要方面。它的实现其实也并不复杂,我们自己的 APP 中可以通过新的 API 很轻易的实现这个功能。

    下面咱们就来看看吧,首先我们定义一个 UIViewController:

    class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UIViewControllerPreviewingDelegate {
    
      let tableView = UITableView()
    
      let news = ["SwiftCafe 快报 - 3D Touch 实践之桌面快捷方式第二篇","SwiftCafe 快报 - TIOBE 10月编程语言排行 Swift 即将超越 Objective-C","SwiftCafe 快报 - iOS 9 新特性之 3D Touch"]
    
      override func viewDidLoad() {
          super.viewDidLoad()
    
    
      }
    
    }
    

    这个 ViewController 实现了三个 Protocol - UITableViewDelegate, UITableViewDataSource, UIViewControllerPreviewingDelegate

    前两个相信大家都比较熟悉了,都和 UITable 相关,用于我们展示列表信息。而最后一个 Protocol - UIViewControllerPreviewingDelegate 就比较重要了。它是实现 Peek & Pop 操作的关键。

    当然,我们还定义了两个属性 tableViewnews,它们只是用于信息展示。

    接着就是 UITableView 相关的代理方法的实现,都比较熟悉,大家一带而过即可:

    // MARK: TableView Delegate
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    
        return news.count
    
    }
    
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    
        return 1
    
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    
        let cellIdentifier = "cellIdentifier"
    
        var cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier)
    
        if cell == nil {
    
            cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: cellIdentifier)
    
        }
    
        cell?.textLabel?.text = news[indexPath.row]
    
        return cell!
    
    }
    
    

    无非是确定如何显示 UItableView 相关的信息。

    然后我们实现 viewDidLoad 方法,对整个控制器进行初始化工作:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        self.title = "3D Touch - Peek & Pop 示例"
        self.navigationItem.backBarButtonItem?.title = "返回"
        tableView.dataSource = self
        tableView.delegate = self
    
        self.navigationController?.navigationBar.translucent = false
    
        tableView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)
        self.view.addSubview(tableView)
    
        if traitCollection.forceTouchCapability == UIForceTouchCapability.Available {
    
            registerForPreviewingWithDelegate(self, sourceView: view)
    
        }
    
    }
    

    这个方法的前半部分,也基本都是一些 UI 元素的初始化工作。比较重要的是这个方法的后半部分,也就是:

    if traitCollection.forceTouchCapability == UIForceTouchCapability.Available {
    
        registerForPreviewingWithDelegate(self, sourceView: view)
    
    }
    

    这个判断的作用是检测当前设备是否支持 3D Touch,如果支持,就调用 registerForPreviewingWithDelegate(self, sourceView: view) 方法,将视图控制器的主视图注册为 3D Touch Peek & Pop 的主体。

    这时我们运行程序,就可以看到列表内容的展现了:

    peek-1.jpg

    怎么样,列表出现了,但这是我们用力按压列表项上的内容,并没有出现预料的结果。

    接下来,我们继续实现 3D Touch 操作处理部分,还记得我们前面提到的 UIViewControllerPreviewingDelegate 么,关键就在于这个 Protocol 中的两个方法:

    func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
    
        guard let indexPath = tableView.indexPathForRowAtPoint(location),
        cell = tableView.cellForRowAtIndexPath(indexPath)
            else {return nil}
    
        let detailViewController = DetailViewController()
        detailViewController.text = cell.textLabel!.text!
        return detailViewController
    }
    
    func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) {
        showViewController(viewControllerToCommit, sender: self)
    }
    
    

    这两个方法中,第一个方法 func previewingContext(previewingContext: viewControllerForLocation:) 是用于相应轻度按压后出现预览窗口的。当我们轻度按压主列表的条目时,我们就会创建一个 DetailViewController 并用它来展示预览内容。

    而第二个方法 func previewingContext(previewingContext: commitViewController:) 用于,当用户已经通过轻度按压激发出预览界面的时候,继续用力按压后,正式的进入详情页面。我们调用 showViewController 方法,来进入详情页面。

    实现完这两个方法,我们就可以像 WWDC 演示的那样,在我们自己的 APP 中响应 3D Touch 预览事件啦。有没有感觉很酷~

    而详细界面控制器的实现也需要我们做一些操作,我们来看一下 DetailViewController 的实现:

    class DetailViewController: UIViewController {
    
        var text:String = ""
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            self.title = "SwiftCafe 快报"
            self.navigationItem.backBarButtonItem?.title = "返回"
    
            let textView = UITextView(frame: CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height))
            textView.font = UIFont.systemFontOfSize(24)
            textView.text = text
            self.view.addSubview(textView)
    
        }
    
        override func previewActionItems() -> [UIPreviewActionItem] {
    
            let itemShare = UIPreviewAction(title: "分享", style: UIPreviewActionStyle.Default) {
                previewAction, viewController in
    
                let alertView = UIAlertView(title: "分享", message: "分享内容", delegate: nil, cancelButtonTitle: "确定")
                alertView.show()
    
            }
    
            return [itemShare]
    
        }
    
    }
    
    

    DetailViewControllerviewDidLoad 方法实现对 UI 进行了一些基本初始化操作,比较简单,不多赘述。

    previewActionItems 方法,大家可以稍加关注。

    我们在通过按压列表条目后,会弹出类似这样的预览视图:

    Peek 预览

    而这个预览视图,我们出来继续按压,进而打开真正的详情视图以外,我们还可以通过向上滑动手指,打开这个预览视图的操作界面,这样我们就可以不真正的进入详情页面,来对该条目进行一些特定的操作了,比如分享,删除,等等。

    我们这里实现的 previewActionItems 方法,正是为预览视图提供这些操作选项用的。每一个操作选项,都是一个 UIPreviewAction 类。

    接下来,我们可以运行这个示例,并按压后向上滑动,就可以打开预览视图的操作选项界面了:

    Peek 操作

    关于 3D Touch 的更多内容,还可以参看往期快报:

    更多精彩内容可关注微信公众号:
    swift-cafe

    相关文章

      网友评论

        本文标题:SwiftCafe 快报 - 3D Touch 之 Peek &

        本文链接:https://www.haomeiwen.com/subject/mmizcttx.html