Thursday, July 29, 2010

Improving your UI and all the control options



Apple has provided a great app called UICatalog that is a demo of all the different controls. This is a standard XCode project you can use to not only see the various controls but also see the code that customizes many of these controls. You can find UICatalog here.

You are also allowed to use what you find in the images folder of this project for your own applications.









I took the blue and white buttons and created a simple project and used the button images they provided.

I am using whiteButton.png and blueButton.png which look like this:

whiteButton.png

blueButton.png


Here is the before (the second button has white text):
Here is the after:

You can also use this for the normal and pressed button states using the same techniques.

Here is the code (IBOutlets for button1 and button2) from the ViewController.

- (void)viewDidLoad {

UIImage *buttonImageNormal = [UIImage imageNamed:@"whiteButton.png"];

UIImage *strechableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];

[button1 setBackgroundImage:strechableButtonImageNormal forState:UIControlStateNormal];

buttonImageNormal = [UIImage imageNamed:@"blueButton.png"];

strechableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];

[button2 setBackgroundImage:strechableButtonImageNormal forState:UIControlStateNormal];

[super viewDidLoad];

}






No comments:

Post a Comment