Calculating minimumZoomScale of a UIScrollView - iphone

I have an image that I want to load into an image view and set the minimumZoomScale, as well as the zoomScale to an aspectFill like scale that I calculate as follows:
// configure the map image scroll view
iImageSize = CGSizeMake(iImageView.bounds.size.width, iImageView.bounds.size.height);
iScrollView.minimumZoomScale = iScrollView.bounds.size.height / iImageSize.height;
iScrollView.maximumZoomScale = 2;
iScrollView.zoomScale = iScrollView.minimumZoomScale;
iScrollView.contentOffset = CGPointMake(0, 0);
iScrollView.clipsToBounds = YES;
The iScrollView size is 450 x 320px and the iImageSize is 1600 x 1960px.
Doing the minimumZoomScale math by hand: 450 / 1960 = 0.22959184.
The system determines 0.234693885 instead (???).
But to get the window fit into the 450px space, both figures don't work (!!!).
I manually tried and found 0.207 is the right number (that would translate to a image height of 2174 xp or alternatively a UIScrollView height of 406px).
For information: the UIScrollview screen is 450px, namely 480px minus status bar height (10), minus UITabBar height (20)
Any clues on this misbehaviour?

Not sure if you still have this problem, but for me, the scale is exactly the opposite. minimumZoomScale = 1 for me and I have to calculate the maximumZoomScale.
Here's the code:
[self.imageView setImage:image];
// Makes the content size the same size as the imageView size.
// Since the image size and the scroll view size should be the same, the scroll view shouldn't scroll, only bounce.
self.scrollView.contentSize = self.imageView.frame.size;
// despite what tutorials say, the scale actually goes from one (image sized to fit screen) to max (image at actual resolution)
CGRect scrollViewFrame = self.scrollView.frame;
CGFloat minScale = 1;
// max is calculated by finding the max ratio factor of the image size to the scroll view size (which will change based on the device)
CGFloat scaleWidth = image.size.width / scrollViewFrame.size.width;
CGFloat scaleHeight = image.size.height / scrollViewFrame.size.height;
self.scrollView.maximumZoomScale = MAX(scaleWidth, scaleHeight);
self.scrollView.minimumZoomScale = minScale;
// ensure we are zoomed out fully
self.scrollView.zoomScale = minScale;

For simple zoom in/out i generally use below code. minimumZoomScale= 1 sets initial zoom to current image size. I have given maximumZoomScale = 10 which can be calculated from actual ratio of image size and container frame size.
[scrollView addSubview: iImageView];
scrollView.contentSize = iImageView.frame.size;
scrollView.minimumZoomScale = 1.0;
scrollView.maximumZoomScale = 10;
[iImageView setFrame:CGRectMake(0, 0, 450, 320)];
[scrollView scrollRectToVisible:iImageView.frame animated:YES];

Related

how to set image in top avoiding space in UIimageView

I've an UIImageView with content mode Aspect Fit of size 220x155. I'm dynamically inserting different images in different resolutions, but all larger than the size of the UIImageView. As the content mode is set to Aspect Fit, the image is scaled with respect to the ratio to fit the UIImageView.
My problem is, that if for instance the image inside the UIImageView is scaled to 220x100, I would like the UIImageView to shrink from a height of 155 to 100 too to avoid space between my elements.
How can I do this?
I wrote this method to get me the frame of the image view once it loaded an image.
So , the requirements for me were the same as in your case:
1) image view with aspect fit content mode
2) get the exact frame of the image ( this way you can re-position the image view )
Hope this helps:
- (CGRect) getFrameOfImage:(AsyncImageView *) imgView
{
if(!imgView.loaded)
return CGRectZero;
CGSize imgSize = imgView.image.size;
CGSize frameSize = imgView.frame.size;
CGRect resultFrame;
if(imgSize.width < frameSize.width && imgSize.height < frameSize.height)
{
resultFrame.size = imgSize;
}
else
{
float widthRatio = imgSize.width / frameSize.width;
float heightRatio = imgSize.height / frameSize.height;
float maxRatio = MAX (widthRatio , heightRatio);
NSLog(#"widthRatio = %.2f , heightRatio = %.2f , maxRatio = %.2f" , widthRatio , heightRatio , maxRatio);
resultFrame.size = CGSizeMake(imgSize.width / maxRatio, imgSize.height / maxRatio);
}
resultFrame.origin = CGPointMake(imgView.center.x - resultFrame.size.width/2 , imgView.center.y - resultFrame.size.height/2);
return resultFrame;
}
I am using here AsyncImageView but it will work just as good with UIImageView. The important thing to remember is to call this method AFTER the image was loaded.
Cheers!
Its very simple, you just need to get image actual size, which can be done by
UIImage *image = [UIImage imageName:#""];
then you just need to set frame
Like :-
imageView.frame = CGRectMake(0.0, 0.0, image.size.width, image.size.height);
Hope this helps you.
Once the imageview's image is set to the new image (and thus scaled) you can get the height of the image inside the imageview (imageview.image.size.height) and set the imageview's height (frame) accordingly.

Manually Scaling UIImage for UIImageView

What is the best way to manually reproduce
contentMode = UIViewContentModeScaleAspectFit;
without using it?
I need to scale a UIImageView (inside a scroll view) to fit the aspect ratio. I need to know the new size of the image to draw overlays over it.
Recently, I needed to find the frame of the image inside an ImageView, to add touchable views over that image, this is how I did it:
-(void)calculateScaleAndContainerFrame{
if(!imageView || !image) return;
CGSize imageSize = image.size;
CGSize imageViewSize = imageView.frame.size;
float imageRatio = imageSize.width / imageSize.height;
float viewRatio = imageViewSize.width / imageViewSize.height;
if(imageRatio > viewRatio){
scale = imageSize.width / imageViewSize.width;
}else{
scale = imageSize.height / imageViewSize.height;
}
CGRect frame = CGRectZero;
frame.size = CGSizeMake(roundf(imageSize.width / scale), roundf(imageSize.height / scale));
frame.origin = CGPointMake((imageViewSize.width - frame.size.width) / 2.0, (imageViewSize.height - frame.size.height) / 2.0);
[container setFrame:frame];
}
I'm pretty sure you can use it as a guide, replacing the imageViewSize with the content size of your scroll view (or the view you want to put your image in).
Note 1: In my case, I needed to center the view vertically, if you don't, just set the y to 0 on the line where I set the frame origin. Same for x if you don't want to center the image horizontally.
Note 2: This is NOT, by any means, a code you can just plug in into your project and work, you'll probably have to read it, understand it, and then apply the method to your own project. I don't have time right now to modify it to your needs.
Note 3: With that code I managed to get a view perfectly over the image inside a image view that used that content mode, so it works.

How to center UIImage and UILabel horizontally together?

I have an image for user's icon and a label for user's name
And I want the image and the label align center horizontally in the screen.
Because the length of the label changes as the length of user's name, (the size of image is fixed)
I can't set the positon as a fixed value.
Now I change the positon of the image and lalel at runtime,
It's not convenient.
Is there any good way to do this?
Thank you:)
Here is the snapshot:
All right.
I know there is no a very convenient way to do this just with IB.
And I learn the function of [label sizetoFit].
It's very helpful.
In android, it's very convenient to do this just with the xml layout.
But in ios I have to write code to control the positon of image and label.
Yes...Not too bad.
Thanks everybody :)
[label sizetoFit];
label.center =imageView.center;
this will make the label center on the image center..and it will appear on top...
now you can just use CGRect manipulation to move the label origin downwards based on your image height.
Edit .. now you can do this ..
CGRect frame = label.frame;
frame.origin.x -= imageview.frame.size.width/2 - 15; // you can change 15 to a more appropriate number based on your preference..
label.frame = frame;
Do the above after you do the 2 lines of code given on top in my answer.
Do some calculation
Width of UIImageView + Offset width (Space b/n UIImageView and UILabel "Keep this as constant value") + UILabel Width = You Will get some 'X' width.
iPhone screen width is 460.
320-X = Remaining width.
Remaining width/2 pass this value to UIImageView's X value. This might help you.
#define MARGIN 10.0f
In your -layoutSubviews method, do this:
[ label sizeToFit ] ;
CGRect r = label.frame ;
r.origin = (CGPoint){ CGRectGetMaxX( imageView.frame ) + MARGIN, CGRectGetMidY( imageView.frame ) - 0.5 * r.size.height } ;
label.frame = CGRectIntegral( r ) ;
update here's how to center the the image view and label unit
bounds should be set to bounds of enclosing view
//
// center an image view + label in parent view, with label to right of image view
//
[ label sizeToFit ] ;
CGSize size = (CGSize){ imageView.image.size.width + MARGIN + label.bounds.size.width,
MAX( imageView.image.size.height, label.bounds.size.height } ;
CGRect r = (CGRect){
{ CGRectGetMidX( bounds ) - 0.5 * size.width,
CGRectGetMidY( bounds ) - 0.5 * size.height },
size }
} ;
CGRect imageFrame, labelFrame ;
CGRectDivide( r, &imageFrame, &labelFrame, imageView.image.size.width, CGRectMinXEdge ) ;
imageView.frame = imageFrame ;
labelView.frame = labelFrame ;

CATiledLayer gets a incorrect frame & contextCTM.a value (zoomScale)

following WWDC2010 Session 104 I just created a CATiledLayer within a UIScrollView for a 10000 x 8078 px image.
I am troubled with the frame & zoomScale when the view is first shows at its top level
like in session 104 I defined levelsOfDetail as 4
in my drawRect I call CGFloat lScale = CGContextGetCTM(lContext).a;
Strangely at runtime lScale is assigned 0.124907158, not 0.125 as expected.
As well the rect passed to drawRect has floatpoint values, such as
rect.origin.x = 4099.04443
rect.origin.y = 6144
rect.size.width = 2049.52222
rect.size.height = 2048
Most irritating for me is that the frame of the CATiledLayer shows an origin 0 x 26.93 even though I created the tiledImageView using initWithFrame using a 0x0 origin.
Any ideas where I can find the calculation that is responsible for this?
EDIT:
I found the source for the wierd frame position, which is the ScrollView bounds being incorrectly set at 450 px. that should be 420 px. The layoutSubview routine in the UIScrollView has a center view routine that inadvertently adjusted the y coordinate.
I found a cure to this.
The WWDC 2010 session 104 sample has two UIScrollView methods that control the view behaviour.
The first is configureForImageSize that I mentioned in my previously posted answer where the zoomscales are set.
Due to the explained float-point difference the imageView-bounds get generated with the decimals as highlighted before (see wx/hx or wy/hy).
To get clean this up I used the override of layoutSubviews where I calculate the view frame:
- (void) layoutSubviews {
[super layoutSubviews];
CGSize lBoundsSize = self.bounds.size;
CGRect lFrameToCenter = imageView.frame;
// cure to the decimals problem
lFrameToCenter.size.width = roundf(lFrameToCenter.size.width);
lFrameToCenter.size.height = roundf(lFrameToCenter.size.height);
if (lFrameToCenter.size.width < lBoundsSize.width)
lFrameToCenter.origin.x = (lBoundsSize.width - lFrameToCenter.size.width) / 2;
else
lFrameToCenter.origin.x = 0;
if (lFrameToCenter.size.height < lBoundsSize.height)
lFrameToCenter.origin.y = (lBoundsSize.height - lFrameToCenter.size.height) / 2;
else
lFrameToCenter.origin.y = 0;
imageView.frame = lFrameToCenter;
if ([imageView isKindOfClass:[tileView class]]) {
imageView.contentScaleFactor = 1.0;
}
}
Note that I round the frame size before doing anything else with it!
I got a little further in my bug analysis.
Having an mImageSize of 10000x8078 and 320x450 Bounds in the UIScrollView I used the configureForImageSize calculations from the session 104 example as follows:
- (void) configureForImageSize:(CGSize)mImageSize {
CGSize lBoundsSize = [self bounds].size;
// set up our content size and min/max zoomscale
CGFloat lXScale = lBoundsSize.width / mImageSize.width; // the scale needed to perfectly fit the image width-wise
CGFloat lYScale = lBoundsSize.height / mImageSize.height; // the scale needed to perfectly fit the image height-wise
// debug values
float wx = mImageSize.width * lXScale;
float wy = mImageSize.width * lYScale;
float hx = mImageSize.height * lXScale;
float hy = mImageSize.height * lYScale;
...
}
The debugger shows the following values:
* mImageSize = width 10000 height 8078
* bounds size: width 320 height 450
* lXScale = 0.0396137647
* lYScale = 0.0450000018
* wx = 320
* wy = 363.51001
* hx = 396.137634
* hy = 450.000031
so I gather the image size in relation to the bounds leads to a floatpoint calculation difference. When the CATiledLayer is generated the bounds are alway floatpoint values.
If that is the cause, how can I get a mathematical way out of this without having to resize the image (ugly thought)???

Formula for producing a CGRect for a UIScrollView, that displays a UIImage in scaled to fit way

I am loading in images with varying sizes and putting them in UIScrollViews, all the images are larger than the UIScrollView.
The user can scroll and zoom as they please, but initially I would like for the image
to be centered and scaled so the largest side of the image aligns with the edge of the scrollView, i.e. if the picture is in landscape I would like to size and scale it so that the left and right side goes all the way to the edge of the UIScrollVIew and vice versa
I found a formula in a utility function in the Programming guide but it does not quite fit my needs.
My approach is to use:
CGrect initialPos = ?
[self.scrollView zoomToRect:initialPos animated:YES];
I know the size of my scrollView and the size of my image, what I need to figure out is the scale and CGRect to apply to the scrollView to center and size my image.
Hope someone can help out:) Thanks
Edit: previous version was sizing the image to the view rather than the other way around. I think this should correct that:
double imgRatio = imageSize.width / imageSize.height;
double viewRatio = viewSize.width / viewSize.height;
if ( imgRatio >= viewRatio )
{
initialPos.size.width = imageSize.width;
initialPos.size.height = imageSize.width / viewRatio;
initialPos.origin.x = 0;
initialPos.origin.y = (imageSize.height - initialPos.size.height) / 2;
}
else
{
initialPos.size.height = imageSize.height;
initialPos.size.width = imageSize.height * viewRatio;
initialPos.origin.y = 0;
initialPos.origin.x = (imageSize.width - initialPos.size.width) / 2;
}