I am trying to set up an app very similar to the Photos app on the iPhone. The problem I am running into is that I cannot figure out a good way to set the minimum zoom scale and force the current zoom scale back to the minimum if it is currently smaller than the minimum.
Here is how I am currently setting up my scrollview...
- (void)viewDidLoad{
NSData * imageData = [[[NSData alloc] autorelease] initWithContentsOfURL: [NSURL URLWithString: imageURL]];
UIImage *babe = [UIImage imageWithData:imageData];
babeView = [[UIImageView alloc]
initWithImage:babe];
[self.view addSubview:babeView];
UIBabeScrollView* myScrollview = (UIBabeScrollView*)self.view;
myScrollview.frame = [UIScreen mainScreen].applicationFrame;
[myScrollview setContentSize:[babe size]];
[myScrollview setMaximumZoomScale:2.0];
// Work out a nice minimum zoom for the image - if it's smaller than the ScrollView then 1.0x zoom otherwise a scaled down zoom so it fits in the ScrollView entirely when zoomed out
CGSize imageSize = babeView.image.size;
CGSize scrollSize = myScrollview.frame.size;
CGFloat widthRatio = scrollSize.width / imageSize.width;
CGFloat heightRatio = scrollSize.height / imageSize.height;
CGFloat minimumZoom = MIN(1.0, (widthRatio > heightRatio) ? heightRatio : widthRatio);
[myScrollview setMinimumZoomScale:minimumZoom];
[myScrollview setZoomScale:minimumZoom];
My UIBabeScrollView is subclassed to overload it's layoutSubviews like so...
- (void)layoutSubviews {
[super layoutSubviews];
// center the image as it becomes smaller than the size of the screen
CGSize boundsSize = self.bounds.size;
CGRect frameToCenter = ((UIImageView*)[self.subviews objectAtIndex:0]).frame;
// center horizontally
if (frameToCenter.size.width < boundsSize.width)
frameToCenter.origin.x = (boundsSize.width - frameToCenter.size.width) / 2;
else
frameToCenter.origin.x = 0;
// center vertically
if (frameToCenter.size.height < boundsSize.height)
frameToCenter.origin.y = (boundsSize.height - frameToCenter.size.height) / 2;
else
frameToCenter.origin.y = 0;
((UIImageView*)[self.subviews objectAtIndex:0]).frame = frameToCenter;
}
The affect I am going for is that the image is always centered, and cannot be zoomed out more than the width or height of the image.
Right now this works fine in portrait mode, but when it is switched to landscape, the zoom scales are incorrect.
Any help would be appreciated, as I am still a fledgling iphone app developer.
In your view controller, implement -willRotateToInterfaceOrientation:duration:
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
if (toInterfaceOrientation == UIDeviceOrientationLandscapeLeft ||
toInterfaceOrientation == UIDeviceOrientationLandscapeRight) {
[myScrollview setMinimumZoomScale:yourLandscapeMinimumZoomValue];
[myScrollview setZoomScale:yourLandscapeMinimumZoomValue];
} else {
[myScrollview setMinimumZoomScale:yourPortraitMinimumZoomValue];
[myScrollview setZoomScale:yourPortraitMinimumZoomValue];
}
}
Also another point, just for information. I was trying the [scrollview setZoomScale: :animated] method. On orientation change, it would not Scale to the required value.
It results in an uncompleted animation.
Related
I am getting a Exc_Bad_Access error in main when I try to scroll my UIScrollView. This program is simple. I have A UIViewController added in AppDelegate. Then, here is the code in the ViewController. This works fine for scrolling but as soon as I add tmpScrollView.delegate = self. The program won't scroll or zoom and gives me the Exc_Bad_Access error when I try to zoom.
#interface MainViewController : UIViewController <UIScrollViewDelegate>
#property (nonatomic,retain) UIScrollView *tmpScrollView;
#property (nonatomic,retain) UIView *containerView;
#end
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
tmpScrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
tmpScrollView.delegate = self;
[self.view addSubview:tmpScrollView];
// Set up the container view to hold our custom view hierarchy
CGSize containerSize = CGSizeMake(640.0f, 640.0f);
self.containerView = [[UIView alloc] initWithFrame:(CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=containerSize}];
[self.tmpScrollView addSubview:self.containerView];
// Set up custom view hierarchy
UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 640.0f, 80.0f)];
redView.backgroundColor = [UIColor redColor];
[self.containerView addSubview:redView];
UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 560.0f, 640.0f, 80.0f)];
blueView.backgroundColor = [UIColor blueColor];
[self.containerView addSubview:blueView];
UIView *greenView = [[UIView alloc] initWithFrame:CGRectMake(160.0f, 160.0f, 320.0f, 320.0f)];
greenView.backgroundColor = [UIColor greenColor];
[self.containerView addSubview:greenView];
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"slow.png"]];
imageView.center = CGPointMake(320.0f, 320.0f);
[self.containerView addSubview:imageView];
//Tell the scroll view the size of the contents
self.tmpScrollView.contentSize = containerSize;
}
-(void)viewWillAppear:(BOOL)animated
{
NSLog(#"Will Appear");
[super viewWillAppear:animated];
// Set up the minimum & maximum zoom scales
CGRect scrollViewFrame = self.tmpScrollView.frame;
CGFloat scaleWidth = scrollViewFrame.size.width / self.tmpScrollView.contentSize.width;
CGFloat scaleHeight = scrollViewFrame.size.height / self.tmpScrollView.contentSize.height;
CGFloat minScale = MIN(scaleWidth, scaleHeight);
self.tmpScrollView.minimumZoomScale = minScale;
self.tmpScrollView.maximumZoomScale = 1.0f;
self.tmpScrollView.zoomScale = minScale;
//***** Here is the line for setting the delegate
self.tmpScrollView.delegate = self;
[self centerScrollViewContents];
}
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
NSLog(#"End Zoom");
}
-(UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {
// Return the view that we want to zoom
return self.containerView;
}
-(void)scrollViewDidZoom:(UIScrollView *)scrollView {
// The scroll view has zoomed, so we need to re-center the contents
[self centerScrollViewContents];
}
#end
Thanks for any help. This has been driving me crazy for a day now...
Edit: Adding centerScrollViewContens too:
- (void)centerScrollViewContents {
CGSize boundsSize = self.tmpScrollView.bounds.size;
CGRect contentsFrame = self.containerView.frame;
if (contentsFrame.size.width < boundsSize.width) {
contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
} else {
contentsFrame.origin.x = 0.0f;
}
if (contentsFrame.size.height < boundsSize.height) {
contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
} else {
contentsFrame.origin.y = 0.0f;
}
self.containerView.frame = contentsFrame;
}
Whatever Code you have provided is working fine on my end.May be there could be some sort of problem in your "centerScrollViewContents" method.Can you post the code for this method also???
You need to work out the minimum zoom scale for the scroll view. A zoom scale of one means that the content is displayed at normal size. A zoom scale below one shows the content zoomed out, while a zoom scale of greater than one shows the content zoomed in. To get the minimum zoom scale, you calculate how far you’d need to zoom out so that the image fits snugly in your scroll view’s bounds based on its width. Then you do the same based upon the image’s height. The minimum of those two resulting zoom scales will be the scroll view’s minimum zoom scale. That gives you a zoom scale where you can see the entire image when fully zoomed out.
Swift:
let scrollViewFrame = scrollView.frame
let scaleWidth = scrollViewFrame.size.width / scrollView.contentSize.width
let scaleHeight = scrollViewFrame.size.height / scrollView.contentSize.height
let minScale = min(scaleWidth, scaleHeight);
scrollView.minimumZoomScale = minScale;
Objective-C
CGFloat scrollViewFrame = scrollView.frame
CGFloat scaleWidth = scrollViewFrame.size.width / scrollView.contentSize.width
CGFloat scaleHeight = scrollViewFrame.size.height / scrollView.contentSize.height
CGFloat minScale = min(scaleWidth, scaleHeight);
scrollView.minimumZoomScale = minScale;
From other projects and personal experience doing heavy GPU on the iOS (endless scroll, maximum bitmap size, etc), I've noticed that each device has it's own threshold. For past projects, I've also hardcoded the below values as the minimumZoomScale to prevent the crashes:
scale :
{
iPad : {
min : 0.8
, max : 1.6
}
, iPhone : {
min : 0.25
, max : 1.6
}
, iPhone6 : {
min : 0.3333
, max : 1.6
}
, iPhoneResizable: {
min : 1
, max : 1.6
}
}
Great tutorial for beginners: http://www.raywenderlich.com/76436/use-uiscrollview-scroll-zoom-content-swift
I have a custom UIViewController onto which I've added a UIImageView (on the StoryBoard) and then embedded the UIImageView in a UIScrollView. My program loads an image into the imageView and scales it to properly fit. By proper fit, I mean this:
if the aspect ratio of the image exactly matches that of the view, the image will be scaled to exactly fit the view, with no scroll bars
otherwise, the image will be scaled to exactly fit in one dimension, with a scrollbar in the other dimension.
I currently do this in viewWillAppear. Below is my code for that method and an auxiliary method that calculates the correct zoomScale:
-(float) findZoomScale {
float widthRatio = self.view.bounds.size.width / self.imageView.image.size.width;
float heightRatio = self.view.bounds.size.height / self.imageView.image.size.height;
float ratio;
if (widthRatio > heightRatio) ratio = widthRatio;
else ratio = heightRatio;
return ratio;
}
- (void) viewWillAppear:(BOOL)animated {
[super viewWillAppear:YES];
self.imageView.image = self.image;
self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
self.scrollView.contentSize = self.imageView.image.size;
self.scrollView.zoomScale = [self findZoomScale];
[self.scrollView flashScrollIndicators];
}
- (void)viewDidLoad {
[super viewDidLoad];
self.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:self.photoURL]];
self.imageView.image = self.image;
self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width,
self.imageView.image.size.height);
self.scrollView.delegate = self;
self.scrollView.zoomScale = 1.0;
self.navigationItem.title = self.photoTitle;
self.scrollView.autoresizesSubviews = YES;
self.scrollView.autoresizingMask = (UIViewAutoresizingFlexibleBottomMargin |
UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin |
UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleHeight);
}
This code works as I intended for the initial load of an image, whether the iPhone is in landscape or portrait orientation. But when I then rotate the iPhone with the image already loaded, it does not properly rescale. I have tried to do the rescaling in didRotateFromInterfaceOrientation, playing with the scrollView's zoomScale property, but I can't get it to work. Is this the correct place to do the rescaling? And if so, how do I do it? Thanks.
Duane
I just had this exact problem (I assume you're on the CS193p assignment 4 as well), and solved it by setting the zoomScale back to 1 before adjusting the UIScrollView's contentSize upon rotation.
For example:
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
//reset zoomScale back to 1 so that contentSize can be modified correctly
self.scrollView.zoomScale = 1;
// reset scrolling area equal to size of image
self.scrollView.contentSize = self.imageView.image.size;
//reset the image frame to the size of the image
self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
//set the zoomScale to what we actually want
self.scrollView.zoomScale = [self findZoomScale];
}
You can use
-(void)viewWillLayoutSubviews
in your UIViewController. This will get called whenever the view is loaded/rotated/resized.
I have an UIImageView inside an UIScrollView. I want that the user can zoom and navigate the image.
This is my work code:
//img is the UIImageView
//scroller is the UIScrollView
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return img;
}
- (void)viewDidLoad {
[super viewDidLoad];
UIImage *image = [UIImage imageNamed:#"map_screen.png"];
img = [[UIImageView alloc] initWithImage:image];
scroller.delegate = self;
scroller.autoresizesSubviews = YES;
scroller.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
scroller.contentSize = img.frame.size;
scroller.scrollEnabled = YES;
scroller.directionalLockEnabled = NO;
scroller.userInteractionEnabled = YES;
CGSize ivsize = img.frame.size;
CGSize ssize = scroller.frame.size;
float scalex = ssize.width / ivsize.width;
float scaley = ssize.height / ivsize.height;
scroller.minimumZoomScale = fmin(1.0, fmax(scaley, scalex));
scroller.zoomScale = fmin(1.0, fmax(scalex, scaley));
[scroller addSubview:img];
img.userInteractionEnabled = YES;
}
all works, but this happened: the minimum zoom is the height of the screen.
My image has the width bigger than the height, so i want that the minumum zoom is the width.
If i write
scroller.minimumZoomScale = fmin(1.0, scalex);
works, but when the user zooms out, the image is not at the center of the screen, but at the top.
i've tried something like this
CGPoint scrollCenter = [scroller center];
[img setCenter:CGPointMake(scrollCenter.x, scrollCenter.y)];
or
img.center = scroller.center;
but with this solution, the image is not completly scrollable, and if i zoom out, it stay again at the top of the screen, but is not completly visible!
What can i do for fix it?
You have to do it manually while the zooming is in progress using the scrollViewDidZoom delegate function... something like
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
// center the image as it becomes smaller than the size of the screen
CGSize boundsSize = scrollView.bounds.size;
CGRect frameToCenter = imageView.frame;
// center horizontally
if (frameToCenter.size.width < boundsSize.width)
{
frameToCenter.origin.x = (boundsSize.width - frameToCenter.size.width) / 2;
} else {
frameToCenter.origin.x = 0;
}
// center vertically
if (frameToCenter.size.height < boundsSize.height)
{
frameToCenter.origin.y = (boundsSize.height - frameToCenter.size.height) / 2;
} else {
frameToCenter.origin.y = 0;
}
imageView.frame = frameToCenter;
}
A Swift 3.0 version of Bastian 's answer, a little more succinct:
func scrollViewDidZoom(_ scrollView: UIScrollView) {
// center the image as it becomes smaller than the size of the screen
let boundsSize = scrollView.bounds.size
var frameToCenter = imageView.frame
// center horizontally and vertically
let widthDiff = boundsSize.width - frameToCenter.size.width
let heightDiff = boundsSize.height - frameToCenter.size.height
frameToCenter.origin.x = (widthDiff > 0) ? widthDiff / 2 : 0;
frameToCenter.origin.y = (heightDiff > 0) ? heightDiff / 2 : 0;
imageView.frame = frameToCenter;
}
I have implemented a PDF viewer in my app. It's a scroll view which uses CATiledLayer for zooming.
A simpler approach would have been to use QLPreviewController, which supports PDF viewing with page control and zooming but I need fine control over the PDF page.
I have the viewer working but would like the redraw to kick in sooner. At the moment it only redraws the text when I zoom in to double the size (200%). So the text appears blurry until you zoom in far enough.
I have tried various combinations of levelOfDetail and levelOfDetailBias to try and get the re-drawing to occur sooner but to no avail.
Here is the code which creates the CATiledLayers:
//get the pdf crop box rectangle
CGPDFPageRef pageRef=[self.pdf getPdfPage:self.myPageNo];
CGRect cropBox = CGRectIntegral(CGPDFPageGetBoxRect(pageRef, kCGPDFCropBox));
//scale to size of the screen
CGRect targetRect = self.view.bounds;
CGFloat xScale = targetRect.size.width / cropBox.size.width;
CGFloat yScale = targetRect.size.height / cropBox.size.height;
self.scale = xScale < yScale ? xScale : yScale;
//alway fill height of screen
self.scale = yScale;
//used to center the pdf horizontally
self.xOffSet = (targetRect.size.width - cropBox.size.width*self.scale)/2;
[self renderPDFPageToImage];
CGRect boundsRect = self.view.bounds;
//use a tiled layer for better performance
CATiledLayer *tiledLayer = [CATiledLayer layer];
tiledLayer.delegate = self;
tiledLayer.tileSize = CGSizeMake(1024.0, 1024.0);
tiledLayer.levelsOfDetail = 4;
tiledLayer.levelsOfDetailBias = 4;
tiledLayer.frame = boundsRect;
self.myContentView = [[[UIView alloc] initWithFrame:boundsRect] autorelease];
[self.myContentView.layer addSublayer:tiledLayer];
CGRect viewFrame = self.view.frame;
viewFrame.origin = CGPointZero;
UIScrollView *_scrollView = [[UIScrollView alloc] initWithFrame:viewFrame];
_scrollView.delegate = self;
_scrollView.contentSize = boundsRect.size;
_scrollView.maximumZoomScale = 4;
[_scrollView addSubview:myContentView];
//retain it
self.scrollView=_scrollView;
[self.view addSubview:_scrollView];
[_scrollView release];
Please point me in the right direction.
I have been struggling with this problem for some time and there seems to be no clear answer. Please let me know if anyone has figured this out.
I want to display a photo in a UIScrollView that is centered on the screen (the image may be in portrait or landscape orientation).
I want to be able to zoom and pan the image only to the edge of the image as in the photos app.
I've tried altering the contentInset in the viewDidEndZooming method and that sort of does the trick, but there's several glitches.
I've also tried making the imageView the same size as the scrollView and centering the image there. The problem is that when you zoom, you can scroll around the entire imageView and part of the image may scroll off the view.
I found a similar post here and gave my best workaround, but no real answer was found:
UIScrollView with centered UIImageView, like Photos app
One elegant way to center the content of UISCrollView is this.
Add one observer to the contentSize of your UIScrollView, so this method will be called everytime the content change...
[myScrollView addObserver:delegate
forKeyPath:#"contentSize"
options:(NSKeyValueObservingOptionNew)
context:NULL];
Now on your observer method:
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
// Correct Object Class.
UIScrollView *pointer = object;
// Calculate Center.
CGFloat topCorrect = ([pointer bounds].size.height - [pointer viewWithTag:100].bounds.size.height * [pointer zoomScale]) / 2.0 ;
topCorrect = ( topCorrect < 0.0 ? 0.0 : topCorrect );
topCorrect = topCorrect - ( pointer.frame.origin.y - imageGallery.frame.origin.y );
// Apply Correct Center.
pointer.center = CGPointMake(pointer.center.x,
pointer.center.y + topCorrect ); }
You should change the [pointer
viewWithTag:100]. Replace by your
content view UIView.
Also change imageGallery pointing to your window size.
This will correct the center of the content everytime his size change.
NOTE: The only way this content don't works very well is with standard zoom functionality of the UIScrollView.
This code should work on most versions of iOS (and has been tested to work on 3.1 upwards).
It's based on the Apple WWDC code for the PhotoScroll app.
Add the below to your subclass of UIScrollView, and replace tileContainerView with the view containing your image or tiles:
- (void)layoutSubviews {
[super layoutSubviews];
// center the image as it becomes smaller than the size of the screen
CGSize boundsSize = self.bounds.size;
CGRect frameToCenter = tileContainerView.frame;
// center horizontally
if (frameToCenter.size.width < boundsSize.width)
frameToCenter.origin.x = (boundsSize.width - frameToCenter.size.width) / 2;
else
frameToCenter.origin.x = 0;
// center vertically
if (frameToCenter.size.height < boundsSize.height)
frameToCenter.origin.y = (boundsSize.height - frameToCenter.size.height) / 2;
else
frameToCenter.origin.y = 0;
tileContainerView.frame = frameToCenter;
}
Here is the best solution I could come up with for this problem. The trick is to constantly readjust the imageView's frame. I find this works much better than constantly adjusting the contentInsets or contentOffSets. I had to add a bit of extra code to accommodate both portrait and landscape images.
If anyone can come up with a better way to do it, I would love to hear it.
Here's the code:
- (void) scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale {
CGSize screenSize = [[self view] bounds].size;
if (myScrollView.zoomScale <= initialZoom +0.01) //This resolves a problem with the code not working correctly when zooming all the way out.
{
imageView.frame = [[self view] bounds];
[myScrollView setZoomScale:myScrollView.zoomScale +0.01];
}
if (myScrollView.zoomScale > initialZoom)
{
if (CGImageGetWidth(temporaryImage.CGImage) > CGImageGetHeight(temporaryImage.CGImage)) //If the image is wider than tall, do the following...
{
if (screenSize.height >= CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale]) //If the height of the screen is greater than the zoomed height of the image do the following...
{
imageView.frame = CGRectMake(0, 0, 320*(myScrollView.zoomScale), 368);
}
if (screenSize.height < CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale]) //If the height of the screen is less than the zoomed height of the image do the following...
{
imageView.frame = CGRectMake(0, 0, 320*(myScrollView.zoomScale), CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale]);
}
}
if (CGImageGetWidth(temporaryImage.CGImage) < CGImageGetHeight(temporaryImage.CGImage)) //If the image is taller than wide, do the following...
{
CGFloat portraitHeight;
if (CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale] < 368)
{ portraitHeight = 368;}
else {portraitHeight = CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale];}
if (screenSize.width >= CGImageGetWidth(temporaryImage.CGImage) * [myScrollView zoomScale]) //If the width of the screen is greater than the zoomed width of the image do the following...
{
imageView.frame = CGRectMake(0, 0, 320, portraitHeight);
}
if (screenSize.width < CGImageGetWidth (temporaryImage.CGImage) * [myScrollView zoomScale]) //If the width of the screen is less than the zoomed width of the image do the following...
{
imageView.frame = CGRectMake(0, 0, CGImageGetWidth(temporaryImage.CGImage) * [myScrollView zoomScale], portraitHeight);
}
}
[myScrollView setZoomScale:myScrollView.zoomScale -0.01];
}
Here is how I calculate the the min zoom scale in the viewDidLoad method.
CGSize photoSize = [temporaryImage size];
CGSize screenSize = [[self view] bounds].size;
CGFloat widthRatio = screenSize.width / photoSize.width;
CGFloat heightRatio = screenSize.height / photoSize.height;
initialZoom = (widthRatio > heightRatio) ? heightRatio : widthRatio;
[myScrollView setMinimumZoomScale:initialZoom];
[myScrollView setZoomScale:initialZoom];
[myScrollView setMaximumZoomScale:3.0];