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

Posted 2023-03-12

【中文标题】如何在另一个 ViewController 前面将 UITableViewController 显示为向上滑动的手势？

【英文标题】：How to display UITableViewController as a swipe up gesture in front of another ViewController?

【发布时间】：2016-11-23 02:31:58

【问题描述】：

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

背景视图相当简单，它已经完成了。将在顶部滑动的视图将是 UITableView。我希望用户能够在应用程序启动时首先看到一点顶部，然后在轻扫一点时它应该停在中间，然后在完全向上滑动后应该一直到顶部，替换背景查看。

我看过的框架是 ios 的可拉视图。但它太旧了，没有任何漂亮的动画。我也看过 SWRevealViewController 但我不知道如何从下面向上滑动。

我也尝试过使用按钮，因此当用户单击它时，表格视图控制器会以模态方式出现，覆盖垂直方向，但这不是我想要的。它需要识别手势。

非常感谢任何帮助。谢谢。

【参考方案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 件事（在实际移动它之后）：

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

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

⚠️ 需要注意的一点是，我无法使其与实际的导航栏一起使用，因此我使用了一个“普通”视图，其中包含一个标签。

我尝试通过删除一些实用功能来缩小代码，例如检查用户交互是否完成，但这意味着用户可以停止在屏幕中间拖动并且应用程序根本不会做出反应，所以我真的建议您在 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])
    

【讨论】：

我喜欢这种方法，如果您可以添加所需的代码，而不仅仅是一个可能会在以后失效的链接，我会接受您的正确回答。

@Munib Github 上的示例项目怎么样？它仍然是一个链接，但至少我可以控制它。

只要你能解释一下这里的主要概念，然后提供示例代码。那会很有帮助。

@Munib 对不起，我花了这么长时间，但我刚才的答案是一个例子。

【参考方案2】：

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

原答案：

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

使用以下代码，您可以滑动任何 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 新手，所以这是我暂时能想到的最好的方法。

【讨论】：

什么是swipedDiscoveries？

嘿，我做了与此类似的事情，但不是 imageView ，而是我将此平移添加到 UIView 类型为 LineChartView，因为我试图显示带有 Charts pod 的图表。问题是，当我在 LineChartView 顶部向上滑动另一个视图时，LineChartView 的高度会降低，然后如果我完全向上滑动就会消失。我该如何解决？

【参考方案3】：

您可以将该表视图嵌入到自定义滚动视图中，该视图仅在触摸该表视图部分时处理触摸（覆盖 hittest），然后将其向上拖动（禁用表视图滚动），直到上部然后禁用滚动视图并启用表格视图再次滚动

或者，您可以将滑动手势添加到您的 tableview 中并更改它的框架并在到达顶部时禁用滑动

用这些做实验，最终你会达到你想要的效果

【参考方案4】：

正如 Tj3n 指出的那样，您可以使用 UISwipeGesture 来显示 UITableView。所以使用约束（而不是框架）你可以这样做：

转到您希望在其上显示UITableView 的故事板中的UIViewController。拖放UITableView 并将前导、尾随和高度添加到UITableView。现在在UIViewController 和UITableView 之间添加一个垂直约束，使UITableView 出现在UIViewController 的下方（玩弄这个垂直值，直到你可以显示@ 的顶部987654331@ 以满足您的需要）。为垂直间距约束和高度约束创建出口（以防您需要设置可以在运行时计算出的特定高度）。在向上滑动时，只需将垂直约束设置为等于高度的负值，就像这样：

topSpaceToViewControllerConstraint.constant = -mainTableViewHeightConstraint.constant

 UIView.animate(withDuration: 0.3)  

     view.layoutIfNeeded()
 ;

或者

如果您希望能够根据平移量（即取决于用户在屏幕上移动的量或速度）来提高 UITableView，您应该改用 UIPanGestureRecognizer 并尝试设置框架而不是 UITableView 的自动布局（因为我不喜欢反复调用 view.layoutIfNeeded。我在某处读到这是一项昂贵的操作，如果有人能确认或纠正这一点，将不胜感激）。

func handlePan(sender: UIPanGestureRecognizer) 

        if sender.state == .Changed 
               //update y origin value here based on the pan amount
        
    

或者使用 UITableViewController

如果您愿意，也可以使用UITableViewController 执行您希望执行的操作，但创建自定义UINavigationControllerDelegate 主要是为了创建将使用UIPercentDrivenInteractiveTransition 的自定义动画如果需要，请根据锅的数量使用UIPanGestureRecognizer 拉起新的UITableViewController。否则，您可以简单地添加UISwipeGestureRecognizer 来呈现UITableViewController，但您仍然需要再次创建自定义动画来“伪造”您想要的效果。

【讨论】：

谢谢，我要试试这个并报告。