Zooming in UIScrollView - Unable to zoom beyond single image and scroll - ios

I have an array of images loading from the NSURL to scroll in and pinch zoom. I was able to implement the scroll part but when I try to zoom any image beyond the first one, the scroll is stuck and so is the scale on the image. Here is my code:
scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 100, SCREEN_WIDTH, self.view.bounds.size.height)];
scrollView.showsHorizontalScrollIndicator = FALSE;
scrollView.maximumZoomScale = 4.0;
scrollView.minimumZoomScale = 1.0;
scrollView.delegate = self;
[self.view addSubview:scrollView];
for (int i=0; i<[listOfImagesZoom count]; i++) {
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(leftMargin, self.scrollView.bounds.origin.y-100, SCREEN_WIDTH, self.view.bounds.size.height-100)];
// [imageView setImage:[UIImage imageNamed:#"img_def.png"]];
NSString *urlImage1 = (NSString*)[listOfImagesZoom objectAtIndex:i];
NSString *productImageURL1 = [urlImage1 stringByReplacingOccurrencesOfString:#"~" withString:#""];
NSString *productImageURL2 = [productImageURL1 stringByReplacingOccurrencesOfString:#" " withString:#"%20"];
NSString* urlImage = [NSString stringWithFormat:#"http://sagana-ideas.azurewebsites.net%#", productImageURL2];
NSURL *imgURL=[NSURL URLWithString:urlImage];
[imageView setImageWithURL:imgURL placeholderImage:[UIImage imageNamed:#"ex_product.png"]];
imageView.contentMode = UIViewContentModeScaleAspectFit;
[scrollView addSubview:imageView];
[imageView setUserInteractionEnabled:NO];
imageView.tag = i;
leftMargin += SCREEN_WIDTH;
}
[scrollView setContentSize:CGSizeMake(leftMargin, 0)];
[scrollView setPagingEnabled:YES];
scrollView.delegate = self;
I have even implemented the
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return imageView;
}
It works if there is only single image to load, but is stuck when there is more than 1 image.

You need a ScrollView to display list of your images. Each image was displayed a scrollView(a subclass scrollview) to perform zoom in/out.
Try to look at this: MWPhotoBrowser

You can create a UIView inside scrollview in which you may add your all images and then return that view from, - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView method.

Related

How to implement fling feature on an ImageView with Objective C?

I have an UIImageView and I want to implement fling feature, when users flings on the screen the page can go up or down quickly.
Now my thinks is add two UISwipeGesturesRecognizers, but I don't know how to do next, should I use an animation to do this, and how to calculate the animation distance and time?
Also I find other answers said no need gesture recognizer can use scroll view, I am totally confused, are there any sample I can learn?
You can do it like that :
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[scrollView setPagingEnabled:YES];
[scrollView setAlwaysBounceVertical:YES];
NSArray *imagesArray = [NSArray arrayWithObjects:#"img1.png", #"img2.png", #"img3.png", nil];
for (int i = 0; i < [imagesArray count]; i++)
{
CGFloat xOrigin = i * scrollView.frame.size.width;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
[imageView setImage:[UIImage imageNamed:[imagesArray objectAtIndex:i]]];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
[scrollView addSubview:imageView];
}
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width, scrollView.frame.size.height*[imagesArray count])];

Z position of UIImageView to that of UIScrollView

I have both UIScrollView and another UIImageView. I want the UIImageView to come over the UIScrollView. I've tried all the bringSubviewToFront and the insertAtIndex stuff but its not working. Please help me out!
Here is the code -
For UIScrollView:
UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 300,
SCREEN_WIDTH, SCREEN_HEIGHT)];
scrollView.showsHorizontalScrollIndicator = FALSE;
[self.view addSubview:scrollView];
__block int tagValue = 1;
__block NSInteger tag = 1;
for (int i=0; i<[listOfImages count]; i++) {
NSDictionary *myDic = [listOfImages objectAtIndex:i];
NSString *urlImage = [myDic objectForKey:#"product_image"];
//NSLog(#"%lu",(unsigned long)[listOfImages count]);
image = [[UIImageView alloc] initWithFrame:CGRectMake(leftMargin, 0, 200, 140)];
// [image setImage:[UIImage imageNamed:#"img_def.png"]];
NSURL *imageURL = [NSURL URLWithString:urlImage];
[image setImageWithURL:imageURL
placeholderImage:[UIImage imageNamed:#"img_def.png"]];
image.tag = tag;
image.contentMode = UIViewContentModeScaleAspectFit;
[scrollView insertSubview:image atIndex:1];
UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc]
initWithTarget:self action:#selector(handleTap:)];
recognizer.numberOfTapsRequired = 1;
recognizer.numberOfTouchesRequired = 1;
recognizer.delegate = self;
[image addGestureRecognizer:recognizer];
[image setUserInteractionEnabled:YES];
leftMargin += SCREEN_WIDTH;
tagValue += 1;
tag += 1;
}
[scrollView setContentSize:CGSizeMake(leftMargin, 0)];
[scrollView setPagingEnabled:YES];
And the image code that I want to come on top of the scroll view -
UIImage *originalPromo = [UIImage imageNamed:#"promo"];
UIImage *scaledPromo = [UIImage imageWithCGImage:[originalPromo CGImage]
scale:(originalPromo.scale *2.0) orientation:(originalPromo.imageOrientation)];
UIImageView *promo = [[UIImageView alloc] init];
[promo setFrame:CGRectMake(45.5, 300.0,
scaledPromo.size.width, scaledPromo.size.height)];
[promo setImage:scaledPromo];
[self.view insertSubview:promo atIndex:100];
Instead of using insertSubview:atIndex use addSubview:. When a subview is added, it's always added on top of all other subviews already in the parent view.

How to enable zoom for two different UIScrollview in single UIView?

I am displaying two images on single view where both images must have zoom functionality.My page height is around 1000 pixels and images must be display on top and bottom of page. For that I have added two different scroll view and added image views on scroll views.
Now Zoom is working properly for second image .But first image is getting displayed in top left corner of scroll view once zoomed out. It seems there are two images.
Here is the delegate method i am using:
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return [[scrollView subviews] objectAtIndex:0];
}
Is there anything i am missing ? or is this not really possible to enable zoom when there are two scroll views for single page.
Here is the code its working for enable zoom when there are two scroll views for single page.
//Create First ImageView
image1 =[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 220)];
image1.image = [UIImage imageNamed:#"image1.png"];
image1.contentMode = UIViewContentModeScaleToFill;
//Create and Set Values for Scrollview 1
scroll1 =[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 220)];
scroll1.contentSize = image1.frame.size;
[scroll1 setMinimumZoomScale:1.0];
[scroll1 setMaximumZoomScale:4.0];
scroll1.delegate = self;
scroll1.clipsToBounds = YES;
scroll1.tag =0;
[scroll1 addSubview:image1];
image1.userInteractionEnabled =YES;
scroll1.zoomScale = 1;
[self.view addSubview:scroll1];
Second Scrollview and ImageView
// Create Second ImageView
image2 =[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 260)];
image2.image = [UIImage imageNamed:#"image2.png"];
image2.contentMode = UIViewContentModeScaleToFill;
// Create Second ScrollView
scroll2 =[[UIScrollView alloc] initWithFrame:CGRectMake(0, 220, 320, 260)];
scroll2.contentSize = image2.frame.size;
[scroll2 setMinimumZoomScale:1.0];
[scroll2 setMaximumZoomScale:4.0];
scroll2.delegate = self;
scroll2.clipsToBounds = YES;
scroll2.tag =1;
[scroll2 addSubview:image2];
image2.userInteractionEnabled =YES;
scroll2.zoomScale = 1;
[self.view addSubview:scroll2];
This will help you, since it is already working for me.
Delegate method as follow:
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
if (scrollView.tag ==0) {
return image1;
}
else return image2;
}

IOS scroll gallery

i made this sliding gallery in my app:
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:#selector(photoTap:)];
tap.numberOfTapsRequired = 1;
int pageCount = 3;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0,
0,
360,
200)];
scrollView.backgroundColor = [UIColor clearColor];
scrollView.pagingEnabled = YES;
scrollView.contentSize = CGSizeMake(pageCount*scrollView.bounds.size.width ,
scrollView.bounds.size.height);
[scrollView addGestureRecognizer:tap];
CGRect viewsize = scrollView.bounds;
UIImageView *image = [[UIImageView alloc]initWithFrame:viewsize];
[image setImage: [UIImage imageNamed:#"01.png"]];
image.userInteractionEnabled = YES;
[scrollView addSubview:image];
viewsize = CGRectOffset(viewsize, scrollView.bounds.size.width, 0);
UIImageView *image2 = [[UIImageView alloc]initWithFrame:viewsize];
[image2 setImage: [UIImage imageNamed:#"02.png"]];
image2.userInteractionEnabled = YES;
[scrollView addSubview:image2];
- (void)photoTap:(UITapGestureRecognizer *) gestureRecognizer{
}
How can i detect which photo is tapped in my scrollview?
I have tried to add gesture recognizer to the image but only the last one works.
Any suggestion? Thank You
You can add gesture recognizer to the scrollview, after detecting the tap, detect its location on the UIScrollView's content by adding the coordinates of the tap to the content offset. When you have this coordinate i think that detecting the image is not a problem.

Large UIImage not scaling down into Scroll View's frame

i can't seem to use UIViewContentModeScaleAspectFit property to scale my imageView within my scrollview to fit the scrollview size.
- (void)loadView {
UIImage* image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:#"http://www.moilum.com/images/atomicongallery/setmenu/setmenu1.jpg"]]];
imageView = [[UIImageView alloc]initWithImage:image];
imageView.contentMode = UIViewContentModeScaleAspectFit;
CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame];
UIScrollView* scrollView = [[UIScrollView alloc]initWithFrame:applicationFrame];
[scrollView addSubview:imageView];
scrollView.contentSize = image.size;
scrollView.minimumZoomScale = 0.3;
scrollView.maximumZoomScale = 3.0;
scrollView.clipsToBounds = NO;
scrollView.delegate = self;
self.view = scrollView;
}
i have tried imageView.contentMode = UIViewContentModeScaleAspectFill as well. scrollView.contentmode = UIViewContentModeScaleAspectFill as well. All dont seem to work :(
any way out!?
Cheers!
The UIScrollView will not adjust its zoomScale if you don't implement the - (UIView *)viewForZoomingInScrollView:(UIScrollView *)sView method on the UIScrollViewDelegate.
Something like this
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)sView
{
NSArray *subViews = [sView subviews];
if([subViews count] > 0){
return [subViews objectAtIndex:0];
}
return nil;
}
(But apparently not setting a delegate at all works too.)
Have you tried,
-(void)loadView
{
CGRect frame = CGRectMake(0, 0, scrollView.frame.size.width, scrolllView.frame.size.height);
imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.image = [UIImage imageNamed:#"yourimage.png"];
imageView.contentMode = UIViewContentModeScaleAspectFit;
[scrollView addSubView:imageView];
scrollView.contentSize = CGSizeMake( imageView.frame.size.width, imageView.frame.size.height);
}
I write this code from my iPad i think this should work,
Let me know if you have any problem.
Good luck.

Resources