我正试图让这样的事情发挥作用。这是优步应用程序。用户可以在背景视图前面向上滑动另一个视图。
背景视图相当简单，它已经完成了。将在顶部滑动的视图将是 UITableView。我希望用户能够在应用程序启动时首先看到一点顶部，然后在轻扫一点时它应该停在中间，然后在完全向上滑动后应该一直到顶部，替换背景查看。
我看过的框架是 iOS 的可拉视图。但它太旧了，没有任何漂亮的动画。我也看过 SWRevealViewController 但我不知道如何从下面向上滑动。
我也尝试过使用按钮，因此当用户单击它时，表格视图控制器会以模态方式出现，覆盖垂直方向，但这不是我想要的。它需要识别手势。
非常感谢任何帮助。谢谢。
【问题讨论】：
标签： ios swift uitableview uigesturerecognizer
我知道这个问题已经有将近 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])
}
}
【讨论】：
编辑：所以，一段时间过去了，现在有一个非常棒的库，叫做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？
您可以将该表视图嵌入到自定义滚动视图中，该视图仅在触摸该表视图部分时处理触摸（覆盖 hittest），然后将其向上拖动（禁用表视图滚动），直到上部然后禁用滚动视图并启用表格视图再次滚动
或者，您可以将滑动手势添加到您的 tableview 中并更改它的框架并在到达顶部时禁用滑动
用这些做实验，最终你会达到你想要的效果
【讨论】：
正如 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，但您仍然需要再次创建自定义动画来“伪造”您想要的效果。
【讨论】：