How can I create a UIButton with a background image which is composed by:
A fixed left cap
A fixed right cap
A number of middle images placed one after the other to fill all the available space
like in the example below?
EDIT: I did not realize that in the center there are no N repeated images, but only a streched one. See the accepted answer.
As far as I know it cannot be done. What you can do is stretch an image, but you cannot add n middle images.
The code for adding a stretchable image in between is
//Create an image - Where UIEdgeInsets is in top left bottom right
UIImage* buttonImage = [[UIImage imageNamed:#"button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];
// Create a custom buttom
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
myButton.frame = CGRectMake(0, 0, 100, buttonImage.size.height);
[myButton setBackgroundImage:buttonImage forState:UIControlStateNormal];
[myButton setTitle:#"Button" forState:UIControlStateNormal];
//Add it to view - if it is a view controller self.view
[self addView:myButton];
From Apple's UIImage Class Reference:
"resizableImageWithCapInsets:
You use this method to add cap insets to an image or to change the existing cap insets of an image. [...] During scaling or resizing of the image, areas covered by a cap are not scaled or resized. Instead, the pixel area not covered by the cap in each direction is tiled, left-to-right and top-to-bottom, to resize the image." [emphasis added]
You can read more about it at http://mobiledevelopertips.com/user-interface/ios-5-uiimage-and-resizableimagewithcapinsets.html
Related
This is the first time I have ever designed an iOS app so I want to make sure I understand this behavior correctly.
I designed a custom bar button icon for a navigation bar in Photoshop. The final image that I saved in Photoshop was 102 x 45, and yes I realize that these dimensions are bigger than the recommended 44x44 in the iOS 7 design guidelines.
Anyways, I placed my image into the asset folder, and then programmatically set the bar button item with the following code:
UIImage* firstButtonImage = [UIImage imageNamed:#"loginbutton1"];
CGRect frame = CGRectMake(0, 0, 102, 45);
UIButton * someButton = [[UIButton alloc] initWithFrame:frame];
[someButton setBackgroundImage:firstButtonImage forState:UIControlStateNormal];
[someButton addTarget:self action:#selector(didTapLoginButton:)
forControlEvents:UIControlEventTouchUpInside];
self.rightBarButton = [[UIBarButtonItem alloc] initWithCustomView:someButton];
self.navItem.rightBarButtonItem = self.rightBarButton;
As you can see I set the frame's width and height to the exact size of the image. When I first ran the app, I didn't like the image and thought it was too big. So I changed the width and height parameters in this statement:
CGRect frame = CGRectMake(0, 0, 70, 30);
And now the image looks perfect on the iPhone screen. This is on an iPhone 4s.
So my main question is, what is actually happening when I change the frame size? Since the frame is now smaller than the actual image size, does the image just get scaled down automatically to fit inside the frame?
Yes the image get scaled because you are using backgroundImage (not Image). Both images have different behaviors.
Check the Xcode Interface Builder, you can see there, that you can set two images: Image and Background. Background is the UIImage that get scaled for the whole frame of the UIButton.
The UIButton Class Reference allows you to access the imageView of the image (not theimageView of the backgroundImage)
Because you have access to the imageView, you can change the mode of the image with:
[[someButton imageView] setContentMode:UIViewContentModeBottomLeft];
In UIView Class Reference you can check all the UIViewContentModes provided by Apple.
You can check that changing a little bit your code:
[someButton setImage:firstButtonImage forState:UIControlStateNormal];
[[someButton imageView] setContentMode:UIViewContentModeBottomRight];
I have a custom UIButton that has some text I am setting on it dynamically.
The problem:
If the text gets too large, it will cover up a white arrow that is on the button's image located on the far right here:
When that text gets too large, that white arrow is covered, which I need to avoid.
Example:
Current code:
[self.filterButton setTitle:#"All" forState:UIControlStateNormal];
self.filterButton.titleLabel.adjustsFontSizeToFitWidth = YES;
self.filterButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
self.filterButton.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
[self.filterButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
Some approaches I have tried:
Setting the titleText frame to be %0.85 of the buttons frame.
Current code
Tried to code it to where the frame cuts off at a certain point (of the titleText)
Thanks for any guidance
Have you tried setting the titleEdgeInsets rather than the contentEdgeInsets?
I want to build a UIButton out of 3 images (A,B,C). A and C are stretchable components (depending on the button text) the middle part is fixed.
What is the best way to attach these images to one another? How can I be flexible in the implementation without specifying all origins and widths and so on... Is it necessary to have a surrounding rectangle?
You need to stitch your images together in an image editor to create a single image. Then you'll load this image, and create a resizable version using the UIImage resizableImageWithCapInsets:resizingMode: method. You'll specify UIEdgeInsets that mirror the original widths of your two "end cap" images.
For the button itself you need to make this resizable image the background image of the button. It won't work as a foreground image.
UIImage* bgImage = [[UIImage imageNamed:#"my_bg_image"] resizableImageWithCapInsets: UIEdgeInsetsMake(0, 10, 0, 10)];
UIButton* b = [UIButton buttonWithType: UIButtonTypeCustom];
[b setBackgroundImage: bgImage forState: UIControlStateNormal];
I've had to implement something like this recently.
My strategy was to build what I wanted using UIView objects, and then write the created view to a UIImage.
I'd recommend:-create a container view-create UILabels for the button text, add to container view-for labels A and C, sizeToFit them after they have their text, and then use that information to place the stretchable buttons in the view-once the subviews are positioned, you'll probably want to reset the frame of your container view to make sure it is still correct.
once your view looks the way you want it, write it to an image using:
UIGraphicsBeginImageContextWithOptions(container.frame.size, NO, 0); //or YES if you have no opacity in your images
[container.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
-you can then set this as the image for your UIButton
The best way to do this is to put the 3 images into one file, and use resizableImageWithCapInsets:. See the doco here.
Here's a good tutorial on how to do this.
// Set the button background image
UIImage * buttonImage = [UIImage imageNamed:#"button_resizable.png"];
UIImage * resizableButtonImage = [buttonImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 12, 0, 12)];
[button setBackgroundImage:resizableButtonImage forState:UIControlStateNormal];
I have run into a strange issue. I have a UIButton with UIButtonTypeCustom.
For it's background image, I am using a transparent image. The issue is that the transparency on the actual image doesn't seem to be correct. The odd thing is that it is in fact transparent, because the background shows correctly behind the button.
Below is an example of what the button looks like (left) and what the button should look like (right). I took a screenshot and overlaid the image on the background in Photoshop, and the background shows correctly inside the image, while in the actual button on the left it does not. Noticeably, the glow is more intense on the left UIButton vs. the actual image when inserted onto the background.
Here's the image I am using to show that it does in fact have transparency:
Here's my code:
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.backgroundColor = [UIColor clearColor];
nextButton.frame = CGRectMake(0, 0, 30, 30);
[nextButton setBackgroundImage:[[UIImage imageNamed:#"ButtonBackground.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:5] forState:UIControlStateNormal];
forState:UIControlStateHighlighted];
[self addSubview:nextButton];
I have used the exact same image elsewhere to draw with and had no issue with transparency.
UPDATE: Adding other transparent images similarly increases the intensity of the alpha. While they're transparent, they seem darker and therefore less transparent. Again, works perfect elsewhere.
UPDATE 2: Even worse, I just created a new project with the exact same image dragged from the other project, created a button and had no issues with the button displaying correctly. How incredibly annoying!
You shouldn't have to set the background color for it to be transparent. Also, try removing the stretchable call on the image.
Also, you should be setting the image, not the background image.
If none of that helps, then Apple may just be improperly rendering your image. Try creating a CALayer and set its contents to your image and see if that works properly.
try this
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.frame = CGRectMake(0, 0, 30, 30);
nextButton.alpha=0.5f;
[nextButton setBackgroundColor:[UIColor clearColor]];
[nextButton setOpaque:NO];
[nextButton setBackgroundImage:[UIImage imageNamed:#"ButtonBackground.png"]
forState:UIControlStateNormal];
Behold:
//UIImageView* stretchTest = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.png"]];
//[self addSubview:stretchTest];
UIButton *stretchTest = [UIButton buttonWithType:UIButtonTypeCustom];
[stretchTest setFrame:CGRectMake(0, 0, 400, 100)];
[stretchTest setBackgroundImage:[UIImage imageNamed:#"image.png"] forState:UIControlStateNormal];
[self addSubview:stretchTest];
stretchTest.contentStretch = CGRectMake(0.5, 0.5, 0, 0);
stretchTest.contentMode = UIViewContentModeScaleToFill;
CGRect frame = stretchTest.frame;
frame.size.height = 300;
stretchTest.frame = frame;
Using the UIImageView (commented out above), the image stretches appropriately - rounded corners maintain the correct radius, because only the center pixel of the image gets stretched.
Using the UIButton, the image gets stretched incorrectly. The corner radii are not maintained and it gets ugly.
Both UIImageView and UIButton are subclasses of UIView. Why does the button resize differently than the imageView?
You're making assumptions about the way UIButton works. It's not implemented the same way as UIImageView. UIImageView is just a view, with no subviews, and its contents is the image. UIButton is different, and the way it works is a private implementation detail.
If you're trying to stretch an image appropriately on a button, you should use -[UIImage stretchableImageWithLeftCapWidth:topCapHeight:] to get a UIImage that knows how it should be stretched. If you want to stretch just the middle pixel, you can use something like
UIImage *image = [UIImage imageNamed:#"image.png"];
image = [image stretchableImageWithLeftCapWidth:floorf(image.size.width/2) topCapHeight:floorf(image.size.height/2)];
A UIButton has two types of images it can display -- a foreground image and a background image. The background image for a button is expected to replace the button's background texture. As such, it will stretch to fill the entire background. The button's foreground image is expected to be an icon that may or may not display alongside text; it will not stretch. It may shrink if the frame is smaller than the image, but it will not stretch.
A button's foreground and background image can be set in code like this:
// stretchy
[self setBackgroundImage:backgroundImage forState:UIControlStateNormal];
// not stretchy
[self setImage:forgroundImage forState:UIControlStateNormal];
By default, the backgroundImage of a button will use scaleToFill to stretch the image. If you need the image to stretch using cap insets though, you should set them on the image before assigning it to the backgroundImage, like this:
UIImage *image = [UIImage imageNamed:#"bg_image.png"];
/* This assumes your image will have a 1px column and 1px row of pixels
in the horizontal and vertical middle of the image that should be
stretchable. If that's not the case (such as asymetrical buttons)
you need to adjust the caps */
image = [image stretchableImageWithLeftCapWidth:floorf(image.size.width/2)
topCapHeight:floorf(image.size.height/2)];
[self setBackgroundImage:image forState:UIControlStateNormal];