New iOS app development Tutorial: New Features of iOS5 UIKit

Now with ios5, UIKit adds the appearance of many control elements.

Preparations before start

I have already created a simple application so that you can focus on learning how to customize the UI elements of UIKit.

After you open the project, first check the code and XIB file. You will find that the main view shows a list of surfing tours, while the detailed view gives us detailed information for each surfing tour at a constant speed.

After reading the basic code and XIB files, let's compile and run the project and see the following two views.

What we need to do now is to transform this completely standard interface into a customized interface with a unique style.

Add background image

In fact, we have put all the required resource images in Resources, so we only need to add code.

There is a bg_sand.png image in the imagesfolder. We plan to use it as the background image of the detailed view.

Open DetailViewController. m and create a viewDidLoad method as follows:

-(Void) viewDidLoad {
[SuperviewDidLoad];
[[Selfview] setBackgroundColor: [UIColorcolorWithPatternImage: [UIImageimageNamed: @ "bg_sand"];
 
}
Undoubtedly, this is the best way to set the background image. Although there is no backgroundImage attribute, we can also achieve this goal by using the backgroundColor attribute!

Compile and run the project and you can see the following interface:

Custom UINavigationBar

In the images folder, we will use the following two images to customize the navigation bar: surf_gradient_textured_32.pngand surf_gradident_textured_44.png.

We want to repeat these images from left to right in the navigation bar. Two different heights are used because the navigation bar is reduced when switched to Landscape mode.

To achieve the above effects, iOS provides two new APIs:

1. UINavigationbar you can now set the backgroundImage attribute

2. UIImage provides the new resizableImageWithCapInsets method to create images with adjustable sizes.

Of course, we can go to the Details View and use the above API to directly set the background image of the navigation bar. If you do this, you have to manually modify it in the List View or other view of the application.

Fortunately, iOS5 allows us to customize user interface elements at one time, so that "at the same level" interface elements can use similar customization.

In the SurfsUpAppDelegate. m file, add a new method in application: didfinishlaunchingwitexceptions: method as follows:

-(Void) mimizeappearance {
// Create resizable images to create an adjustable Image
UIImage * gradientImage44 = [[UIImageimageNamed: @ "surf_gradient_textured_44"]
ResizableImageWithCapInsets: UIEdgeInsetsMake (0, 0, 0, 0)];
UIImage * gradientImage32 = [[UIImageimageNamed: @ "surf_gradient_textured_32"] resizableImageWithCapInsets: UIEdgeInsetsMake (0, 0, 0, 0)];
// Set the background image for * all * UINavigationBars To set background images for all navigation bars
[[UINavigationBarappearance] setBackgroundImage: gradientImage44forBarMetrics: UIBarMetricsDefault];
[[UINavigationBarappearance] setBackgroundImage: gradientImage32forBarMetrics: UIBarMetricsLandscapePhone];
// Customize the title text for * all * UINavigationBars sets the title text for all navigation bars
[[UINavigationBarappearance] setTitleTextAttributes:
[NSDictionarydictionaryWithObjectsAndKeys:
[UIColorcolorWithRed: 255.0/255.0 green: 255.0/255.0 blue: 255.0/255.0 alpha: 1.0],
UITextAttributeTextColor,
[UIColorcolorWithRed: 0.0 green: 0.0 blue: 0.0 alpha: 0.8],
UITextAttributeTextShadowColor,
[NSValuevalueWithUIOffset: UIOffsetMake (0,-1)],
UITextAttributeTextShadowOffset,
[UIFontfontWithName: @ "Arial-Bold" size: 0.0],
UITextAttributeFont,
Nil];
}
In the above Code, the first two lines use the resizableImageWithCapInsets method to create a scalable image. Note that this method replaces the stretchableImageWithLeftCapWidth: topCapHeight: method used in earlier versions (Deleted ).

For cap insets, we only need to set the fixed area of the specified image at the top, left, right, and bottom. Here, we want to scale the entire image, so we set 0 for each end.

The following two lines of code use the appearance (appearance) proxy to set a scalable image as a background image and specify the measurement method of the navigation bar.

The last few lines of code specify the title style in the Detail View. We passed in the title text attribute dictionary. The available key values include:

UITextAttributeFont
UITextAttributeTextColor
UITextAttributeTextShadowColor
UITextAttributeTextShadowOffset
OK, it's almost done. You just need to add a line of code at the top of application: didfinishlaunchingwitexceptions: method:

[SelfcustomizeAppearance];
Compile and run the application and switch the orientation of the device. The following figure is displayed:

Custom UIBarButtonItem

Open imagesand find the button_textured_24.pngand button_textured_30.png files. We will use them to set the button appearance in the navigation bar.

Note that we need to set the button image to adjustable, because the width of the button depends on the text.

For these buttons, we do not need to scale the leftmost and rightmost 5 pixels, so we need to set left and right cap insets to 5.

Add the following code at the end of the customizeAppearance method:

// Customize the apperance for UIBarButtonItems
UIImage * button30 = [[UIImageimageNamed: @ "button_textured_30"] r
EsizableImageWithCapInsets: UIEdgeInsetsMake (0, 5, 0, 5)];
UIImage * button24 = [[UIImageimageNamed: @ "button_textured_24"] resizableImageWithCapInsets: UIEdgeInsetsMake (0, 5, 0, 5)];
[[UIBarButtonItemappearance] setBackgroundImage: button30forState: UIControlStateNormalbarMetrics: UIBarMetricsDefault];
[[UIBarButtonItemappearance] setBackgroundImage: button24forState: UIControlStateNormalbarMetrics: UIBarMetricsLandscapePhone];
[[UIBarButtonItemappearance] setTitleTextAttributes:
[NSDictionarydictionaryWithObjectsAndKeys:
[UIColorcolorWithRed: 220.0/255.0 green: 104.0/255.0 blue: 1.0/255.0 alpha: 1.0],
UITextAttributeTextColor,
[UIColorcolorWithRed: 1.0 green: 1.0 blue: 1.0 alpha: 1.0],
UITextAttributeTextShadowColor,
[NSValuevalueWithUIOffset: UIOffsetMake (0, 1)],
UITextAttributeTextShadowOffset,
[UIFontfontWithName: @ "AmericanTypewriter" size: 0.0],
UITextAttributeFont,
Nil]
ForState: UIControlStateNormal];
The above code is similar to the custom navigation bar. First, we created a scalable image for the button and set it as the background image. Then we specify the text format.

The "back" Button needs to be customized, because it needs to look different.

Let's add the following code at the end of the customizeApperance method to treat the back button specially:

// Customize the appeance for "back" on UIBarButtonItems
UIImage * buttonBack30 = [[UIImageimageNamed: @ "button_back_textured_30"]
ResizableImageWithCapInsets: UIEdgeInsetsMake (0, 13, 0, 5)];
UIImage * buttonBack24 = [[UIImageimageNamed: @ "button_back_textured_24"]
ResizableImageWithCapInsets: UIEdgeInsetsMake (0, 12, 0, 5)];
[[UIBarButtonItemappearance] setBackButtonBackgroundImage: buttonBack30forState:
UIControlStateNormalbarMetrics: UIBarMetricsDefault];
[[UIBarButtonItemappearance] setBackButtonBackgroundImage: buttonBack24forState:
UIControlStateNormalbarMetrics: UIBarMetricsLandscapePhone];
Note that we have set different cap inset values for the back button. At the same time, UIBarButtonItem also has a dedicated backButtonBackgroundImage attribute that can be used.

Compile and run. You can see:

Custom UITabBar

In iOS5, an API is provided to set the background image of UITabBar and indicate the selected image.

Add the following code at the bottom of the customizeAppearance method:

// Customize the apperance for UITabBar

UIImage * tabBackground = [[UIImageimageNamed: @ "tab_bg"]

ResizableImageWithCapInsets: UIEdgeInsetsMake (0, 0, 0, 0)];

[[UITabBarappearance] setBackgroundImage: tabBackground];

[[UITabBarappearance] setSelectionIndicatorImage:

[UIImageimageNamed: @ "tab_select_indicator"];

I don't want to explain the three lines of code.

Compile and run the project and you will see the following interface:

Custom UISlider

In iOS5, you only need to set the maximusTrackImage, minimumTrackImage, and thumbImage attributes to easily customize the sliding control.

Let's add the following code at the bottom of the customizeAppearance method:

// Customize the apperance for UISlider
UIImage * minImage = [[UIImageimageNamed: @ "slider_minimum"]
ResizableImageWithCapInsets: UIEdgeInsetsMake (0, 5, 0, 0)];
UIImage * maxImage = [[UIImageimageNamed: @ "slider_maximum"]
ResizableImageWithCapInsets: UIEdgeInsetsMake (0, 5, 0, 0)];
UIImage * thumbImage = [UIImageimageNamed: @ "thumb"];
[[UISliderappearance] setMaximumTrackImage: maxImageforState: UIControlStateNormal];
[[UISliderappearance] setMinimumTrackImage: minImageforState: UIControlStateNormal];
[[UISliderappearance] setThumbImage: thumbImageforState: UIControlStateNormal];
After compilation and running, you can see the customized UISlider slide!

Custom UISegmentedControl

Next, let's customize the segment control. This element is a little more complex. Because we need to use the selected and unselected backgrounds, as well as the different states of the adjacent regions (for example, the left and right sides are not selected; the left and right sides are not selected, and neither side is selected ).

Add the following code at the bottom of the customizeAppearance method:

// Customize the appearance for UISegmentedControl
UIImage * segmentSelected = [[UIImageimageNamed: @ "segcontrol_sel"]
ResizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)];
UIImage * segmentUnselected = [[UIImageimageNamed: @ "segcontrol_uns"]
ResizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)];
UIImage * segmentSelectedUnselected = [UIImageimageNamed: @ "segcontrol_sel-uns"];
UIImage * segUnselectedSelected = [UIImageimageNamed: @ "segcontrol_uns-sel"];
UIImage * segmentUnselectedUnselected = [UIImageimageNamed: @ "segcontrol_uns-uns"];
[[UISegmentedControlappearance] setBackgroundImage: segmentUnselectedforState:
UIControlStateNormalbarMetrics: UIBarMetricsDefault];
[[UISegmentedControlappearance] setBackgroundImage: segmentSelectedforState:
UIControlStateSelectedbarMetrics: UIBarMetricsDefault];
[[UISegmentedControlappearance] setDividerImage: segmentUnselectedUnselectedforLeftSegmentState:
UIControlStateNormalrightSegmentState: UIControlStateNormalbarMetrics: UIBarMetricsDefault];
[[UISegmentedControlappearance] setDividerImage: segmentSelectedUnselectedforLeftSegmentState:
UIControlStateSelectedrightSegmentState: UIControlStateNormalbarMetrics: UIBarMetricsDefault];
[[UISegmentedControlappearance] setDividerImage: segUnselectedSelectedforLeftSegmentState:
UIControlStateNormalrightSegmentState: UIControlStateSelectedbarMetrics: UIBarMetricsDefault];
Compile and run the project. You can see that UISegmentedControl is a new look!

Custom UISwitch

So far, we have not found a proper method to customize UISwitch, but it is easy to modify its tintColor attribute.

It is noted that in DetailViewController, an IBOutlet-Detail Switch Connection already exists to associate the switch with DetailView. xib.

You only need to add the following code to the viewDidLoad method of DetailViewController:

-(Void) viewDidLoad {
[SuperviewDidLoad];
[[Selfview] setBackgroundColor: [UIColorcolorWithPatternImage: [UIImageimageNamed: @ "bg_sand"];
[Gradient switchsetontintcolor: [UIColorcolorWithRed: 0 green: 175.0/255.0 blue: 176.0/255.0 alpha: 1.0];
}
Compile and run the project and you will see a new color for the switch!

Custom UILabel

Tags are an important part of the details view, but we will not use the appearance agent for customization.

Open DetailView. xib, select the first label (such as name) in the main view, select Attributes Inspector on the right panel, and perform the following settings:

Font: Custom

Family: American Typewriter

Style: Regular

Size: 16

Modify the remaining two tag attributes: "Experience Level" and "Rent a board"

Compile and run the project, and you will see that the label looks more eye-catching.

 

Custom UITextField

Now, our UITextField (text input box) has been set to use UITextBorderStyleLine. Let's set the font to American Typewriter, Size 12, Regular in Interface Builder.

Switch to Identity Inspector and you will see that the current type is CustomTextField.

Now we need to use drawRect: method. To provide a blue background, we need to override the drawRect method.

In Xcode, find the CustomTextField. m file we created for this purpose and use the following code to replace drawRect: method:

-(Void) drawRect :( CGRect) rect
{
// [SuperdrawRect: rect];
UIImage * textFieldBackground = [[UIImageimageNamed: @ "text_field_teal"]
ResizableImageWithCapInsets: UIEdgeInsetsMake (15, 5, 15, 5)];
[TextFieldBackgrounddrawInRect: [selfbounds];
}
Here we create another scalable image and draw it in the rectangle defined by the view boundary. Now you can compile and run the project.