I'm trying to make cell background stretch properly when in landscape mode. I' written this code:
UIImage* cellBackGroundImage = [UIImage imageNamed:#"button_listing_default.png"];
cellBackGroundImage = [cellBackGroundImage stretchableImageWithLeftCapWidth:290 topCapHeight:76];
deselectedBackground = [[UIImageView alloc] initWithImage:cellBackGroundImage] ;
[deselectedBackground setContentMode:UIViewContentModeScaleToFill];
cell.backgroundView = deselectedBackground;
The image size is 580x152. The cell size is 280x76.
But when I turn my device into landscape the rounded corners of my image is scaled but they shouldn't.
Portrait appearance: Portrait appearance http://xmages.net/storage/10/1/0/6/6/upload/456703d5.png
Landscape appearance: Landscape appearance http://xmages.net/storage/10/1/0/d/0/upload/a99fb3a8.png
The image itself: The image itself http://xmages.net/storage/10/1/0/6/6/upload/e1895d8e.png
Probably your cap values are wrong?
cellBackGroundImage = [cellBackGroundImage stretchableImageWithLeftCapWidth:290 topCapHeight:76];
Why are they so big? Do your rounded corners have such a big radius? If they are only like 10px, than use stretchableImageWithLeftCapWidth: 10 topCapHeight: 10. These values define, which portion of the image won't be scaled.
Could you perhaps show us your image?
I have found what had caused my problems. Actually it is the image itself. Stretching and auto-sizing works properly when image is smaller than the result, but if it should be wider and lower (as it was in my case) it doesn't.
So to solve my issue I, just, had to use smaller image.
Related
Currently I'm using a custom image for my UITableView Accessory View. I set the accessory view to an imageview with this custom image. If I use cell-arrow.png (15x15 px) it looks quite pixelated. However, if I use cell-arrow.png (100x100 px) and then re-size it in code [see below] then it looks much better. Why is this?
Follow up question:
It seems that it has been determined that using a 100x100px image and then sizing it down to a 15x15 looks better on a the device (specifically with retina, haven't fully tested it < 4.0). The follow up question is what maximum size I can set the image to so that it increases the resolution? For example, I tested a 1024x1024 version of the same exact cell-arrow.png image, and it look identical to when I re-sized the 100x100 px image.
*Code used to re-size image: *
CGRect myImageRect = CGRectMake(0.0f, 0.0f, 15.0f, 15.0f);
UIImageView *myImage = [[UIImageView alloc] initWithFrame:myImageRect];
[myImage setImage:[UIImage imageNamed:#"cell-arrow.png"]];
// cellArrowNotScaled ends up making the image look very pixelated
// UIImageView *cellArrowNotScaled = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"cell-arrow15.png"]];
cell.accessoryView = myImage; //cellArrowNotScaled;
In general, you should use an image that is exactly the size that it will be used on screen. Otherwise, you are leaving your image scaling up to the software, and you may end up with misaligned pixels and sharp lines turning fuzzy. Remember that as of iOS 4, all measurements in UIKit are in UIKit points, where on a Retina display 1pt = 2px, and on non-Retina, 1pt = 1px.
So, for your 15pt × 15pt image view, you will need two image files if you intend to target both Retina and non-Retina devices:
cell-arrow.png, a 15px × 15px image
cell-arrow#2x.png, a 30px × 30px image
Then you call [UIImage imageNamed:#"cell-arrow"] (note the lack of an extension - UIKit figures it out for you), and the OS will load the 1x or 2x version as appropriate.
I have a box that i want to be expanable only on its width, while still maintaining the rounded corners that I have. I made the graphic in photoshop. and it is exactly 13px wide, so 6 for each corner and 1 for the middle to repeat.
UIImage* img = [[UIImage imageNamed:#"screen_displayer_rounded.png"] stretchableImageWithLeftCapWidth:6 topCapHeight:6];
CGRect rect = CGRectMake(272.0f, 14.0f, 100.0f, 30.0f);
UIImageView* imgView = [[UIImageView alloc] initWithFrame:rect];
[imgView setImage:img];
Could anyone tell me why this might be happening?
Thanks!
I have found that you cant just rely stretchableImageWithLeftCapWidth to get it to resize correctly.
I normally use the contentStretch property that is available to all UIView subclasses when stretchableImageWithLeftCapWidth doesnt work for me.
Checkout the UIView apple docs regarding the contentStretch property.
You should check if the view doesn't end up at a non-integer position. If you choose "Run with performance tool > Core Animation" and check "Color misaligned images", all misaligned images will show purple.
If your image is purple, try to find out which superview is causing this. Look out for things being centered, since that is a common cause for these issues.
Just checking - are you perhaps viewing a non-retina image on a retina display? This would definitely stretch it out.
I have set up my own custom tableViewCell and want to the background to be the same
black gradient as my navigationBar with style UIBarStyleBlackOpaque.
what would be the best way to do that ?
Use the key combination CMD-SHIFT-4 to capture a 1 pixel wide image of the navigation bar's gradient. The image will be saved on your desktop (you can use Preview to crop, etc.). Add the image to your project. In -tableView:cellForRowAtIndexPath:, use:
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"blackGradient.png"]];
UIKit automatically stretches the gradient horizontally to fit the width of the cell.
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 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.