如何像JetBlue iPhone应用程序一样轻松地从屏幕外拖动面板

Question

我正在寻找一种方法，能够像JetBlue iPhone应用程序那样从屏幕外部滑出部分隐藏的工具面板。我知道如何使用常规的滑动手势识别器实现这一目标，但该应用程序有一个特定的门槛，超过该门槛后，面板会“弹回”到屏幕上的位置，否则它将再次隐藏在屏幕外部。

我该如何实现这种滑动显示的门槛手势识别器？有没有任何开源项目可以进行这种UI操作？

- Alex Stone

Answer 1

我写的一个应用程序中有一个类似的接口元素。我的接口元素是整个工具面板的UIViewController。我在gripper插图上放置一个UIButton，并将按钮类型更改为自定义，以使其在视觉上消失。我将“Touch Drag Inside”和“Touch Drag Outside”连接到IBAction，根据拖动移动的位置调整面板的位置。我将“Touch Up Inside”和“Touch Up Outside”连接到IBAction，以完成视图的定位。如果touch up事件发生得太靠近底部，我只需关闭面板。如果它发生在比该阈值高的任何地方，我就打开面板。我使用UIView的动画方法来平滑这些转换。JetBlue应用中看到的超扩展元素可以通过拖动事件处理程序实现。随着面板越来越接近极限，在每次较高的触摸移动中打开一个越来越小的视图。然后在最终化中，将面板动画回到其首选结束位置。

JetBlue应用程序与我的应用程序不同之处在于，我有一个小的抓手区域，但JetBlue的应用程序允许您滑动整个面板以调整位置。为了匹配该功能，我会调整我的实现方式，完全用按钮覆盖面板。每个按钮都会响应我的拖动事件，并设置一个标志。然后，我的touch up事件处理程序会检查标志是否设置。如果是，则完成面板的拖动。否则，执行与每个按钮相关联的适当操作。

- Mr. Berna

---

你如何在IBAction方法中获取触摸事件的坐标？ - samsam

@samsam：IBAction方法可以有三种签名之一，即无参数、一个参数（sender）和两个参数（sender和touch事件）。只需使用包含触摸位置数据的带有touch事件版本即可。 - Mr. Berna

Answer 2

如果您已经能够使用手势实现基本功能，那么您就快成功了！老实说，在我的应用程序中我也采用了老式的touchesBegan、touchesMoved等方式来实现这个功能。

至于手势，您需要使用UIPanGestureRecognizer，这样您就可以完全控制拖动。UISwipeGestureRecognizer只能识别轻扫操作。

无论如何，在某个特定点之后，您只需将面板平移一小部分距离即可。

CGRect newPanelFrame = panel.frame;
if (newPanelFrame.origin.y + dragOffset > 275) {
   newPanelFrame.origin.y += dragOffset / 2.0;
}
panel.frame = newPanelFrame;

在touchesEnded:withEvent:或if (gestureRecognizer.state == UIGestureRecognizerStateEnded)中。

CGRect newPanelFrame = panel.frame;
if (newPanelFrame.origin.y > 275) {
   newPanelFrame.origin.y = 275;
}
panel.frame = newPanelFrame;

我从未使用UIPanGestureRecognizer是因为我一直不知道如何获取非累积的平移（translationForView:是累积的），如果想在阈值后减缓拖动，则这是必需的。

- Kevin Low

Answer 3

我刚刚在研究如何实现类似的效果时，偶然发现了这篇文章，于是决定尝试一下JetBlue。

在玩弄滑动面板一会儿后，我实际上认为JetBlue的开发人员采用了稍微不同的方法。

JetBlue应用程序中滑块的动作似乎比使用一组UIGestureRecognizers更好；它能够根据用户快速滑动的速度以不同的速度进行动画处理，并且橡皮筋也可以正确地补偿这一点。

因此，在这一点上，我实际上认为他们没有使用UIGestureRecognizers，而那个面板实际上只是一个标准的UIScrollView，对齐到应用程序窗口的底部，并通过一些额外的逻辑（可能是通过委托应用）来确保滚动视图在“打开”和“关闭”状态之间不会停止动画。

- TiM