My app consists of a deck of cards. Each card has a scrollview that allows you to look at images associated with that card. You can drag to look at another card in the deck via pan gesture. Unfortunately, if you don't do a clean drag the first time (like if you drag half way and then lift your finger off), the app gets stuck on that card. You can scroll up and down, but you won't be able to drag. When you try, you just move backgroundScrollView around within the superview(so swiping right means you see the grey, right margins between scrollview and superview).
This is the method that UIPanGestureRecognizer calls:
-(void)beingDragged:(UIPanGestureRecognizer *)gestureRecognizer {
NSLog(#"I am being dragged");
xFromCenter = [gestureRecognizer translationInView:self].x; //%%% positive for right swipe, negative for left
yFromCenter = [gestureRecognizer translationInView:self].y; //%%% positive for up, negative for down
switch (gestureRecognizer.state) {
//%%% just started swiping
case UIGestureRecognizerStateBegan:{
self.backgroundScrollView.scrollEnabled = NO;
self.originalPoint = self.center;
_backgroundScrollView.autoresizingMask = UIViewAutoresizingNone;
_backgroundScrollView.translatesAutoresizingMaskIntoConstraints = YES;
likeBadge.autoresizingMask = UIViewAutoresizingNone;
likeBadge.translatesAutoresizingMaskIntoConstraints = YES;
passBadge.autoresizingMask = UIViewAutoresizingNone;
passBadge.translatesAutoresizingMaskIntoConstraints = YES;
reviewButton.autoresizingMask = UIViewAutoresizingNone;
reviewButton.translatesAutoresizingMaskIntoConstraints = YES;
break;
};
//%%% in the middle of a swipe
case UIGestureRecognizerStateChanged:{
//%%% dictates rotation (see ROTATION_MAX and ROTATION_STRENGTH for details)
CGFloat rotationStrength = MIN(xFromCenter / ROTATION_STRENGTH, ROTATION_MAX);
//%%% degree change in radians
CGFloat rotationAngel = (CGFloat) (ROTATION_ANGLE * rotationStrength);
//%%% amount the height changes when you move the card up to a certain point
CGFloat scale = MAX(1 - fabsf(rotationStrength) / SCALE_STRENGTH, SCALE_MAX);
//%%% move the object's center by center + gesture coordinate
self.center = CGPointMake(self.originalPoint.x + xFromCenter, self.originalPoint.y + yFromCenter);
//%%% rotate by certain amount
CGAffineTransform transform = CGAffineTransformMakeRotation(rotationAngel);
//%%% scale by certain amount
CGAffineTransform scaleTransform = CGAffineTransformScale(transform, scale, scale);
//%%% apply transformations
self.transform = scaleTransform;
[self updateOverlay:xFromCenter:yFromCenter];
break;
};
//%%% let go of the card
case UIGestureRecognizerStateEnded: {
self.backgroundScrollView.scrollEnabled = YES;
[self afterSwipeAction];
break;
};
case UIGestureRecognizerStatePossible:{
self.backgroundScrollView.scrollEnabled = YES;
};
case UIGestureRecognizerStateCancelled:{
self.backgroundScrollView.scrollEnabled = YES;
};
case UIGestureRecognizerStateFailed:{
self.backgroundScrollView.scrollEnabled = YES;
};
}
}
My solution has been to set
_backgroundScrollView.translatesAutoresizingMaskIntoConstraints = NO;
whereas before it was set to YES. This does mean that scrollView now leaks out of the view when you swipe, but that's for another post...
Related
I am building up a simple application that is made up of a UITableViewController with languages and when a specific cell is clicked, a UIPageViewController is brought up to represent the images for that selected language. The user can scroll through the images and everything works as desired. The next step was to build a zooming capability into the UIPageViewController so the user could zoom into the images with a pinch gesture.
I have achieved this with the following code:
- (void)viewDidLoad
{
[super viewDidLoad];
self.leafletImages = [NSMutableArray arrayWithObjects:[[ImageModel alloc] initWithImageName:#"3facts-chinese-page1.jpg"], [[ImageModel alloc] initWithImageName:#"3facts-chinese-page2.jpg"], [[ImageModel alloc] initWithImageName:#"3facts-chinese-page3.jpg"], [[ImageModel alloc] initWithImageName:#"3facts-chinese-page4.jpg"], [[ImageModel alloc] initWithImageName:#"3facts-chinese-page5.jpg"], [[ImageModel alloc] initWithImageName:#"3facts-chinese-page6.jpg"], nil];
// Lots of code for the building up of the UIPageViewController
LeafletImageSizeViewController *imageViewController = [[LeafletImageSizeViewController alloc] init];
imageViewController.model = [_modelArray objectAtIndex:0];
NSArray *viewControllers = [NSArray arrayWithObject:imageViewController];
[self.pageViewController setViewControllers:viewControllers
direction:UIPageViewControllerNavigationDirectionForward
animated:NO
completion:nil];
// Gesture
UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:#selector(pinchDetected:)];
[self.view addGestureRecognizer:pinchRecognizer];
pinchRecognizer.delegate=self;
}
The class creating the image and the size is:
- (void)useThreeFactsSize
CGRect insetFrame;
insetFrame = CGRectMake(310, 70, self.view.frame.size.width-615, self.view.frame.size.height-85);
_imageView = [[UIImageView alloc] initWithFrame:insetFrame];
[_imageView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
[_imageView setImage:[UIImage imageNamed:_model.imageName]];
[[self view] addSubview:_imageView];
[self.view setBackgroundColor:[UIColor clearColor]];
}
The pinchDetection method is:
-(void)pinchDetected:(UIPinchGestureRecognizer *)pinchRecognizer
{
CGFloat scale = pinchRecognizer.scale;
self.pageViewController.view.transform = CGAffineTransformScale(self.pageViewController.view.transform, scale, scale);
pinchRecognizer.scale = 1.0;
}
Now, I can zoom into the images of the UIPageViewController without any issues and it works really well.
What I want to do however is two things:
Not allow the image to be zoomed out beyond the original scale
Create a double tap gesture to bring the image back to it's original scale
With feature 1, the user can zoom into the image, but also completely zoom out of the image which shrinks the image and the UIPageViewController pageIndicators. There's no reason the user should be able to zoom out of the image, so I'd like to allow the user to zoom in to any scale, but not to zoom out beyond what the original size of the image on screen in the UIPageViewController.
With feature 2, I'd like to implement a gesture to double tap the screen and for the zoomed image to go back to it's original scale (like the Photos.app).
Update
With reference to the answer, I have updated the question to reflect how I'm going about doing the images. With point 2 and the double tap gesture, the following code almost works:
- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer *)recognizer
{
NSLog(#"Double Tap");
self.pageViewController.view.transform = CGAffineTransformIdentity;
}
What it's currently doing is if I zoom in with a pinch and pan around, and then double tap, it centres the image to the point of where I tapped, so sometimes the borders are being shown, etc, rather than making the image centre to where it's supposed to be.
For point 1:
if (pinchRecognizer.scale > 1) {
CGFloat scale = pinchRecognizer.scale;
self.pageViewController.view.transform = CGAffineTransformScale(self.pageViewController.view.transform, scale, scale);
pinchRecognizer.scale = 1.0;
}
If I have self.imageview, it doesn't work because it's nil and even if I make a call to the class setting the size, it's nil as well.
I suspect I have a number of things wrong with my code!
For reference, I have panning working with:
- (void)panGestureDetected:(UIPanGestureRecognizer *)recognizer
{
UIGestureRecognizerState state = [recognizer state];
if (state == UIGestureRecognizerStateBegan || state == UIGestureRecognizerStateChanged)
{
CGPoint translation = [recognizer translationInView:recognizer.view];
[recognizer.view setTransform:CGAffineTransformTranslate(recognizer.view.transform, translation.x, translation.y)];
[recognizer setTranslation:CGPointZero inView:recognizer.view];
}
else if(state==UIGestureRecognizerStateEnded){
UIView *imageView = recognizer.view;
UIView *container = imageView.superview;
CGFloat targetX = CGRectGetMinX(imageView.frame);
CGFloat targetY = CGRectGetMinY(imageView.frame);
if(targetX>0){
// targetX = 0;
}else if(CGRectGetMaxX(imageView.frame)<CGRectGetWidth(container.bounds)){
targetX = CGRectGetWidth(container.bounds)-CGRectGetWidth(imageView.frame);
}
if(targetY>0){
// targetY = 0;
}else if(CGRectGetMaxY(imageView.frame)<CGRectGetHeight(container.bounds)){
// targetY = CGRectGetHeight(container.bounds)-CGRectGetHeight(imageView.frame);
}
// imageView.frame = CGRectMake(targetX, targetY, CGRectGetWidth(imageView.frame), CGRectGetHeight(imageView.frame));
[UIView animateWithDuration:0.3 animations:^{
imageView.frame = CGRectMake(targetX, targetY, CGRectGetWidth(imageView.frame), CGRectGetHeight(imageView.frame));
}];
}
}
That's working very well at the moment, but there's definitely a conflict with everything else.
I'd really appreciate any guidance in the right direction on this.
1.) To not allow the image to be zoomed out beyond it's original scale you first just need to check if the scale you're about to set it to is greater than 1 or not. If it's less than one, you don't want to rescale your image as that would mean it gets smaller. So...
#IBAction func doPinch(sender: UIPinchGestureRecognizer) {
if sender.scale > 1 {
let transform = CGAffineTransformMakeScale(sender.scale, sender.scale)
imageView.transform = transform
}
}
2.) You seem to be changing the view's frame to try and change it's scale, but you never adjusted the view's frame yourself in the first place. You're adjusting the view's transform. That means in order to return it to it's original size you must remove whatever transform you put on it. To do this you put it back to it's identity. So...
#IBAction func doDoubleTap(sender: UITapGestureRecognizer) {
imageView.transform = CGAffineTransformIdentity
}
My code samples are in Swift but you should be able to adjust it to Objective-C yourself. Also, you seem to be adjusting the transform/scale of the entire page view itself. I would suggest you change the scale of only the image view. That makes more sense as that's actually what you're trying to zoom into.
I want to a UIView to drag to bottom of the screen on Pan Gesture but also the view alpha should scale down to "zero", when it reaches to the bottom of the screen.
And vise versa, when I will drag the view upwards then the UIView alpha should scale down to "1"
But the problem is that the view's alpha is scaling down to "Zero" on panning half of the screen or sometimes when I drag the view slower.
Initially I have made the UIView background color to Black.
I need to scale down the alpha of the view gradually , any idea or suggestion will be helpful.
UIPanGestureRecognizer * panner = nil;
panner = [[UIPanGestureRecognizer alloc] initWithTarget: self action:#selector(handlePanGesture:)];
[self.view addGestureRecognizer:panner ];
[panner setDelegate:self];
[panner release];
CGRect frame = CGRectMake(0, 0, 320, 460);
self.dimmer = [[UIView alloc] initWithFrame:frame];
[self.dimmer setBackgroundColor:[UIColor blackColor]];
[self.view addSubview:dimmer];
-(IBAction) handlePanGesture:(UIPanGestureRecognizer *) sender {
static CGPoint lastPosition = {0};
CGPoint nowPosition; float alpha = 0.0;
float new_alpha = 0.0;
nowPosition = [sender translationInView: [self view]];
alpha = [dimmer alpha] -0.0037;
dimmer.alpha -=alpha;
}
I would look at the point on the screen you are currently at inside your handlePanGesture: find the percentage you are at on the view CGFloat percentage = nowPosition.y/self.view.frame.size.height; then set the alpha to that dimmer.alpha = 1.0 - percentage;. This way no matter where you are moving, you are setting the alpha to how close to the bottom you are.
You aren't scaling relative to your gesture; you're setting dimmer.alpha = 0.0037 every time handlePanGesture: executes, regardless of pan direction or distance.
-(IBAction) handlePanGesture:(UIPanGestureRecognizer *) sender {
static CGPoint lastPosition = {0};
CGPoint nowPosition;
float alpha = 0.0;
float new_alpha = 0.0; // Unused!!
nowPosition = [sender translationInView: [self view]]; // Unused!!
alpha = [dimmer alpha] - 0.0037;
dimmer.alpha -= alpha; // === dimmer.alpha = dimmer.alpha - (dimmer.alpha - 0.0037)
// === dimmer.alpha = 0.0037 !!!
}
A better implementation might look something like this:
-(IBAction) handlePanGesture:(UIPanGestureRecognizer *) sender {
CGPoint nowPosition = [sender translationInView: [self view]];
CGFloat alpha = dimmer.alpha - ([sender translationInView: [self view]].y)/320.0;
dimmer.alpha = MAX(0, MIN(1, alpha));
}
I'm following this guide here: http://guti.in/articles/creating-tinder-like-animations/ in order to recreate a Tinder-like swiping card effect.
Long story short, I have a UIView with a PanGestureRecognizer set to do the following:
- (void)dragged:(UIPanGestureRecognizer *)gestureRecognizer
{
CGFloat xDistance = [gestureRecognizer translationInView:self].x;
CGFloat yDistance = [gestureRecognizer translationInView:self].y;
switch (gestureRecognizer.state) {
case UIGestureRecognizerStateBegan:{
self.originalPoint = self.center;
break;
};
case UIGestureRecognizerStateChanged:{
CGFloat rotationStrength = MIN(xDistance / 320, 1);
CGFloat rotationAngel = (CGFloat) (2*M_PI * rotationStrength / 16);
CGFloat scaleStrength = 1 - fabsf(rotationStrength) / 4;
CGFloat scale = MAX(scaleStrength, 0.93);
self.center = CGPointMake(self.originalPoint.x + xDistance, self.originalPoint.y + yDistance);
CGAffineTransform transform = CGAffineTransformMakeRotation(rotationAngel);
CGAffineTransform scaleTransform = CGAffineTransformScale(transform, scale, scale);
self.transform = scaleTransform;
break;
};
case UIGestureRecognizerStateEnded: {
[self resetViewPositionAndTransformations];
break;
};
case UIGestureRecognizerStatePossible:break;
case UIGestureRecognizerStateCancelled:break;
case UIGestureRecognizerStateFailed:break;
}
}
- (void)resetViewPositionAndTransformations
{
[UIView animateWithDuration:0.2
animations:^{
self.center = self.originalPoint;
self.transform = CGAffineTransformMakeRotation(0);
}];
}
However, unlike the view in the example, mine has multiple different subviews, and I'm finding that when I apply this code, I get this erroneous result:
Before Swipe:
During Swipe:
As you can see, it seems as if the subviews are "sliding" out of place, so to speak. What's worse, when the swipe is over, the subviews are left looking slightly out of place, even though the parent view is in the right place. If you're curious, my constraints look like:
If anyone could help me get the subviews to move correctly with the superview, I would really appreciate it. One thing I've found sort-of remedies the last problem is to store the original centers of each of the subviews and restore them to that at the end, but I'm sure there must be a better way.
EDIT: I'm still haven't come up with a fix, but I'm now 99.9% sure it's to do with the constraints of the subviews.
I'm new in objective-c. I create UIScrollView object and add in my view with this code:
height = self.view.frame.size.height;
width = self.view.frame.size.width;
scrollbar = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
scrollbar.delegate = self;
scrollbar.backgroundColor = [UIColor whiteColor];
scrollbar.maximumZoomScale = 1.0;
scrollbar.minimumZoomScale = 1.0;
scrollbar.clipsToBounds = YES;
scrollbar.showsHorizontalScrollIndicator = YES;
scrollbar.pagingEnabled = YES;
[scrollbar setContentSize:CGSizeMake(width*4, height*4)];
[self.view addSubview:scrollbar];
for (int i = 1; i <= 4; i++) {
first = [[FirstViewController alloc]initWithNibName:#"FirstViewController" bundle:nil];
first.view.frame = CGRectMake((i-1)*width, 0, width, height*4);
[scrollbar addSubview:first.view];
switch (i) {
ase 1:
first.view.backgroundColor = [UIColor blueColor];
break;
case 2:
first.view.backgroundColor = [UIColor redColor];
break;
case 3:
first.view.backgroundColor = [UIColor greenColor];
break;
case 4:
first.view.backgroundColor = [UIColor grayColor];
break;
default:
break;
}
}
in my code I add 4 view in my ScrollView with different color now I want when scrolling on my ScrollView detect dx & dy (dx: driving distance on Axis.x & dy:driving distance on Axis.y) and check these two variable and when :
Notic: I want when any one touch on ScrollView and moving touch on Axis (x or y) or touch on Both Axis (x and y) check this :
if (dx > dy) disable horizontal scroll and moving in vertical side!!!
else moving in horizontal side and disable vertical scroll!!!
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGRect visibleRect = CGRectMake(scrollView.contentOffset.x, scrollView.contentOffset.y, scrollView.contentOffset.x + scrollView.bounds.size.width, scrollView.contentOffset.y + scrollView.bounds.size.height);
NSLog(#"%f,%f",visibleRect.origin.x,visibleRect.origin.y);
/*NSLog(#"x : %f",scrollView.contentOffset.x);
NSLog(#"y : %f",scrollView.contentOffset.y);*/
if (fabsf(scrollView.contentOffset.x) > fabsf(scrollView.contentOffset.y)) {
NSLog(#"Vertical Side");
}
else {
NSLog(#"Horizontal Side");
}
}
please guide me guys. I can't disable one side and move another side!!! thanks
If i understood you right, you want to disable scrolling in the direction that has been dragged less by the user. If so, UIScrollView already offers an option to do so:
scrollView.directionalLockEnabled = YES;
When this option is set to true UIScrollView will handle the correct direction lock by itself.
For more information look at the documentation: link
You can achieve the result you want adding some code to your delegate. This is my ViewController.m file. -viewDidLoad, #import statements and the other methods are omitted.
#interface ViewController () {
CGPoint initialOffset;
NSInteger direction; // 0 undefined, 1 horizontal, 2 vertical
}
#end
#implementation ViewController
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// retrieve current offset
CGPoint currentOffset = scrollView.contentOffset;
// do we know which is the predominant direction?
if (direction == 0) {
// no.
CGFloat dx = currentOffset.x - initialOffset.x;
CGFloat dy = currentOffset.y - initialOffset.y;
// we need to decide in which direction we are moving
if (fabs(dx) >= fabs(dy)) {
direction = 1; // horizontal
} else if (fabs(dy) > fabs(dx)) {
direction = 2;
}
}
// ok now we have the direction. update the offset if necessary
if (direction == 1 && currentOffset.y != initialOffset.y) {
// remove y offset
currentOffset.y = initialOffset.y;
// update
[scrollView setContentOffset:currentOffset];
} else if (direction == 2 && currentOffset.x != initialOffset.x) {
currentOffset.x = initialOffset.x;
[scrollView setContentOffset:currentOffset];
}
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
// store the current offset
initialOffset = scrollView.contentOffset;
// reset flag
direction = 0; // AKA undefined
}
#end
When you start dragging, the delegate will reset the flag direction to "unknown" state, and store the current content offset. After every dragging move, your -scrollViewDidScroll: will be called. There, you decide which is the predominant direction (if this hasn't been done yet) and correct the current scrolling offset accordingly, by removing the x (or y) offset.
I tested this with the same settings you provided, only I used a UIImageView inside UIScrollView and I set up everything via InterfaceBuilder, but it should work fine. Theoretically, with this method you could replace directionLock, but remember that -scrollViewDidScroll is called many times during an action, and every time it rewrites the content offset (if the scrolling is happening in both directions). So if you leave directionLock enabled, you save many of the calls to setContentOffset: that the delegate performs.
I need to resize my plot using pinch recognizers, its allowed to resize "width" and "height" separately in small areas at left and bottom.
Also my plot is inside of UIScrollView to scroll it horizontally
This is my Y-axis pinch code:
- (void)yAxisPinchPerformed:(UIPinchGestureRecognizer *)pinchRecognizer
{
CGFloat recognizerScale = pinchRecognizer.scale;
CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)_graph.defaultPlotSpace;
switch (pinchRecognizer.state) {
case UIGestureRecognizerStateBegan:
{
_savedRange = plotSpace.yRange;
}
break;
case UIGestureRecognizerStateChanged:
{
CGFloat scaledRange = recognizerScale * _savedRange;
[plotSpace setYRange:scaledRange];
}
break;
default:
break;
}
}
works good, but really slow on devices, probably because it redraws the whole plot (it's wide and inside UIScrollView), not only visible area;
my plot contains maximum 100 bars with gradient fill. I tried to turn off filling but it helped just a little;
now i have these improvements:
- (void)yAxisPinchPerformed:(UIPinchGestureRecognizer *)pinchRecognizer
{
CGFloat recognizerScale = pinchRecognizer.scale;
switch (pinchRecognizer.state) {
case UIGestureRecognizerStateBegan:
{
// UIImageView *_imageView;
[_imageView setImage:_graph.imageOfLayer];
[_imageView setHidden:NO];
// CGRect initialFrame is frame of graph container
[_imageView setFrame:initialFrame];
_savedHeigth = _imageView.frame.size.height;
}
break;
case UIGestureRecognizerStateChanged:
{
CGFloat scaledHeight = recognizerScale * _savedHeight;
CGRect imageFrame = _imageView.frame;
imageFrame.size.height = scaledHeight;
[_imageView setFrame:imageFrame];
}
break;
case UIGestureRecognizerStateEnded:
CGFloat scaledRange = calculateRangeFromHeights(...);
CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)_graph.defaultPlotSpace;
[plotSpace setYRange:scaledRange];
[_imageView setHidden:YES];
break;
default:
break;
}
}
I get image of plot layer and perform scaling of UIImageView, it's super faster. But when i decrease Y-scale i have only part of graph, it's cutted at the top.
Is it possible to scale Core Plot graph smoothly and real-time?
Core Plot has no way to know how much of the graph is visible inside your scroll view. I would remove the scroll view and rely on the built-in Core Plot scrolling. If that's not feasible, you could determine which bars are visible and only show the visible bars. Modify your datasource to return data only for the visible bars and reload the data whenever the set of visible bars changes.