I'd like to be able to have a UIView (or, if necessary, UIViewController), which can be 'dragged'/flicked/swiped off screen - but locked to the vertical axis (so the view would go up or down off the screen to show the view below). This is sort of like the Facebook app's web views.
Could this perhaps be achieved with UIGravityBehavior?
Any ideas would be fantastic.
I have made something similar a while ago by using a UIPanGestureRecognizer. Here is how this would work:
float slidingMenuOffsetSum;
- (void)handleSlidingMenuPan:(UIPanGestureRecognizer *)gestureRecognizer {
CGPoint translation = [gestureRecognizer translationInView:_slidingMenuView];
slidingMenuOffsetSum += translation.y;
CGPoint newSlidingMenuCenter = CGPointMake(_slidingMenuView.center.x, _slidingMenuView.center.y + translation.y);
if (_slidingMenuView.frame.origin.y <= 512 && _slidingMenuView.frame.origin.y >= 0) {
_slidingMenuView.center = newSlidingMenuCenter;
}
[gestureRecognizer setTranslation:CGPointZero inView:_slidingMenuView];
if (gestureRecognizer.state == UIGestureRecognizerStateEnded) {
[UIView animateWithDuration:0.3
animations:^{
[_slidingMenuView setUserInteractionEnabled:false];
if (slidingMenuOffsetSum > 0) {
if (slidingMenuOffsetSum > _slidingMenuView.frame.size.height / 4) {
[self setSlidingMenuHidden:false];
} else {
[self returnSlidingMenuToPosition];
}
} else {
if (slidingMenuOffsetSum < -_slidingMenuView.frame.size.height / 4) {
[self setSlidingMenuHidden:true];
} else {
[self returnSlidingMenuToPosition];
}
}
}
completion:^(BOOL finished) {
slidingMenuOffsetSum = 0;
[_slidingMenuView setUserInteractionEnabled:true];
}];
}
}
You can adjust the values at which the sliding menu can move, and the thresholds for detecting if the view should go back to its original position, or eg. go off the screen.
Related
I am trying to make a UIView open & close on Swipe/Pan Gesture & i found some help from following link
Link , it's close to what i m trying to make.
I want UIView to be open by 100 pixels default & User can swipe/pan the UIView using gesture till 75% of the parent UIViewController & back to 100 pixels but it's flicking in this below code. I want UIView's X position to be 0 so it can be like a drawer opening from top.
- (void)viewDidLoad {
[super viewDidLoad];
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(move:)];
drawerView = [self.storyboard instantiateViewControllerWithIdentifier:#"drawerVC"];
[drawerView.view setFrame:CGRectMake(0, -self.view.frame.size.height + 100, self.view.frame.size.width, self.view.frame.size.height * 0.75)];
[drawerView.view setBackgroundColor:[UIColor redColor]];
[drawerView.view addGestureRecognizer:panGesture];
}
-(void)move:(UIPanGestureRecognizer*)recognizer {
recognizer.view.center = CGPointMake(self.view.frame.size.width/2,
recognizer.view.center.y + translation.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:self.view];
if (recognizer.state == UIGestureRecognizerStateEnded) {
CGFloat magnitude = sqrtf((velocity.x * velocity.x) + (velocity.y * velocity.y));
CGFloat slideMult = magnitude / 200;
NSLog(#"magnitude: %f, slideMult: %f", magnitude, slideMult);
float slideFactor = 0.1 * slideMult; // Increase for more of a slide
CGPoint finalPoint = CGPointMake(0,
recognizer.view.center.y + (velocity.y * slideFactor));
finalPoint.x = 0;
finalPoint.y = MIN(MAX(finalPoint.y, 0), drawerView.view.frame.size.height*.75);
if (fabs(recognizer.view.frame.origin.y) >= fabs(yOffset))
{
return;
}
NSLog(#"ended %f",finalPoint.y);
if (finalPoint.y < recognizer.view.frame.size.height/2) {
// [self movePanelToOriginalPosition];
}
else{
[self movePanelToCenterPosition];
}
}
}
-(void)movePanelToCenterPosition {
[UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
drawerView.view.frame = CGRectMake(0, 0, drawerView.view.frame.size.width, drawerView.view.frame.size.height);
}
completion:^(BOOL finished) {
// Stuff to do
}];
}
Is there anything that can prevent user to pan UIView in Top(Up) direction if UIView is at default(100 pixels) & can only swipe down to desired CGPoint.
In your move: method you check if the move start or is in progress
else if (recognizer.state == UIGestureRecognizerStateBegin || recognizer.state == UIGestureRecognizerStateChanged)" and in the if view is at its limit. if so you can disabled/reenabled the gesture recognizer. This will cancel the pan...
- (void) move:(UIGestureRecognizer *)sender
{
if(sender.state == UIGestureRecognizerStateBegan || sender.state == UIGestureRecognizerStateChanged)
{
BOOL shouldEnablePan = NO; // TODO: do some logic here to figure out if you want to allow pan
if(!shouldEnablePan && [sender isKindOfClass:[UIPanGestureRecognizer class]])
{
sender.enabled = NO;
sender.enabled = YES;
}
} else ...
}
this is a very simple problem but i can't figure it out. first, here is how the views are added as sub view and I'm using Autolayout. the (black) root view contains blue colored and orange coloured views. the orange coloured view is the tops most which partly covers the blue view. the button in orange view has pan gesture recognizer. i got it working if gestures ends then orange view positions itself properly.( either just like in the photo covering the blue view, or orange can be slided down till only the orange is visible.) the orange view's position is only changed vertically using autolayout constant.
the issue I'm facing is that if one pans up and down UIGestureRecognizerStateChanged then it happens that the orange view slides to the opposite direction of panning. how to change the auto layout constant properly? the orange view's range of vertical movement is from starting point like in the sketch downward till that orange button remains visible.
#define MIN_SIZE 50
-(void)handlePan:(UIPanGestureRecognizer *) pan
{
CGFloat viewHeight = pan.view.superview.height; //superView is the big orange view
if (pan.state == UIGestureRecognizerStateBegan)
{
self.startLocation = [pan locationInView:self.view];
}
if (pan.state == UIGestureRecognizerStateChanged)
{
CGPoint stopLocation = [pan locationInView:self.view];
CGFloat dist = sqrt(pow((stopLocation.x - self.startLocation.x), 2) + pow((stopLocation.y - self.startLocation.y), 2));
if (velocityOfPan.y > 0)
{
if (self.verticalConstraint.constant >= viewHeight - MIN_SIZE)
{
self.verticalConstraint.constant = viewHeight - MIN_SIZE;
}
else
self.verticalConstraint.constant = dist;
}
else if(velocityOfPan.y < 0)
{
if (self.verticalConstraint.constant <= 0)
{
self.verticalConstraint.constant = 0;
}
else
{
self.verticalConstraint.constant = (viewHeight - MIN_SIZE - dist);
}
}
}
else if(pan.state == UIGestureRecognizerStateEnded)
{
if (velocityOfPan.y > 0)
{
self.verticalConstraint.constant = viewHeight - MIN_SIZE;
}
else if (velocityOfPan.y < 0)
{
self.verticalConstraint.constant = 0;
}
}
[self updateViewAnimation];
}
}
-(void) updateViewAnimation
{
[self.view updateConstraintsIfNeeded];
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:-1 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
[self.view layoutIfNeeded];
} completion:nil];
}
after some searching and reading I found out what I was doing wrong. Here is how I solved it, just in case somebody else wanna know it.
-(void)(UIPanGestureRecognizer *) pan
{
CGPoint velocityOfPan = [pan velocityInView:self.view];
CGFloat viewHeight = pan.view.superview.height;
CGPoint delta;
switch(pan.state)
{
case UIGestureRecognizerStateBegan:
self.startLocation = delta = [pan translationInView:self.view];
break;
case UIGestureRecognizerStateChanged:
{
delta = CGPointApplyAffineTransform([pan translationInView:self.view], CGAffineTransformMakeTranslation(-self.startLocation.x, -self.startLocation.y));
self.startLocation = [pan translationInView:self.view];
if(delta.y < 0 && self.verticalConstraint.constant < 0)
{
delta.y = 0;
}
else
{
delta.y = self.verticalConstraint.constant + delta.y;
}
self.verticalConstraint.constant = delta.y;
[self updateViewAnimation];
break;
}
case UIGestureRecognizerStateEnded:
{
if (velocityOfPan.y > 0)
{
delta.y = (viewHeight - MIN_SIZE);
}
else if(velocityOfPan.y < 0)
{
delta.y = 0;
}
self.verticalConstraint.constant = delta.y;
[self updateViewAnimation];
break;
}
default:
break;
}
}
I used MCPanelViewController in an iOS app for drawing left and right controllers (As android has inbuilt control drawer). It works good but it does not come with gesture it comes little late. if anyone had an answer to problem it would be great.
This is the code in UIViewController (MCPanelViewControllerInternal) category:
- (void)handlePan:(UIPanGestureRecognizer *)pan {
// initialization for screen edge pan gesture
if ([pan isKindOfClass:[UIScreenEdgePanGestureRecognizer class]] &&
pan.state == UIGestureRecognizerStateBegan) {
__weak UIViewController *controller = objc_getAssociatedObject(pan, &MCPanelViewGesturePresentingViewControllerKey);
if (!controller) {
return;
}
MCPanelAnimationDirection direction = [objc_getAssociatedObject(pan, &MCPanelViewGestureAnimationDirectionKey) integerValue];
[self setupController:controller withDirection:direction];
CGPoint translation = [pan translationInView:pan.view];
CGFloat width = direction == MCPanelAnimationDirectionLeft ? translation.x : -1 * translation.x;
[self layoutSubviewsToWidth:0];
__weak typeof(self) weakSelf = self;
[UIView animateWithDuration:MCPanelViewAnimationDuration delay:0 options:0 animations:^{
typeof(self) strongSelf = weakSelf;
[strongSelf layoutSubviewsToWidth:width];
} completion:^(BOOL finished) {
}];
CGFloat offset = self.maxWidth - width;
if (direction == MCPanelAnimationDirectionLeft) {
offset *= -1;
}
[pan setTranslation:CGPointMake(offset, translation.y) inView:pan.view];
}
if (!self.parentViewController) {
return;
}
CGFloat newWidth = [pan translationInView:pan.view].x;
if (self.direction == MCPanelAnimationDirectionRight) {
newWidth *= -1;
}
newWidth += self.maxWidth;
CGFloat ratio = newWidth / self.maxWidth;
switch (pan.state) {
case UIGestureRecognizerStateBegan:
case UIGestureRecognizerStateChanged: {
[self layoutSubviewsToWidth:newWidth];
break;
}
case UIGestureRecognizerStateEnded:
case UIGestureRecognizerStateCancelled: {
CGFloat threshold = MCPanelViewGestureThreshold;
// invert threshold if we started a screen edge pan gesture
if ([pan isKindOfClass:[UIScreenEdgePanGestureRecognizer class]]) {
threshold = 1 - threshold;
}
if (ratio < threshold) {
[self dismiss];
}
else {
__weak typeof(self) weakSelf = self;
[UIView animateWithDuration:MCPanelViewAnimationDuration delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
typeof(self) strongSelf = weakSelf;
[strongSelf layoutSubviewsToWidth:strongSelf.maxWidth];
} completion:^(BOOL finished) {
}];
}
break;
}
default:
break;
}
}
This is a known issue of the library.
To quote matthewcheok:
The delay is mainly due to way the panel captures the background image to apply the image blur in advance. It does this exactly once, when the gesture is triggered or when opened programatically, and then crops the image using UIView content modes, to show only the relevant parts obscured by the panel.
I'm developing an iOS6 app for iPad. I have coded a subclass of UITextField that enables the user to drag, pinch and rotate the field around the view. The problem is that if you pinch the field with no rotation, after finishing the gesture, it enters in editing mode. This should not happen, and I've added some lines that disable that, but it doesn't stop. Here I my code:
- (BOOL) canBecomeFirstResponder{
if (gesturing==YES) {
return NO;
}else return YES;
}
- (void) tapDetected:(UITapGestureRecognizer*) pinchRecognizer {
if (gesturing==NO) {
[self becomeFirstResponder];
}
}
- (void) pinchDetected:(UIPinchGestureRecognizer*) pinchRecognizer {
CGFloat scale = pinchRecognizer.scale;
self.font = [self.font fontWithSize:self.font.pointSize*(scale)];
//self.transform = CGAffineTransformScale(self.transform, scale, scale);
[self sizeToFit];
pinchRecognizer.scale = 1.0;
if (pinchRecognizer.state == UIGestureRecognizerStateChanged) {
gesturing =YES;
}
if (pinchRecognizer.state == UIGestureRecognizerStateBegan) {
gesturing =YES;
}
if (pinchRecognizer.state == UIGestureRecognizerStateEnded) {
gesturing =NO;
}
}
- (void) panDetected:(UIPanGestureRecognizer *)panRecognizer {
CGPoint translation = [panRecognizer translationInView:self.superview];
CGPoint imageViewPosition = self.center;
imageViewPosition.x += translation.x;
imageViewPosition.y += translation.y;
self.center = imageViewPosition;
[panRecognizer setTranslation:CGPointZero inView: self.superview];
if (panRecognizer.state == UIGestureRecognizerStateChanged) {
gesturing=YES;
}
if (panRecognizer.state == UIGestureRecognizerStateEnded) {
gesturing=NO;
}
}
- (void) rotationDetected:(UIRotationGestureRecognizer *)rotationRecognizer{
CGFloat angle = rotationRecognizer.rotation;
self.transform = CGAffineTransformRotate(self.transform, angle);
rotationRecognizer.rotation = 0.0;
if (rotationRecognizer.state == UIGestureRecognizerStateChanged) {
gesturing = YES;
}
if (rotationRecognizer.state == UIGestureRecognizerStateEnded) {
gesturing = NO;
}
}
- (BOOL) gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
return YES;
}
I bydefault value of gesturing is NO, if you don't initialize it to YES. Have debugged and figured out which gesture recognizer is detected first whenever you try to apply pinch?
You support simultaneous gesture recognition and hence when you put to apply pinch, your finger's touch may get detected as pan. If it is the case then if(gesturing == NO) condition in tapDetected: method gets satisfied and your textField becomes first responder.
I have a UIPanGestureRecognizer that is attached to a UIView. What I am trying to do is essentially drag and drop into a bucket. If the user lets go of the UIView and it's not in the bucket, I want it to animate back to its original start location. My selector that gets called for my UIPanGestureRecognizer is:
- (void)handleDragDescriptionView:(UIPanGestureRecognizer *)gestureRecognizer {
UIView *panViewPiece = [gestureRecognizer view];
CGRect originalFrame = CGRectMake(946, 20, 58, 30);
CGPoint translation = [gestureRecognizer translationInView:panViewPiece];
if (gestureRecognizer.state == UIGestureRecognizerStateBegan || gestureRecognizer.state == UIGestureRecognizerStateChanged) {
panViewPiece.center = CGPointMake(panViewPiece.center.x + translation.x, panViewPiece.center.y + translation.y);
[gestureRecognizer setTranslation:CGPointZero inView:panViewPiece.superview];
}
else if (gestureRecognizer.state == UIGestureRecognizerStateCancelled) {
[UIView animateWithDuration:0.25 animations:^{
self.dragDescriptionView.frame = originalFrame;
}];
}
else {
[UIView animateWithDuration:0.25 animations:^{
self.dragDescriptionView.frame = originalFrame;
}];
}
}
I was wondering if I could do this without the originalFrame at the top of the method. I originally had
CGRect originalFrame = _dragDescriptionView.frame;
instead of the hardcoding, but it doesn't snap back. Probably because I'm updating that value as I am dragging. I don't particularly like hardcoding values, but I wasn't sure if there was a way around this. Thanks!
You really only need to track the view's original center. Make originalCenter an instance variable and only set it when the gesture begins:
#implementation MyViewController {
CGPoint _originalCenter;
}
- (void)handleDragDescriptionView:(UIPanGestureRecognizer *)gestureRecognizer {
UIView *panViewPiece = [gestureRecognizer view];
switch (gestureRecognizer.state) {
case UIGestureRecognizerStateBegan:
_originalCenter = panViewPiece.center;
break;
case UIGestureRecognizerStateChanged: {
CGPoint translation = [gestureRecognizer translationInView:panViewPiece.superview];
panViewPiece.center = CGPointMake(panViewPiece.center.x + translation.x, panViewPiece.center.y + translation.y);
[gestureRecognizer setTranslation:CGPointZero inView:panViewPiece.superview];
break;
}
case UIGestureRecognizerStateEnded:
case UIGestureRecognizerStateCancelled: {
[UIView animateWithDuration:0.25 animations:^{
panViewPiece.center = _originalCenter;
}];
break;
}
default:
break;
}
}