UIScrollview with multiple images and pinch to zoom - iphone

I am trying to duplicate the Photos app on the iPhone. Meaning, a scrollview with multiple images, and each image can be pinched to zoom in/out.
The Apple ScrollViewSuite example code only deals with 1 image inside of a scrollview. I have found that with multiple images, scrolling through the images becomes unpredictable. Also, the view becomes uncentered after pinching to zoom.
I have found this on Stack Overflow: Zoom UIScrollView with multiple images
However, what am I supposed to write in the scrollview delegate functions?

This is what I found to work. Supports multiple images with paging and zooming. Enjoy!
#define VIEW_FOR_ZOOM_TAG (1)
#implementation SVViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIScrollView *mainScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
mainScrollView.pagingEnabled = YES;
mainScrollView.showsHorizontalScrollIndicator = NO;
mainScrollView.showsVerticalScrollIndicator = NO;
CGRect innerScrollFrame = mainScrollView.bounds;
for (NSInteger i = 0; i < 3; i++) {
UIImageView *imageForZooming = [[UIImageView alloc] initWithImage:[UIImage imageNamed:
[NSString stringWithFormat:#"page%d", i + 1]]];
imageForZooming.tag = VIEW_FOR_ZOOM_TAG;
UIScrollView *pageScrollView = [[UIScrollView alloc] initWithFrame:innerScrollFrame];
pageScrollView.minimumZoomScale = 1.0f;
pageScrollView.maximumZoomScale = 2.0f;
pageScrollView.zoomScale = 1.0f;
pageScrollView.contentSize = imageForZooming.bounds.size;
pageScrollView.delegate = self;
pageScrollView.showsHorizontalScrollIndicator = NO;
pageScrollView.showsVerticalScrollIndicator = NO;
[pageScrollView addSubview:imageForZooming];
[mainScrollView addSubview:pageScrollView];
if (i < 2) {
innerScrollFrame.origin.x += innerScrollFrame.size.width;
}
}
mainScrollView.contentSize = CGSizeMake(innerScrollFrame.origin.x +
innerScrollFrame.size.width, mainScrollView.bounds.size.height);
[self.view addSubview:mainScrollView];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return [scrollView viewWithTag:VIEW_FOR_ZOOM_TAG];
}
- (NSUInteger)supportedInterfaceOrientations {
return UIInterfaceOrientationMaskPortrait;
}
- (BOOL)shouldAutorotate {
return NO;
}
#end

Related

UIScrollView - Prevent UIImageView as subview of UIScrollView from being dragged off screen

I have a UIImageView element as a subview of my main UIScrollView element.
I want the Image to fill out the whole screen at all times, but I can drag the edges a bit too far, so that the yellow "background" becomes visible.
If I lift my finger, the Image "bounces" back and fills out the screen correctly.
I want to prevent this dragging of the image off screen.
I do however want the image to bounce back once I drag it out of the "safety area".
This is my ScrollView initialization:
- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:CGRectMake(0, 0, frame.size.height, frame.size.width)];
if (self) {
[self initImageValues];
self.showsVerticalScrollIndicator = NO;
self.showsHorizontalScrollIndicator = NO;
self.bouncesZoom = YES;
self.decelerationRate = UIScrollViewDecelerationRateFast;
self.delegate = self;
self.backgroundColor = [UIColor yellowColor];
self.minimumZoomScale = 1.0;
self.maximumZoomScale = 2.0;
[self setCanCancelContentTouches:YES];
self.clipsToBounds = YES;
// Load Image
imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
[self addSubview:imageView];
[self setContentSize: CGSizeMake(imageView.frame.size.width, imageView.frame.size.height)];
// Set bigger "bounce" zone (safety area)
self.contentInset=UIEdgeInsetsMake(-SAFETY_ZONE,-SAFETY_ZONE,-SAFETY_ZONE,-SAFETY_ZONE);
self.scrollEnabled = YES;
}
return self;}
Use these delegate methods:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
Then read the offset and return if it's out of the "safety area".
Could be that you need another delegate method from the UIScrollView though, but a workaround like this should fix your problem :)
try setting bounces on the scrollview:
self.bounces = NO;
TRY this:
**
self.scrollView.maximumZoomScale = 1.0;
self.scrollView.minimumZoomScale = 1.0;
**
Try setting its bounces property to NO.

How to load remote Images and save to a NSMutableArray

I am trying to Load 5 or 6 remotes images to a scrollview and swipe horizontal. I can get the URLs form my webserver (JSON output) , I'm trying to do this using AFnetworking for performances issues .
so far I can get the URL and load one picture to a UIImageview like this (Using Storyboard )
Jsonobject *items = [posterNSMarray objectAtIndex:0]; //load one url only
NSlog (#"Object url %#", items.pUrl); // picture URL
[self.imageview setImageWithURl :[NSURL URLWithString:items.pUrl] placeholderImage :[UIImage imageNamed:#"placeholder"]];
[EDITED QUESTION]
my question is how do I get all the images and save it to a NSMutableArray
Thanks for your help .
[EDIT]
Based upon your comments below, I might actually choose then a different methodology
Bring in All of your images. At this point you can use either UIImageView or UIButton actually to obtain the tap (from the scrollview) you wish. Assign the UIImages to your choice of UIButton or UIImageView, and the place them on your scrollview as you wish. You will have to dynamically create the actions for each Button or ImageView. Your action creation should then bring up another View to be place atop you scrollview, or another viewcontroller that you animate to, etc... In a View Controller you will have your UIImageView as full screen. At this point you can implement your own UIGestureRecognizers to implement the double taps, etc...
I would use a UIListView. Here is a great link to custom UIListView implementation.
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
I would load your images into an NSMutableArray, to be used by the drawing routine of the custom UITableView.
As for swiping, you can capture the swipe events, then you can do with the list items as you please (i.e. delete, edit, etc... from your image array).
Another link:
http://www.icodeblog.com/2009/05/24/custom-uitableviewcell-using-interface-builder/
From your question and comments it seems like you want to load a UIScrollView with multiple images and then swipe through each one. It also sounds like you want to be able to tap one and have it launch a blown up image for the user to view.
I wrote some of these functions for an old project (they are a little rough) but you may be able to use them as they are how I accomplished what I think you were asking.
-(void)setupPictures
{
imageSectionSlider = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, IMAGE_HEIGHT)];
imageSectionSlider.showsVerticalScrollIndicator = NO;
imageSectionSlider.showsHorizontalScrollIndicator = NO;
imageSectionSlider.pagingEnabled = YES;
imageSectionSlider.bounces = NO;
UIView* tilesHolder = [[UIView alloc]initWithFrame:CGRectMake(0, 0, (([[thisStory imageList]count] * (self.frame.size.width))), IMAGE_HEIGHT)];
tilesHolder.userInteractionEnabled = YES;
for (int count = 0; count < [[thisStory imageList]count]; count++)
{
[tilesHolder addSubview:[self createImageTile:[[thisStory imageList]objectAtIndex:count] Count:count Rect:CGRectMake( 320*count , 0, 320, IMAGE_HEIGHT)]];
}
[imageSectionSlider setContentSize:CGSizeMake( tilesHolder.frame.size.width , tilesHolder.frame.size.height)];
[imageSectionSlider addSubview:tilesHolder];
[tilesHolder release];
}
-(UIView*)createImageTile:(ImageItem*)input Count:(int)count Rect:(CGRect)rect
{
UIView* imageTile = [[UIView alloc]initWithFrame:rect];
[imageTile setTag:count];
UIImageView* image = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, imageTile.frame.size.width, imageTile.frame.size.height - 45)];
[image setImage:[input imageData]];
image.contentMode = UIViewContentModeScaleAspectFill;
image.clipsToBounds = YES;
image.userInteractionEnabled = YES;
image.tag = count;
UIGestureRecognizer* featureImageGesRec = [[UITapGestureRecognizer alloc]initWithTarget:self action:#selector(countTaps:)];
[image addGestureRecognizer:featureImageGesRec];
[featureImageGesRec release];
[imageTile addSubview:image];
[image release];
return [imageTile autorelease];
}
- (void)countTaps:(NSObject*)sender {
tapCount++;
if (tapCount == 1) {
//do something with single tap
}
else if (tapCount == 2)
{
[NSObject cancelPreviousPerformRequestsWithTarget:self];
[self doubleTap:sender];
}
}
-(void)doubleTap:(NSObject*)sender
{
UITapGestureRecognizer* item = (UITapGestureRecognizer*)sender;
tapCount = 0;
//FullSizeImage
ImageItem* selectedItem = [[thisStory imageList]objectAtIndex:item.view.tag];
ExpandedView* pictureView = [[ExpandedView alloc]initWithImage:[selectedItem imageData]];
[thisParent.navigationController pushViewController:pictureView animated:YES];
[pictureView release];
}
Just pass your async loaded image here in this line...
[tilesHolder addSubview:[self createImageTile:/*Image*/ Count:count Rect:CGRectMake( 320*count , 0, 320, IMAGE_HEIGHT)]];
if you use AFNetworking Conect, you use Image Request concept :-
try this code:-
- (void)setupPage
{
scrollPage = 0 ;
scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0.0f,0, 320,367)];
[scrollView setBackgroundColor:[UIColor clearColor]];
[scrollView setDelegate:self];
[self.view addSubview:scrollView];
NSUInteger nimages = 0;
CGFloat cx = 0;
CGFloat cy = 0;
for (; nimages < [stealArr count]; nimages++)
{
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f,320.0f,367)];
CGRect rect = imageView.frame;
rect.size.height = 331;
rect.size.width = 320.0f;
rect.origin.y = 0.0f;
rect.origin.x = 0.0f+cx;
imageView.frame = rect;
[imageView setBackgroundColor:[UIColor clearColor]];
imageView.contentMode = UIViewContentModeScaleToFill;
[scrollView addSubview:imageView];
[imageView setImageWithURL:[NSURL URLWithString:#"http://i.imgur.com/r4uwx.jpg"] placeholderImage:[UIImage imageNamed:#"placeholderImage"]];
cx += scrollView.frame.size.width;
cy += scrollView.frame.size.height;
}
pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 331.0f, 320, 36)] ;
[pageControl setCurrentPage:0] ;
[pageControl addTarget: self action: #selector(pageControlClicked:) forControlEvents: UIControlEventValueChanged] ;
[pageControl setDefersCurrentPageDisplay: YES];
[pageControl setBackgroundColor:[UIColor blackColor]];
[self.view addSubview:pageControl];
pageControl.numberOfPages = [stealArr count];
[scrollView setContentSize:CGSizeMake(cx,[scrollView bounds].size.height)];
[scrollView setPagingEnabled:TRUE];
}
when Your are scroll the page
- (void)scrollViewDidScroll:(UIScrollView *)sender {
// We don't want a "feedback loop" between the UIPageControl and the scroll delegate in
// which a scroll event generated from the user hitting the page control triggers updates from
// the delegate method. We use a boolean to disable the delegate logic when the page control is used.
// Switch the indicator when more than 50% of the previous/next page is visible
CGFloat pageWidth = scrollView.frame.size.width;
scrollPage = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
pageControl.currentPage = scrollPage;
be to unload the views+controllers which are no longer visible
}
for Paging
- (void)pageControlClicked:(id)sender
{
UIPageControl *thePageControl = (UIPageControl *)sender ;
// we need to scroll to the new index
[scrollView setContentOffset: CGPointMake(scrollView.bounds.size.width * thePageControl.currentPage, scrollView.contentOffset.y) animated: YES] ;
}

How to customize paging in UIScrollView?

I have a question in scroll view.
Right now I wrote a sample about image gallery with scroll view. I have plenty of images added into a scroll view. Each time, it display 3 images, the question is how can measure the scrolling properly. For example: the minimum each scroll is moving 1 image. Right now, I think each time I scroll, the minimum images moving are 3. That make me can't stop at the right image I want to see.
Below is the code.
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scroll 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(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
// set the content size so it can be scrollable
[scroll setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scroll bounds].size.height)];
}
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
// 1. setup the scrollview for multiple images and add it to the view controller
//
// note: the following can be done in Interface Builder, but we show this in code for clarity
[scroll setBackgroundColor:[UIColor blackColor]];
[scroll setCanCancelContentTouches:NO];
scroll.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scroll.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
scroll.scrollEnabled = YES;
// pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
// if you want free-flowing scroll, don't set this property.
scroll.pagingEnabled = YES;
// load all the images from our bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i; // tag our images for later use when we place them in serial fashion
[scroll addSubview:imageView];
[imageView release];
}
[self layoutScrollImages];
}
Use this code......
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if(scroll.contentOffset.y> 320)
{
int y = scrollView.contentOffset.y;
y = y/3;
[scrollView setContentOffset:CGPointMake(0, y)];
}
}
Hope, this will help you...Chill
Subclass the content view and overwrite this function:
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
if ([self pointInside:point withEvent:event]) {
if ([[self subviews] count] > 0) {
//force return of first child, if exists
return [[self subviews] objectAtIndex:0];
} else {
return self;
}
}
return nil; }
See detail at https://github.com/taufikobet/ScrollViewCustomPaging.

How would I add a dissolve transition to my code? (comic book)

How would I add a dissolve transition to my code?
I tried looking at Apple's code but to no avail. Any ideas?
#import "ApotheosisViewController.h"
#implementation ApotheosisViewController
#synthesize scrollView1;
- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation {
return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}
const CGFloat kScrollObjHeight = 320.0;
const CGFloat kScrollObjWidth = 480.0;
const NSUInteger kNumImages = 40;
- (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(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
- (void)viewDidLoad
{
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
// 1. setup the scrollview for multiple images and add it to the view controller
//
// note: the following can be done in Interface Builder, but we show this in code for clarity
[scrollView1 setBackgroundColor:[UIColor blackColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleBlack;
scrollView1.clipsToBounds = NO; // default is NO, we want to restrict drawing within our scrollview
scrollView1.scrollEnabled = YES;
// pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
// if you want free-flowing scroll, don't set this property.
scrollView1.pagingEnabled = YES;
// load all the images from our bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i; // tag our images for later use when we place them in serial fashion
[scrollView1 addSubview:imageView];
[imageView release];
}
[self layoutScrollImages]; // now place the photos in serial layout within the scrollview
}
- (void)dealloc
{
[scrollView1 release];
[super dealloc];
}
- (void)didReceiveMemoryWarning
{
// invoke super's implementation to do the Right Thing, but also release the input controller since we can do that
// In practice this is unlikely to be used in this application, and it would be of little benefit,
// but the principle is the important thing.
//
[super didReceiveMemoryWarning];
}
#end
I can't immediately tell what the code you posted has to do with a dissolve transition.
If you are trying to go from one view to another, then you could put this in your code:
In
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
for one viewController:
self.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
and when switching from one view to the other:
[self presentModalViewController:otherViewController animated:YES];

Need help with Scroll View Crashing

I am trying to display about 53 images in Xcode for iphone, but about the 37th image crashes my entire app! If any one sees any errors in my code, I would really appreciate your help. Thank you!!
I think I am not releasing my images somewhere...just not sure what to do!
#import "MyProjectViewController.h"
#implementation MyProjectViewController
#synthesize scrollView1;
- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation {
return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}
const CGFloat kScrollObjHeight = 320.0;
const CGFloat kScrollObjWidth = 480.0;
const NSUInteger kNumImages = 53;
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
- (void)viewDidLoad
{
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
[scrollView1 setBackgroundColor:[UIColor blackColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.clipsToBounds = YES;
scrollView1.scrollEnabled = YES;
scrollView1.pagingEnabled = YES;
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"c1_%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i;
[scrollView1 addSubview:imageView];
[imageView release];
}
[self layoutScrollImages];
}
- (void)dealloc
{
[scrollView1 release];
[super dealloc];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
#end
Thank you!!!!!
How big are images? I suspect the problem is not with code itself, but with memory limitations of iPhone/iPod - if you're loading big images they simply eat all memory and program is closed.
Well the most likely reason is that you run out of memory. Put an NSLog message in didReceiveMemoryWarning to check if you are getting a warning for low memory.
In any case I would suggest that you lazy load images and not all of the images at once. It will greatly reduce to load time of your app and will also probably solve your memory problems. Use the UIScrollViewDelegate to know when to load images that weren't loaded yet according to the position of the UIScrollView offset value.