stretchableImageWithLeftCapWidth causes corners to be blurry - iphone

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.

Related

How to add corner radius to a button with a image? [duplicate]

I'm trying to make a UIImageView with round corners, so I used [imageView.layer setCornerRadius:5.0f]; it works but not perfectly.
If you look closely, you can see the corners of the image(I uploaded a photo, I don't know if you can see it clearly, there are blue parts in the corners). How should I remove these? thank you.
(P.S.: I also set the border of the view, is that the reason why?)
UIImageView doesn't clip to bounds by default. So while the corner radius is applied its still drawing outside of its designated area.
objc:
[imageView setClipsToBounds:YES];
swift:
imageView.clipsToBounds = true

After rotation border of image is getting fuzzy ios

While developing a photography based app i need to rotate an image. But after rotating an image it's border gets fuzzy. i have attached screen shot of this..
As you can see first image looks good but other images which are rotated are not looking good.
here is my code.....
[img setBackgroundColor:[UIColor blackColor]];
[img setContentMode:UIViewContentModeScaleAspectFit];
[img.layer setBorderColor:[[UIColor whiteColor]CGColor]];
[img.layer setBorderWidth:3.0];
[img setTransform:CGAffineTransformMakeRotation(rotation*3.14/180)];
I have used this solution...
CGContextRotateCTM(context, radians);
[sourceImage drawInRect:rect];
But how to work with this code when image has boarders.
Please give your valuable response .....
When you rotate an image the border pixels are not antialiased: See this question.
The solution, as odd as it sounds, is to give the image a 1px transparent border. This answer gives the code to add the 1px transparent border to your image.
Its because of aliasing effect. Search for "anti-aliasing".

ImageView contentMode to scale images properly?

I'm drawing a bunch of UIImageView (100x100) as menu items. Each has its own image, some are larger than 100x100, some smaller. By default, the imageViews with larger images are being scaled down in ratio to fit the 100x100 box nicely.
However, images smaller than 100x100 are being scaled up, which makes them really blurry. I'd like it so the smaller images simply remain the size they naturally are. Otherwise I'm happy with the way large images are scaling, just not the smaller images.
I haven't been able to achieve anything by switching to UIViewContentModeScaleAspectFit, UIViewContentModeScaleAspectFill, or UIViewContentModeScaleToFill.
Does anyone have ideas or hacks on how I could achieve this? I could use an if statement to check the image's dimensions and sent their contentMode (Center?), but that seems a bit hackish since I'm drawing each item from an NSDictionary with a for in loop. Any help appreciated. Thanks
If I understand correctly you can just check the image dimensions first before setting your frame, something like:
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageName:#"myimage.png"]];
[imageView sizeToFit];
CGRect newFrame = imageView.frame;
if (newFrame.size.width > 100) newFrame.size.width = 100;
imageView.frame = newFrame;
You'll need some extra logic to do similar things for the height. Is this what you mean?

UIImageView not showing the background View if the image has transparent regions

I have a UIView has some labels and buttons on it.
Next I also have a image which has a square area that is transparent, now
if I create a UIImageView and add this image which has transparent regions I am not able to see the background view (which has buttons and labels) through this transparent image.
If I play with the alpha value that doesn't work as intended which is to see the transparent regions exactly as it would have appeared on the UIView which has the labels and buttons.
UIImage* image = [UIImage imageNamed:#"TI1.jpg"];
UIImageView* imageView = [[UIImageView alloc] initWithImage:image];
[self.view addSubview:imageView];
Also I would be interested to know if there is other way to achieve what I am trying to achieve.
Basically I want to highlight a certain area of the view which has buttons/labels and make the rest of the area greyed out. My idea was to have this UIImageView with transparent regions in image to achieve that.
Thanks
Ankur
Try setting imageView.opaque = NO;
UIImageView inherits from UIView. According to that class's docs:
This property provides a hint to the drawing system as to how it
should treat the view. If set to YES, the drawing system treats the
view as fully opaque, which allows the drawing system to optimize some
drawing operations and improve performance. If set to NO, the drawing
system composites the view normally with other content. The default
value of this property is YES.
Also, not sure that JPG even supports transparency, so try exporting the image as a PNG to ensure you get the results you're looking for.

How do I resize a picture using UIImageView so that I can zoom in and out?

In my view I have a picture.. The picture has a 3:2 scale and is huge, resolution wise.
I'm having a lot of trouble initializing a UIImage with the image to the original size and then zooming out of the UIImageView so that the entire image is visible within the scrollview.
The program stays only in the portrait orientation.
And no, please don't say to just use UIWebView. UIWebView doesn't let me set the content size during view load...instead, it just zooms out of the image by some arbitrary scale and I couldn't figure out a way to adjust the scale value (I don't think it's possible).
Thanks for any responses! I really appreciate them :D
Here's an example of placing an image that responds to pinch-to-zoom. Basically, you place the UIImageView in a UIScrollView and change some settings.
UIImageView *myImage;
UIScrollView *myScroll;
-(void)viewDidLoad{
myImage = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,360,450)];
[myImage setImage:[UIImage imageNamed:#"coolpic.png"]];
myImage.contentMode = UIViewContentModeScaleAspectFit;
[myScroll addSubview:myImage];
[myScroll setContentSize:CGSizeMake(myImage.frame.size.width, myImage.frame.size.height)];
[myScroll setMinimumZoomScale:1.0];
[myScroll setMaximumZoomScale:4.0];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return myImage;
}
Of course, set all your delegates and IB hooks properly.
Edit: I just reread your question. The portion of the example that answers your question is the frame specification of the UIImageView and its contentMode setting.
You almost certainly don't want to load your 'huge, resolution wise' image all at once on load regardless of it's scale. I'd suggest checking out some of Apple's sample code on this stuff (starting with ScrollViewSuite would be good, I'd say).
There was also a recent video released from WWDC where they implement this sort of thing live (they have more of a photo viewing app, but you could pretty easily do what they show with just one image too) so take a look for that too.
Go to the attributes tab of the UIImageView. Select "aspect to fill" or "aspect to fit". If you use "aspect to fill", you might not show the whole image. I just use "aspect to fit", and make the background black.