How to gently drag a panel from the screen, for example, the iPhone JetBlue application

Question

I'm looking for a way to copy a partially hidden toolbar from the screen , as the iPhone JetBlue application does. I know how to do this using conventional gesture recognizers, but this application has a certain threshold, after which the panel “snaps” to the screen position, otherwise it hides behind the scenes.

How can I implement this kind of swipe to show, but with a threshold sign of gesture recognition? Are there any open source projects that run this type of user interface?

Answer 1

If you can already implement the basics with gestures, then you are almost there!

Honestly, although I did just that in my application, I use old-fashioned strokes of Began, touchhesMoved, etc.

In terms of gestures, you will need to use the UIPanGestureRecognizer so that you can fully control the drag and drop. UISwipeGestureRecognizer recognizes only swipes.

In any case, after a certain moment, you simply translate the panel only part of the distance that the person was dragging.

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

In touchesEnded:withEvent: or if (gestureRecognizer.state == UIGestureRecognizerStateEnded)

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

The reason I never bothered with UIPanGestureRecognizer is because I could never figure out how to get a non-cumulative translation (translationForView: cumulative), which is necessary if you want to significantly slow down drag and drop after the threshold.

Answer 2

I have a similar interface element in the application that I wrote. My interface element is the UIViewController for the entire toolbar. I put UIButton over the capture image, changed the button type to custom to visually disappear. I connect Touch Drag Inside and Touch Drag Outside to IBAction, which adjusts the position of the panel depending on where the drag and drop moves. I connect Touch Up Inside and Touch Up Out to IBAction, which completes the positioning of the view. If the touch event happens too close to the base, I just close the panel. If this happens somewhere above this threshold, I open the panel. I use UIView's animation techniques to smooth out these transitions. The extended extension item that is visible in the JetBlue application can be executed in the drag event handler. As the panel gets closer and closer to the limit, open the view with fewer and fewer numbers each time you move the touch higher. Then, in the finalization, just animate the panel back into it with your preferred end position.

The JetBlue application differs from my application in that I have a small capture area, but the JetBlue application allows you to scroll the entire panel to adjust the position. To match this functionality, I would adjust my implementation to completely cover the panel with buttons. Each will respond to my drag events, adding that the drag will set a flag. Then my touch up event handler will check if the flag has been set. If so, finish dragging the panel. Otherwise, perform the appropriate actions associated with each button.

Answer 3

I just did some research to achieve a similar effect, came across this message, and as a result decided to try JetBlue.

After playing with the sliding panel a bit, I really think that the JetBlue guys have really changed that a bit.

The slider movements in the JetBlue app look much better than you can do with the UIGestureRecognizers collection; it is able to revive at different speeds, depending on how quickly the user selects it, and the rubber band also compensates for this.

In this note, I really think that they do not use UIGestureRecognizers, but this panel is actually a standard UIScrollView aligned at the bottom of the application window, and with a bit of additional logic (perhaps with the help of a delegate), which simply ensures that the scroll view will not stop the animation between the open and off state.