Zooming within Nested UIScrollViews - iphone

Its a familiar topic Im creating a graphic novel using UIScrollview. The plan is to be able to page along the novel with a top level uiscrollview. Within this are a series of nested uiscrollviews which have a uimageview embedded within each. The idea is that large images can be panned around and zoomed into but still paged along. I have most of this working but I cant get the zoom working. I have implemented the zoom delegate method but to no avail, zooming just pans the image around. I suspect this is something due to embedded nature of the nested scrollviews but I cant see what im missing. I had a look at the Apple scrollview suite example but couldnt find an answer.
This is what I have working so far:
- (void)viewDidLoad
{
[super viewDidLoad];
UIScrollView *scrollview = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,self.view.frame.size.height)];
scrollview.pagingEnabled = YES;
scrollview.scrollEnabled =YES;
scrollview.clipsToBounds = NO;
scrollview.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollview.showsHorizontalScrollIndicator = YES;
scrollview.backgroundColor = [UIColor blackColor];
NSInteger viewcount=4;
NSArray *images = [NSArray arrayWithObjects:[UIImage imageNamed:#"mars.png"],[UIImage imageNamed:#"mercury.png"],[UIImage imageNamed:#"neptune.png"],[UIImage imageNamed:#"venus.png"],nil];
for (int i = 0; i <viewcount; i++)
{
CGFloat x = i * self.view.frame.size.width;
subView = [[UIScrollView alloc]initWithFrame:CGRectMake(x, 0, self.view.frame.size.width, self.view.frame.size.height)];
[subView setBackgroundColor:[UIColor blackColor]];
[subView setCanCancelContentTouches:NO];
subView.clipsToBounds = NO; // default is NO, we want to restrict drawing within our scrollview
subView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
aImageView = [[UIImageView alloc ] initWithImage:[images objectAtIndex:i]];
[self.aImageView setTag:ZOOM_VIEW_TAG];
[subView addSubview:aImageView];
[subView setContentSize:CGSizeMake(aImageView.frame.size.width, subView.frame.size.height)];
subView.minimumZoomScale = 1;
subView.maximumZoomScale = 3;
subView.delegate = self;
[subView setScrollEnabled:YES];
subView.contentSize = aImageView.frame.size;
[scrollview addSubview:subView];
[subView release];
}
[self.view addSubview:scrollview];
}
-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView {
NSLog (#"test");
UIView * view = nil;
view = [subView viewWithTag:ZOOM_VIEW_TAG];
return view;
}

Worked this out, for anyone else trying to do this.
One thing I missed a line of code out on the post above which is quite fundamental!, in the viewdidLoad method
just above [self.view addSubview:scrollview]; there should be the following which calculates the width of all of the subviews
scrollview.contentSize = CGSizeMake(self.view.frame.size.width*viewcount,self.view.frame.size.height);
The code in the -(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView {
method should be:
return [scrollView.subviews objectAtIndex:0];
This allows you to zoom and pan around images and also page along a set of images very nicely. Just got to work out how to zoom back to the original size automagically when moving on to the next image as its stays zoomed upon paging along..

Related

Scrolling top to bottom using UIScrollView

I am looking for an example that show just vertical scrolling in iPhone.
The Apple supplied Scrolling example allows swiping of images left to
right.
Example Link
Example Link
I want to have my images scroll top to bottom like Instagram
App.
I research about it and found lots of example, but they all show
horizontal scrolling.
Example
Example
Example
Does anyone know how to do this?
I appreciate if you send me a link to a tutorial.
Hi i solved your problem with apple code,
just change the function with
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(0,curXLoc);
view.frame = frame;
curXLoc += (kScrollObjHeight);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake(([scrollView1 bounds].size.width),kNumImages * kScrollObjHeight)];
}
or if you want sample then i will give you
For your purpose refer your link:
http://idevzilla.com/2010/09/16/uiscrollview-a-really-simple-tutorial/
There is a code like:
scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
For horizontal scrolling you need to set the width of contentSize property to a higher value than the scroll view's frame width. Likewise for vertical scrolling you need to set the height of contentSize property to a higher value than the scroll view's frame height.
Reference
In the above code it can be done like:
scroll.contentSize = CGSizeMake(self.view.frame.size.width, numberOfViews * self.view.frame.size.height);
You can use the following code to scroll images from top to bottom and vice versa.!!
- (void)viewDidLoad
{
//....
UISwipeGestureRecognizer *recognizer;
//for scrolling up
recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(SwipeUp)]; // calling method SwipeUp
[recognizer setDirection:(UISwipeGestureRecognizerDirectionUp)];
[[self view] addGestureRecognizer:recognizer];
//for scrolling down
UISwipeGestureRecognizer *recognizer1;
recognizer1 = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(SwipeDown)]; //calling method SwipeDown
[recognizer1 setDirection:(UISwipeGestureRecognizerDirectionDown)];
[[self view] addGestureRecognizer:recognizer1];
}
//Initialise and synthesise IBOutlet UIImageView *bgImage;
-(IBAction)SwipeUp
{
[bgImage setImage:[UIImage imageNamed:#"yourImage1"] ];
bgImage.opaque=YES;
[self.view addSubview:bgImage];
}
-(IBAction)SwipeDown
{
[bgImage setImage:[UIImage imageNamed:#"yourImage2"] ];
bgImage.opaque=YES;
[self.view addSubview:bgImage];
}
I don't know if I understood correctly what you want to accomplish but basically you can set the position of you scrollView using setContentOffset.
CGPoint bottomOffset = CGPointMake(0, scrollView.contentSize.height - self.scrollView.bounds.size.height);
[scrollView setContentOffset:bottomOffset animated:YES];
There are several ways of doing this for example:
Using the UITableView with Custom cell
Adding UIScrollingView & adding the content/images & increasing the
height of scrollview according to number of objects in array.
Here is the code snippet which creates a 2*2 Grid for images :
//Over here adding the image names into the Array
NSMutableArray *imageArray=[[NSMutableArray alloc]init];
[Arr addObject:[UIImage imageNamed:#"image_1.png"]];
[Arr addObject:[UIImage imageNamed:#"image_2.png"]];
[Arr addObject:[UIImage imageNamed:#"image_3.png"]];
[Arr addObject:[UIImage imageNamed:#"image_4.png"]];
[Arr addObject:[UIImage imageNamed:#"image_5.png"]];
// Initlaizing the ScrollView & setting the frame :
scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0,320, 460)];
[scrollView setBackgroundColor:[UIColor clearColor]];
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
int row = 0;
int column = 0;
for(int i = 0; i < imageArray.count; i++) {
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
button.backgroundColor=[UIColor clearColor];
button.frame = CGRectMake(column*160+0,row*210+10, 160, 190);
[button setImage:[imageArray objectAtIndex:i] forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor clearColor]];
[button addTarget:self action:#selector(chooseCustomImageTapped:) forControlEvents:UIControlEventTouchUpInside];
button.tag = i;
[view1 addSubview:button];
if (column == 1) {
column = 0;
row++;
} else {
column++;
}
}
[scrollView setContentSize:CGSizeMake(320, (row+1) * 210)];
[self.view addSubview:view1];
//Here is the method used for Tapping :
- (IBAction)chooseCustomImageTapped:(id)sender
{
}
Now,once the scrollView is ready for Vertical scrolling, you can do your own customization accordingly. I hope this would work for you.

iPhone: UIScrollview with Multiple UIImageView with Zoom In / Out effect

I have a UIscrollview in my application which contains multiple UIimageview. I want to apply the pinch zoom in / out functionality.Code for adding UIImageview to UIScrollView is following
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
[scViewObject setCanCancelContentTouches:NO];
scViewObject.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scViewObject.clipsToBounds = NO; // default is NO, we want to restrict drawing within our scrollview
scViewObject.scrollEnabled = YES;
scViewObject.alwaysBounceHorizontal=YES;
scViewObject.pagingEnabled = YES;
UIView *view = nil;
NSArray *subviews = [scViewObject subviews];
for (view in subviews)
{
[view removeFromSuperview];
}
int left=20;
numberOfViewController=[ListOfImages count];
//NSMutableArray *controllers = [[NSMutableArray alloc] init];
for (unsigned ii = 0; ii < numberOfViewController; ii++)
{
UIImageView *temp=[[UIImageView alloc] init];
temp.contentMode=UIViewContentModeScaleAspectFit;
temp.userInteractionEnabled = YES;
temp.multipleTouchEnabled = YES;
temp.clipsToBounds = YES;
temp.image=[ListOfImages objectAtIndex:ii];
temp.frame=CGRectMake(left, 0, 280, 365);
temp.tag=ii;
[scViewObject addSubview:temp];
left=left+320;
}
[scViewObject setContentSize:CGSizeMake((numberOfViewController * kScrollObjWidth), 365)];
here scViewObject is UIscrollview. Please suggest that how can i add zoom in / out functionality
There is a couple of ADC video that you'll want to watch:
WWDC 2010 : Designing Apps with Scroll views
WWDC 2011 : Advanced Scrollview Techniques
but basically you'll want to implement a zooming scrollview inside each "page" of the outer scroll view and add each image into each of these zooming scroll views.
Also see the documentation
And example code

How can I use UIScrollView for overlapped images iphone

Hi, I have a big image and small image over it at a specific location...
I added them all under ScrollView, but it didn't work properly?
I want to zoom in, all together each in its place
Here is my code:
myScrollView.contentSize = CGSizeMake(imageView.frame.size.width, imageView.frame.size.height);
myScrollView.maximumZoomScale = 3.0;
myScrollView.minimumZoomScale = 1.0;
myScrollView.clipsToBounds = YES;
myScrollView.delegate = self;
[myScrollView addSubview:imageView];
thanks
Hi, mackworth; I did it, but if I didn't maximize the image, I can't move the scroll view anywhere, but if I zoomed it, I can see the rest.. I don't know why I tried changing it, but it work. Can you please look at the following code?
- (void)viewDidLoad{
[super viewDidLoad];
UIImage *image = [UIImage imageNamed:#"ucd.png"];
//creating a view for UCD image
ucdView = [[UIImageView alloc] initWithImage:image];
//setting the frame for the ucdView as the same size of ucd image
[ucdView setFrame:CGRectMake(0, 0, image.size.width, image.size.height)];
//for the red pin to display in specific loc
UIImageView *Health = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"redPin.png"]];
[Health setCenter:CGPointMake(310,135)];
//adding helathView to ucdview
[ucdView addSubview:Health];
//everything for scroll view
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, ucdView.frame.size.width, ucdView.frame.size.height)];
[scrollView setMinimumZoomScale:1.0];
[scrollView setMaximumZoomScale:3.0];
scrollView.clipsToBounds = YES;
[scrollView setContentSize:CGSizeMake(image.size.width, image.size.height)];
[scrollView setDelegate:self];
[scrollView addSubview:ucdView];//adding ucd view to scroll view
[self.view addSubview:scrollView]; // adding scrollview to self.view main view
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {//apply zooming for scrollview
return scrollView;
}
Did you implement:
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return self.imageView;
}
Also, you know that by setting the scrollView's contentSize to your imageSize, it can't grow any bigger than that, right? It'll zoom in place, cropping the outer pixels accordingly. As an aside, if that is your plan, why not just set it directly?
myScrollView.contentSize = imageView.frame.size;
=====Further answer, responding to additional source
Well, the main thing I notice is that you need to return the imageView ucdView in viewForZoomingInScrollView, not the scrollView. It looks like you already created ucdView as a property (so that it lives as long as your view does), but just in case...
1) In your .h file:
UIImageView * ucdView;
#property (nonatomic, retain) UIImageView * ucdView;
2) In your .m file;
#synthesize ucdView;
3) change your line:
ucdView = [[UIImageView alloc] initWithImage:image];
to just
self.ucdView = [[UIImageView alloc] initWithImage:image];
4) change the line
return scrollView
to:
return self.ucdView;
5) Add the following to your dealloc routine:
self.ucdView = nil;
Also, did you add <UIScrollViewDelegate> protocol to your ViewController definition (in .h file)?
Finally, you have a leak of scrollview and Health; add [scrollView release]; and [Health release] at end of viewDidLoad

How can I setup two UIScrollViews that have nested UIImageViews?

Ok we all know that nesting an image view inside of a scroll view allows you to have an image that you can pinch and zoom. Pretty cool. I want to duplicate this (eventually quadruple) feature.
In IB I have setup my 2 scroll views side by side, and have nested imageViews inside of them and have hooked them up to the proper variables and everything.
Inside of my viewController viewDidLoad I do this:
[scrollView setBackgroundColor:[UIColor blackColor]];
[scrollView setCanCancelContentTouches:NO];
scrollView.clipsToBounds = NO; // default is NO, we want to restrict drawing within our scrollview
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.minimumZoomScale = 1;
scrollView.maximumZoomScale = 5;
scrollView.delegate = self;
[scrollView setScrollEnabled:YES];
imageView3 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"monitor.JPG"]];
[scrollView addSubview:imageView3];
//[scrollView setFrame:CGRectMake(0, 0, 1024, 660)];
[scrollView1 setBackgroundColor:[UIColor blackColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.clipsToBounds = NO; // default is NO, we want to restrict drawing within our scrollview
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.minimumZoomScale = 1;
scrollView1.maximumZoomScale = 5;
scrollView1.delegate = self;
[scrollView1 setScrollEnabled:YES];
imageView31 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"monitor.JPG"]];
[scrollView1 addSubview:imageView3];
It seems like this should run ok. But is what happens when I build in run is quite unusual. There is just a blank background for where my first scroll view should be and then the second scrollView has its image in there...
If I just do the code for the first scrollView, I get the image. So it's like I am somehow overwriting the first by including the second?
I really can't understand how or why this behavior is occurring. Maybe I am going about it all wrong, what am I missing? Does anyone have any ideas as to how to implement this multiple scrollView view?
Thanks
[scrollView addSubview:imageView3];
[scrollView1 addSubview:imageView3];
The second one should be imageView31

How to combine UIScrollview with UIPagecontrol to show different views?

I've searched and searched for a tutorial for this but none of them are what I'm looking for. I've tried Apple's sample but it is just colors and I don't know how to make it views. All I'm looking for is a screen that will page while showing the page control. Each time the scroll view pages i want it to show a completely different view with buttons, a lot like the home screen of the iPhone. I found the sample code below which works very well with just images, but I'd like to modify to work with separate views. Please Help! Thank you.
- (void)setupPage {
scrollView.delegate = self;
[self.scrollView setBackgroundColor:[UIColor clearColor]];
[scrollView setCanCancelContentTouches:NO];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = YES;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
NSUInteger nimages = 0;
CGFloat cx = 0;
for (; ; nimages++) {
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", (nimages + 1)];
UIImage *image = [UIImage imageNamed:imageName];
if (image == nil) {
break;
}
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = image.size.height;
rect.size.width = image.size.width;
rect.origin.x = ((scrollView.frame.size.width - image.size.width) / 2) + cx;
rect.origin.y = ((scrollView.frame.size.height - image.size.height) / 2);
imageView.frame = rect;
[scrollView addSubview:imageView];
[imageView release];
cx += scrollView.frame.size.width;
}
self.pageControl.numberOfPages = nimages;
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
}
I was experimenting with this just the other day. I'm still getting used to using a UIScrollView but here's how you can add views to your UIScrollView:
UIView *blueView = [[UIView alloc] init];
blueView.frame = CGRectMake(100, 0, 500, 1024);
blueView.backgroundColor = [UIColor colorWithRed:164.0/256 green:176.0/256 blue:224.0/256 alpha:1];
[scrollView addSubview:blueView];
[blueView release];
UIView *orangeView = [[UIView alloc] init];
orangeView.frame = CGRectMake(700, 0, 500, 1024);
orangeView.backgroundColor = [UIColor colorWithRed:252.0/256 green:196.0/256 blue:131.1/256 alpha:1];
[scrollView addSubview:orangeView];
[orangeView release];
Notice that I'm setting the x value in frame.origin of each view so that they're sitting adjacent to each other. You also have to set the content size of the UIScrollView with something like [scrollView setContentSize:CGSizeMake(1200, 1024)]; so that it knows how big its subviews are.
Then, if you need to control a UIPageControl, you would set its numberOfPages to 2 (for the example scrollview above) and change its currentPage property. You could do this by implementing scrollViewDidEndDecelerating:, which is a method in the UIScrollViewDelegate. You could check which "page" the scrollview is at by checking its contentOffset.x value.
Hope this helps!
Here's the Apple PageControl code with images. To use, just drag your images to the project. The default images are image1.jpg, image2.jpg, etc. If you need png, just change the extension to .png.
Then replace the MyViewController.m code with this code, and you've got pagecontrol with Images.
Cheers, Jordan
http://pastebin.com/raw.php?i=c3hS29sC
// Adding UIView to PageControl example
- (id)initWithPageNumber:(int)page {
UIScreen *screen = [UIScreen mainScreen];
CGRect frame = [screen applicationFrame];
frame.origin.y=0;
if (self = [super initWithNibName:#"MyView" bundle:nil]) {
UIView *view = [[UIView alloc] initWithFrame:frame];
[self.view addSubview:view];
// Add whatever you want to the view here.
[view release];
pageNumber = page;
}
return self;
}
Here's another answer...
NSArray* nibViews = [[NSBundle mainBundle] loadNibNamed:#"Views" owner:self options:nil];
infoView = [nibViews objectAtIndex:0];
[self.view addSubview:infoView];
Then you have your view.
Cheers