I have a UIImageView. I get a UIImage from a URL. The image displays in the UIImageView, but I can't get it to center correctly. The UIImage is 80 x 68 pixels. The UIImaveView's size is 90 x 90. When I display the UIImage in the UIImageView the UIImage is shrunken so that it fits, although it is already smaller than the UIImageView. I have tried all the Content Modes in IB. Some of them shift the image up so that it is no longer in the UIImageView. None of this really makes sense to me. It seems that the UIImage should display inside the UIImageView fine if it is already within the required size. Any help would be great.
With Mode of Center on the UIImageView
alt text http://img406.imageshack.us/img406/3696/screenshot20090915at447.png
With Mode of Aspect Fit on the UIImageView
alt text http://img406.imageshack.us/img406/9373/screenshot20090915at447e.png
With Center, the size of the image seems correct but you can see that it goes out of the UIImageView which has a red UIView underneath it and is actually 2px on each side larger than the image view. But with the Aspect Fit, it makes the image smaller so that it fits inside. But I don't understand why it would make it smaller if it is already small enough to fit.
Sorry for wasting anyone's time. Turns out I didn't try all of the content modes. Seems that Content Mode of Bottom top works. This is backwards from how I understood it. Thanks for all your help.
Try this. Change your UIImageView to be the same size as the UIImage that you are going to load, then position the UIImageView so that it's centered. This is the approach I've taken since I find UIImageView to be a bit funny to work with. Or, if you prefer, skip the UIImageView and just draw the UIImage using it's - (void)drawInRect:(CGRect)rect method.
Sounds like your image contains transparent areas, at least at the bottom, which shift the image off center.
Edit: Also, you should check that the resolution of the image is set to 72dpi.
Related
I am subclassing a UITableViewCell and in the drawRect: method I want to draw a stretchable image but I have experienced that this has a big impact on the scroll performance.
Does anyone know how I can use a stretchable image and still have a good scroll performance? Alternatively, I could make five images and draw those instead. One for each corner and a center image which would be stretched. This just seems such a hassle, and I actually thought that's what a stretchable image would do.
EDIT: If I should split up the image and stretch it myself, it should of course be nine images, not four. One for each corner, one for top middle, bottom middle, left middle, right middle and one for the center.
Try using [UIImage resizableImageWithCapInsets:] to create a resizable image instead of your own code. Create an UIImageView with image and just add it as subview to cell.contentView at index 0
I am trying to tile an image for an app I am making. I am making rope that I can set the length for. In order to do this, I have a function that takes my rope length, sets the frame size accordingly, and then sets the background color like this:
(picture is a UIView)
picture.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"Rope.png"]];
The view is blank. I tested it before by displaying an image by making picture a UIImageView instead, and it worked, but it won't show up anymore.
EDIT: I have now tried a few different methods of tiling, the best I can get is a stretched image. I need a working way to tile an image and get the output of my tiled image into a UIImage, UIImageView, or UIView.
Not sure what I did wrong but it is working now.
I have a UIButton with a specified width of 200. Its autoresizingMask property is set to UIViewAutoresizingFlexibleWidth. A UIImage is applied to this button's backgroundImage property. This UIimage is defined as follows:
[[UIImage imageNamed:#"buttonimage.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0]
buttonimage.png has a width of 400px (2x width of button, because of retina resolution) and represents a rounded rectangle. In portrait mode, everything is fine. As soon as the user rotates the device and the iPhone enters landscape mode, the UIButton is stretched. Due to this behaviour, the left rounded border of the image stays the same (stretchableImageWithLeftCapWidth:) but the right corners are also stretched. Is there any property I forgot to set that ensures only one specified pixel (e.g. the tenth one) is stretched and anything else retains it dimensions?
Thanks in advance!
Edit: If I use a smaller image, that is already stretched in portrait mode, both borders seem to be expanded.
Solved!
If your image is called "myImage.png" and it is the retina version, just call it "myImage#2x.png"
Is there any property I forgot to set
that ensures only one specified pixel
(e.g. the tenth one) is stretched and
anything else retains it dimensions?
Not really, but given the size of your images, you should re-read the leftCapWidth property.
The way stretchable images work is: you provide the left cap, the next pixel is stretched, and the right side of the image with width = (total width - left cap + 1) stays the same. Given that you are setting left cap to 10, and the original image is 400, you are telling iOS that the right non stretchable right side of your image is 400-10-1=389px. The same thing applies vertically. Check if you are using #2x images on a normal device without a #2x on its name, or if the 2x versions don't have exactly twice the pixels, or there is an uppercase/lowercase difference. You can find this out nslogging the size of the image loaded.
I don't know why the right side of your image is stretched. Given that you have height=0, the whole image can be stretched vertically if the button height changes, but it's unlikely that this causes a distortion of only the right side.
There is nothing wrong with your code as far as I can tell, that should be causing the right side of the image to be cropped. Below is the exact code I use, which I know works, to produce the same effect you're looking for.
UIButton *button=[[UIButton alloc] initWithFrame:CGRectMake(0, 0, 245, 51)];
button.autoresizingMask=UIViewAutoresizingFlexibleWidth;
[button setBackgroundImage:[[UIImage imageNamed:#"userbubble.png"] stretchableImageWithLeftCapWidth:40 topCapHeight:0] forState:UIControlStateNormal];
[self.view addSubview:button];
My guess is that the problem is coming from the png you're using, or possibly from the Compress PNG Files setting in your project. Also, since the image you are using is so big, try putting the left cap out further, say 40 or 50 pixels in.
I have a custom UIImageView class which I use to handle multi-touch events on the UIImageView. When the user touch begins, I want to increase the UIImageView's frame but keep the UIImage size fixed.
I tried changing the UIImageView's frame and then calling the drawInRect: method of UIImage to keep the UIImage's size fixed. But this is not working.
The contentMode for the UIImageView is set as ScaleAspectFit and as soon as I increase the frame size of the UIImageView, the UIImage size also increases (and is not affected by the drawInRect:)
Can someone please tell me how I can achieve this?
Thanks.
Adding more details
What I am trying to do is this
Place a UIImageView on the screen with the size same as the size of the image
When the user selects the image, anywhere he touches, the image edits as if the user is doing multi-touch with the image
If I increase the size of the imageview to detect touches any where, the image size also increases... Hope that makes things clearer!
Thanks
There may well be other ways to do it, but I think the UIImageView is doing what it's intended to do here.
What do you want the area of the view not covered by the image to look like? Be transparent? Have a solid colour?
Why do you want to do this? Is it to capture touch events from a wider area than that under the image itself?
If you have a good reason for needing to do this I would create a new view, probably just a plain UIView (with background set to transparent colour), and add the UIImageView to that. Make the plain view the one you resize.
I haven't specifically tried this, but I think it would work:
imageView.contentMode = UIViewContentModeCenter;
I have defined an UIImageView in my nib. After the app launches, I display an image in that UIImageView. Maybe I am on the wrong way, but what I want to do is the following:
The image which I load into the view is bigger than the view itself. I want that it is displayed in original size with hidden overlay. Then I want to slowly move that image inside that view in random directions.
Maybe you know html div containers with background images. there, you can set a position of that background image and change that position with JavaScript. I need something similar on iPhone.
Maybe an UIImageView is not the right thing for that? Or must I set the UIImageView to the full size of that image and then move the UIImageView around slowly? Could it be bigger than the iPhone's screen?
You need to crop the image. See Lounges' answer to this question.
This is the gist of my answer to pretty much the same question:
There isn't a simple class method to do this, but there is a function that you can use to get the desired results: CGImageCreateWithImageInRect(CGImageRef, CGRect) will help you out.
Here's a short example using it:
CGImageRef imageRef = CGImageCreateWithImageInRect([largeImage CGImage], cropRect);
[UIImageView setImage:[UIImage imageWithCGImage:imageRef]];
CGImageRelease(imageRef);