User Interface Customization in iOS 6

Customizing UILabel

The labels are one part of the detail view you won’t customize via the appearance proxy. Open DetailView.xib so that you can edit them in Interface Builder. Start by selecting the first label (i.e., “Your name”) in the main view, the in the Utilities view (i.e., the right pane), select the Attributes Inspector and set the following:

• Font: Custom
• Family: American Typewriter
• Style: Regular
• Size: 16

Repeat this for the four remaining labels: “Experience Level”, “Rent a board?”, “How many?”, and “Order Status”.

Compile and run, and now your labels have a neat typewriter feel!

Customizing UITextField

Our UITextField has already been set to use UITextBorderStyleLine. Since we’re still in Interface Builder, let’s set the font to American Typewriter, Size 12, Regular. Now if you look at the Identity Inspector, you’ll see that the Custom Class has been defined as something other than UITextField – CustomTextField. If you look in the Navigator pane on the left, there is a group called Custom Views. Expand that, and you will see that you have a type called exactly that.

Right now the drawRect: method of your UITextField delegates to the superclass implementation. But in order to paint the teal background, you are going to override drawRect: as another customization technique.

Replace the implementation of drawRect in CustomTextField.m with the following code:

- (void)drawRect:(CGRect)rect
{
    UIImage *textFieldBackground = [[UIImage imageNamed:@"text_field_teal.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15.0, 5.0, 15.0, 5.0)];
    [textFieldBackground drawInRect:[self bounds]];
}

Here you create yet another stretchable image with appropriate insets, and draw it in the rectangle defined by the bounds of this view (i.e., your UITextField). Let’s Build & Run…

Customizing UIStepper

 With iOS 5 you gained the ability to change the tint color of the stepper and now in iOS 6 you can change the individual icons in the sides and middle of the control. Let’s see how you can do this now. Add the following code to the end of your customizeAppearance method in SurfsUpAppDelegate.m:

[[UIStepper appearance] setTintColor:[UIColor colorWithRed:0 green:175.0/255.0 blue:176.0/255.0 alpha:1.0]];
[[UIStepper appearance] setIncrementImage:[UIImage imageNamed:@"up"] forState:UIControlStateNormal];
[[UIStepper appearance] setDecrementImage:[UIImage imageNamed:@"down"] forState:UIControlStateNormal];

Build & Run, and enjoy your stylish stepper!

Customizing UIProgressView

The UIProgressView is a pretty simple control to customize, just a track tint and a completed tint. Add the following code to the end of your customizeAppearance method:

[[UIProgressView appearance] setProgressTintColor:[UIColor colorWithRed:0 green:175.0/255.0 blue:176.0/255.0 alpha:1.0]];
[[UIProgressView appearance] setTrackTintColor:[UIColor colorWithRed:0.996 green:0.788 blue:0.180 alpha:1.000]];

Give it another build and run and see your lovely progress bar

Customizing UIPageControl

UIPageControl is the last control we’re going to customize. You can customize the page indicators as well as a separate color for the current page, both properties are new to iOS 6. Add the following code to the end of your customizeAppearance method:

[[UIPageControl appearance] setCurrentPageIndicatorTintColor:[UIColor colorWithRed:0 green:175.0/255.0 blue:176.0/255.0 alpha:1.0]];
[[UIPageControl appearance] setPageIndicatorTintColor:[UIColor colorWithRed:0.996 green:0.788 blue:0.180 alpha:1.000]];

Build & Run… ahh, how beautiful!

Congratulations – the detail view is complete, and you’ve learned a ton about customizing the looks of your apps!

Where To Go From Here?

Here is a sample project with all of the code from the above tutorial.

If you want to learn more about UIKit customization, check out our new books iOS 5 and iOS 6 by Tutorials! These books include 3 chapters on User Interface Customization in iOS 5 and iOS 6!

If you have any comments or questions about this tutorial or UIKit customization in iOS 5 and 6, please join the forum discussion below!

This is a blog post by iOS Tutorial Team members Steve Baranski and Adam Burkepile.