I'm writing code to use a custom image as the background for a UIView.
The app runs in portrait only. Prior to the 4" retina screen, I used fixed size, hand-drawn png as the background image (card.png below). I had code like this:
UIView* frontView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
frontView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
UIImage* cardImage = [UIImage imageNamed:#"card.png"];
UIImageView* im = [[UIImageView alloc] initWithImage:cardImage];
im.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin;
[frontView addSubview:im];
// frontView has a bunch of stuff added...
As you'd expect, when I run this on an iPhone 5, everything can be dynamically sized and positioned, except for the hand drawn png, card.png. So that background image isn't using the full height that is available...
So what (I think) I want to do, is something like this...
UIImage* cardImage = [[UIImage imageNamed:#"card_resizable.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(72, 0, 60, 0)];
I've redrawn card.png as card_resizable.png - it's 140 pixels in height, there's an 8 pixel chunk in the middle, which I want to tile, so the top inset is 72 pixels tall and the bottom inset is 60 pixels tall.
What's the next step?
Should I create the UIImageView with the dynamic size of frontView?
How do I make the resizable image, resize?
The few things that I've tried... none of them have resulted in tiling the resizable image.
Cheers,
Gavin
Update:
I was incorrectly setting the pixel values for UIEdgeInsetsMake(72, 0, 60, 0)
These values are based on the #2x image. When changed to UIEdgeInsetsMake(36, 0, 30, 0) - I get the correct, vertical resizing.
As Mike pointed out, I needed to set the size of the UIImageView to the parent, and correctly set it's autoresizingMask:
im.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
I know have the UIImageView sized dynamically sized, correctly, to fill its parent view - frontView (I've given it a green background to check visually on both 3.5" screen and 4" screen.
The resizable image, cardImage, is also resizing, correctly, in the vertical plane.
Once you've passed the stretchable image to a UIImageView you just resize that image view to whatever height you need.
In your case, you probably want to make the image view fill its parent by doing this:
im.frame = frontView.bounds;
im.autoresizingMask =
UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[frontView addSubview:im];
We make im fill the frontView and tell it to automatically increase its width/height when its parent (frontView) changes size. This should do what you want.
Can you try with stretchableImage
UIImage *image = [UIImage imageNamed:#"card_resizable.png"];
UIImage* cardImage = [image stretchableImageWithLeftCapWidth:0.0f
topCapHeight:70.0f];
Take a look at UIView contentMode property. it should give you some sense about how the UIImageView render the image inside, whenever it change it's size.
Related
I have created a singup button as follows:
signupButton = [[UIButton alloc] initWithFrame:CGRectMake(10,(facebookLoginButton.bounds.size.height + 40),300,50)];
signupButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
UIImage *signupButtonImage = [[UIImage imageNamed:#"Signup"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
[signupButton setBackgroundImage:signupButtonImage forState:UIControlStateNormal];
The frame for the button is 300x50 per the above. I have created an image (for Retina devices) as 22(w)x100(h)px.
The image is 22 pixels which includes 10px rounded corners and 2px which are for the repeatable middle section.
I have tried to implement the stretch per the above code with insets as 0,10,0,10 but this does not stretch as expected.
Can someone explain what the insets should be? Also how to work these out, I cannot find any useful information on how to actually calculate what the insets should be? I have read the Apple documentation on this, but I do not understand how to work these out.
Your image has size 22x100 but it is a retina image.
That means the point size is 11x50.
The insets should be UIEdgeInsetsMake(5.0f, 5.0f, 5.0f, 5.0f)
Create stretchable Image using following code and assign it to respective UIImageView
UIImage *bgImage = [[UIImage imageNamed:#"Signup"] stretchableImageWithLeftCapWidth:10 topCapHeight:10];
you need to calculate TopCap and LeftCap of your 9 patch image properly.
Good luck.
I would like to obtain a UIView like this :
But i don't know, what is the best way to do this ?
Is this the best way: https://stackoverflow.com/a/9214570/1228634 ?
Create the shadow as a transparent layer at a particular size, also create a stretchable image, like this:
UIImage *shadowImage = [UIImage imageNamed:#"shadow.png"];
shadowImage = [shadowImage stretchableImageWithLeftCapWidth:floorf(shadowImage.size.width/2) topCapHeight:floorf(shadowImage.size.height/2)];
Put the image in a UIImageView with contentMode as scale to fit.
Call your view as "sView". You can add the shadow like this:
UIImageView *shadowImgView = [[UIImageView alloc] initWithImage:shadowImage];
shadowImgView.contentMode = UIViewContentModeScaleToFill;
shadowImgView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
shadowImgView.frame = sView.bounds;
[sView shadowImgView];
[shadowImgView release]; // only needed if you aren't using ARC
You can try to use several pictures (as it works for html), but I don't think it is better than your example:
you need 4 small pictures to make a texture for top, left, right and bottom border
you need 4 pictures for your View's corners;
draw to make a border from first 4 images using repeating;
draw corner images.
I would like to truncate one end of a UIImageView by changing the size of the frame dynamically. Of course, if it autoresizes it won't look 'truncated', but will look shrunk. The former is the effect I would like, the latter not.
So far I've set up the UIImageView in IB and then hooked it up programmatically using IBOutlet. I then placed this in ViewDidLoad, but still get the autoresizing:
[self.stringImageView setAutoresizingMask:UIViewAutoresizingNone];
self.stringImageView.frame = CGRectMake(9.0f, 508.0f, 500.0f, 26.0f);
Any ideas how I can clip my UIImageView instead of having it resize?
EDIT 1
It should also be noted that in IB I have deselected Clip Subviews and Autoresize Subviews.
Use : stringImageView.contentMode = UIViewContentModeCenter; so the image you add to the UIImageView always keeps the same size and the same position in your view.
You need to clip the UIImage object first according to imageview's frame and then set it as image for image view. See also Cropping an UIImage
#implementation UIImage (Resize)
// Returns a copy of this image that is cropped to the given bounds.
// The bounds will be adjusted using CGRectIntegral.
// This method ignores the image's imageOrientation setting.
- (UIImage *)croppedImage:(CGRect)bounds {
CGImageRef imageRef = CGImageCreateWithImageInRect([self CGImage], bounds);
UIImage *croppedImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
return croppedImage;
}
In Interface Builder set Mode in the View Tab to "Top" or whatever it should be.
Another more efficient way to go if you only wish to make part of the image visible,
or for example animate its appearance,
is to set the content mode of the UIImageView to UIViewContentModeCenter (or any other alignment) and include it in a UIScrollView.
You will only need to change the frame of the scroll view and your image will be visually cropped without you having to create the cropped image (which would be a very high price if it is for animation purpose).
What I wanted to achieve here is simply fit the image width to the screen on both orientations and use UIScrollView to just allow scroll vertically to see the whole image.
Both viewController and view are created pragmatically.
The image loaded is larger than screen on both width and height.
Here is the related code in my viewController:
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
- (void)loadView {
UIScreen *screen = [UIScreen mainScreen];
CGRect rect = [screen applicationFrame];
self.view = [[UIView alloc] initWithFrame:rect];
self.view.contentMode = UIViewContentModeScaleAspectFill;
self.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
UIImage *img=[[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:#"image" ofType:#"png"]];
UIImageView *imgView =[[UIImageView alloc] initWithImage:img];
[img release];
imgView.contentMode = UIViewContentModeScaleAspectFill;
imgView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:imgView];
[imgView release];
}
I tried all combinations for both contentMode above, did not give me correct result.
The most close I am getting now: I manually resize imgView in loadView, portrait mode would display correctly since app always starts with portrait mode, but in landscape mode, the width fits correctly, but image is centered vertically rather than top aligned.
If I add the imgView to a scrollView, in landscape mode it looks like contentSize is not set to full image size. but when I scroll bounce I can see the image is there in full size.
Questions:
why I need to resize it manually?
in landscape mode how and where I can 'move' the imgView, so imgView.frame.origin is (0,0) and works correctly with a scroll view?
Update
I added:
imgView.clipsToBounds = YES;
and find out in landscape mode the image bounds is smaller than screen in height.
So the question becomes how to have the image view keeps original ratio (thus shows the full image always) when rotated to landscape? Do I need to manually resize it after rotation again?
Instead of manually take care of orientation change and change view details. I plan to follow Apple document and make separate view controllers for each orientations.
see P42 # ViewControllerProgrammingGuide:
Creating an Alternate Landscape Interface
Here in the code you are not using any scrollView.
You need to add that imageView to ScrollView. and set the scrollView frame as same as the main view and contentSize to imageView or image Size.
If you are using scroll view in the app, then have you also resized the scroll view and the subviews as well, your code if fine just try to resize the subviews as well.
I use the following code to do so.
self.homescroll.autoresizingMask=UIViewAutoresizingFlexibleWidth |UIViewAutoresizingFlexibleHeight;// | UIViewAutoresizingFlexibleRightMargin |UIViewAutoresizingFlexibleLeftMargin;
self.homescroll.autoresizesSubviews=YES;
[self.homescroll setNeedsLayout];
[self.view addSubview:homescroll];
Just resize the subviews as well.
I'd like to show an image in an iPhone app, but the image I'm using is too big.
I'd like to scale it to fit the iPhone screen, I can't find any class to handle it.
UIImageView* view = [[UIImageView alloc] initWithImage: [UIImage imageNamed: #"your_image.png"]];
view.frame = CGRectMake(0, 0, width, height);
To get the frame of the iPhone screen you can use
CGRect frame = [[UIScreen mainScreen] bounds];
In Interface Builder, select your UIImageView. From the Tools menu, select "Attribute Inspector". In the Image View Attributes palette, select "Scale to Fill" from the Mode popup. That should scale your image to fit.
My ImageView was set in IB, and I would need to show multiple images, so set the image of imageView, instead of creating ImageView for individual image.
After I set the image view frame size, I am still see the same result, the image was too big, so that only part of the image was displayed on the screen.