Wednesday, August 7, 2013

How to Make Custom Buttons without making different sizes of background images.


In this post I’m going to tell you a very easy way to create custom buttons throughout your project. Hereafter you don’t have to apply different sizes of images to different sizes of buttons. You need two background images, one is for the normal state of the button and other is to highlight state of the button. Now I’m going to tell you step by step how to do it. You can use this Photoshop plugin to make your iPhone Images. 



You can download the sample code from here.

1.Create a background image for the normal state with the size 36x36 for your button in .png format for the previous versions of iPhones and create the same image with the size 72x72 for the new iPhone 5. 

2.Create a background image for the highlightstate with the size 36x36 for your button in .png format for the previous versions of iPhones and create the same image with the size 72x72 for the new iPhone 5. 

3.Add those images to your project.

4.In the code sample I have written a base control, which can be inherited by all the UIView Controllers in your project. So you can just call a method in the base controller, which will apply the background image to your buttons.


-(void)setActionButtonStyle:(UIButton *)uiButton
{
UIImage *buttonImage = [[UIImage imageNamed:@"Button.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(18, 18, 18, 18)];
UIImage *buttonImageHighlight = [[UIImage imageNamed:@"ButtonHighlight.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(18, 18, 18, 18)];
// Set the background for any states you plan to use
[uiButton setBackgroundImage:buttonImage forState:UIControlStateNormal];
[uiButton setBackgroundImage:buttonImageHighlight forState:UIControlStateHighlighted];
}

5. Now you can call this method setActionButtonStyle to apply the background image to your buttons anywhere in your code. 



- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
[self setActionButtonStyle:self.smallButton];
[self setActionButtonStyle:self.mediumButton];
[self setActionButtonStyle:self.largButton];
[self setActionButtonStyle:self.smallFatButton];
[self setActionButtonStyle:self.largeFatButton];
}
view raw button.c hosted with ❤ by GitHub

No comments:

Post a Comment