如何在另一个ViewController前面显示UITableViewController作为向上滑动手势？

Question

我试图让这样的事情发挥作用.这是优步应用程序.用户可以在背景视图前向上滑动另一个视图.

背景视图相当简单,已经完成.将在顶部刷过的视图将是UITableView.我希望用户能够在应用程序启动时首先看到一个小的顶部,然后稍微滑动它应该在中间停止然后在完全向上滑动之后应该将它一直带到顶部,替换背景视图.

我看过的框架是iOS的可拉取视图.但它太老了,并没有得到任何好的动画.我也看过SWRevealViewController,但我无法弄清楚如何从下面向上滑动.

我也试过使用一个按钮,所以当用户点击它时,表视图控制器会以模态方式显示,覆盖垂直,但这不是我想要的.它需要识别手势.

任何帮助是极大的赞赏.谢谢.

编辑:如果将来有人有更好的实施方式,我将不接受我的回答并保持开放.即使我的回答有效,也可以改进.此外,它不像Uber应用程序那样流畅,这是我原来的问题.

Answer 1

我知道这个问题已经有将近 2 年半的历史了，但以防万一有人通过搜索引擎找到这个问题：

我会说你最好的选择是使用UIViewPropertyAnimator. 这里有一篇很棒的文章：http : //www.swiftkickmobile.com/building-better-app-animations-swift-uiviewpropertyanimator/

编辑：

我设法得到了一个简单的原型UIViewPropertyAnimator，这是它的 GIF：

这是 Github 上的项目：https : //github.com/Luigi123/UIViewPropertyAnimatorExample

基本上我有两个UIViewControllers，主要ViewController的一个叫做BottomSheetViewController. 辅助视图有一个UIPanGestureRecognizer使其可拖动，在识别器的回调函数中，我做了 3 件事（在实际移动它之后）：

? 计算屏幕被拖动了多少百分比，
？触发辅助视图本身的动画，
？通知有关拖动动作的主视图，以便它可以触发它的动画。在这种情况下，我使用 a Notification，将百分比传递给notification.userInfo.

我不确定如何表达？，例如，如果屏幕高 500 像素并且用户将辅助视图拖动到第 100 个像素，我计算出用户将其向上拖动了 20%。这个百分比正是我需要传递到实例fractionComplete内的属性中的UIViewPropertyAnimator。

?? 需要注意的一件事是，我无法使其与实际的导航栏一起使用，因此我使用了带有标签的“普通”视图。

我尝试通过删除一些实用功能来使代码更小，例如检查用户交互是否完成，但这意味着用户可以停止在屏幕中间拖动并且应用程序根本不会做出反应，所以我真的建议你在 github repo 中查看完整代码。但好消息是，执行动画的整个代码大约有 100 行代码。

考虑到这一点，以下是主屏幕的代码ViewController：

import UIKit
import MapKit
import NotificationCenter

class ViewController: UIViewController {
    @IBOutlet weak var someView: UIView!
    @IBOutlet weak var blackView: UIView!

    var animator: UIViewPropertyAnimator?

    func createBottomView() {
        guard let sub = storyboard!.instantiateViewController(withIdentifier: "BottomSheetViewController") as? BottomSheetViewController else { return }
        self.addChild(sub)
        self.view.addSubview(sub.view)
        sub.didMove(toParent: self)
        sub.view.frame = CGRect(x: 0, y: view.frame.maxY - 100, width: view.frame.width, height: view.frame.height)
    }

    func subViewGotPanned(_ percentage: Int) {
        guard let propAnimator = animator else {
            animator = UIViewPropertyAnimator(duration: 3, curve: .linear, animations: {
                self.blackView.alpha = 1
                self.someView.transform = CGAffineTransform(scaleX: 0.8, y: 0.8).concatenating(CGAffineTransform(translationX: 0, y: -20))
            })
            animator?.startAnimation()
            animator?.pauseAnimation()
            return
        }
        propAnimator.fractionComplete = CGFloat(percentage) / 100
    }

    func receiveNotification(_ notification: Notification) {
        guard let percentage = notification.userInfo?["percentage"] as? Int else { return }
        subViewGotPanned(percentage)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        createBottomView()

        let name = NSNotification.Name(rawValue: "BottomViewMoved")
        NotificationCenter.default.addObserver(forName: name, object: nil, queue: nil, using: receiveNotification(_:))
    }
}

以及辅助视图 ( BottomSheetViewController)的代码：

import UIKit
import NotificationCenter

class BottomSheetViewController: UIViewController, UIGestureRecognizerDelegate {
    @IBOutlet weak var navBarView: UIView!

    var panGestureRecognizer: UIPanGestureRecognizer?
    var animator: UIViewPropertyAnimator?

    override func viewDidLoad() {
        gotPanned(0)
        super.viewDidLoad()

        let gestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(respondToPanGesture))
        view.addGestureRecognizer(gestureRecognizer)
        gestureRecognizer.delegate = self
        panGestureRecognizer = gestureRecognizer
    }

    func gotPanned(_ percentage: Int) {
        if animator == nil {
            animator = UIViewPropertyAnimator(duration: 1, curve: .linear, animations: {
                let scaleTransform = CGAffineTransform(scaleX: 1, y: 5).concatenating(CGAffineTransform(translationX: 0, y: 240))
                self.navBarView.transform = scaleTransform
                self.navBarView.alpha = 0
            })
            animator?.isReversed = true
            animator?.startAnimation()
            animator?.pauseAnimation()
        }
        animator?.fractionComplete = CGFloat(percentage) / 100
    }

    // MARK: methods to make the view draggable

    @objc func respondToPanGesture(recognizer: UIPanGestureRecognizer) {
        let translation = recognizer.translation(in: self.view)
        moveToY(self.view.frame.minY + translation.y)
        recognizer.setTranslation(.zero, in: self.view)
    }

    private func moveToY(_ position: CGFloat) {
        view.frame = CGRect(x: 0, y: position, width: view.frame.width, height: view.frame.height)
        let maxHeight = view.frame.height - 100
        let percentage = Int(100 - ((position * 100) / maxHeight))
        gotPanned(percentage)
        let name = NSNotification.Name(rawValue: "BottomViewMoved")
        NotificationCenter.default.post(name: name, object: nil, userInfo: ["percentage": percentage])
    }
}

Answer 2

编辑：所以，一段时间过去了，现在有一个名为Pulley 的非常棒的库。它完全符合我的要求，而且设置起来轻而易举！

原答案：

感谢 Rikh 和 Tj3n 给我提示。我设法做了一些非常基本的事情，它没有像优步那样漂亮的动画，但它完成了工作。

使用以下代码，您可以滑动任何 UIViewController。我在我的图像上使用了一个 UIPanGestureRecognizer，它将始终停留在拖动视图的顶部。基本上，您使用该图像并识别它被拖动的位置，并根据用户的输入设置视图的框架。

首先转到您的故事板并为将被拖动的 UIViewController 添加一个标识符。

然后在 MainViewController 中，使用以下代码：

class MainViewController: UIViewController {

// This image will be dragged up or down.
@IBOutlet var imageView: UIImageView!

// Gesture recognizer, will be added to image below.
var swipedOnImage = UIPanGestureRecognizer()

// This is the view controller that will be dragged with the image. In my case it's a UITableViewController.
var vc = UIViewController()

override func viewDidLoad() {
    super.viewDidLoad()

    // I'm using a storyboard.
    let sb = UIStoryboard(name: "Main", bundle: nil)

    // I have identified the view inside my storyboard.
    vc = sb.instantiateViewController(withIdentifier: "TableVC")

    // These values can be played around with, depending on how much you want the view to show up when it starts.
    vc.view.frame = CGRect(x: 0, y: self.view.frame.height, width: self.view.frame.width, height: -300)


    self.addChildViewController(vc)
    self.view.addSubview(vc.view)
    vc.didMove(toParentViewController: self)

    swipedOnImage = UIPanGestureRecognizer(target: self, action: #selector(self.swipedOnViewAction))
    imageView.addGestureRecognizer(swipedOnImage)

    imageView.isUserInteractionEnabled = true

}

// This function handles resizing of the tableview.
func swipedOnViewAction() {

    let yLocationTouched = swipedOnImage.location(in: self.view).y

    imageView.frame.origin.y = yLocationTouched

    // These values can be played around with if required. 
    vc.view.frame =  CGRect(x: 0, y: yLocationTouched, width: UIScreen.main.bounds.width, height: (UIScreen.main.bounds.height) - (yLocationTouched))
    vc.view.frame.origin.y = yLocationTouched + 50

}

完成品

现在，我的答案可能不是最有效的方法，但我是 iOS 新手，所以这是我暂时能想到的最好方法。