IOS study note 43 -- display of custom UI controls in ios6

Although the IOS native UI control has a very good display effect, but app developers still want their own products to be different, so custom UI appearance has become a must for every app product development. Today, we will create a demo to implement custom UI under ios6. The content and demo come from raywenderlich, a foreign IOS blog. Let's first look at the differences in the effects before and after beautification (before beautification on the left and after beautification on the right):

The entire demo contains almost all ios ui controls. Below I will only describe the key code. For details, you can download the attached demo source code. Now, a customizeapperance () method is created in appdelegate. M. All the beautification effects are completed in this method, and this method is called in application: didfinishlauchingwithoptions.

1. Custom navigation bar

// Portrait uiimage * image44 = [[uiimage imagenamed: @ "photo"] Progress: uiedgeinsetsmake (0, 0, 0, 0)]; [[uinavigationbar appearance] setbackgroundimage: image44 forbarmetrics: uibarmetricsdefault]; // landscape uiimage * gradientimage32 = [[uiimage imagenamed: @ "inline"] representation: uiedgeinsetsmake (0, 0, 0, 0)]; [[uinavigationbar appearance] setbackgroundimage: gradientimage32 forbarmetrics: uibarmetricslandscapephone];

The resizableimagewithcapinsets method is available only after ios5. It is used to specify the image stretch area. The insets parameter specifies the image area to be stretched. uiedgetinsetsmake has four parameters, top, left, bottom, and right are marked in sequence. The specified numbers indicate the distance between the Rectangular Box and the image boundary. Only the area in the rectangle is stretched, as shown in:

The image will only be stretched to the red rectangle. If the left and right sides of the red box are 25 margins and the top and bottom margins are 0, The insets are written as follows: uiedgetinsetsmake ), if you want to stretch the entire image, pass all four parameters to 0. The Code specifies two methods for horizontal screen and vertical screen respectively.

You can also specify the shadow image, color, and uibarbuttonitem style at the bottom of the navigation bar:

• Navigation bar shadow

[[UINavigationBar appearance] setShadowImage:[UIImage imageNamed:@"navBarShadow"]];

• Button style in the navigation bar

UIImage *button30 = [[UIImage imageNamed:@"button_textured_30"]                         resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];    [[UIBarButtonItem appearance] setBackgroundImage:button30 forState:UIControlStateNormal                                          barMetrics:UIBarMetricsDefault];

• Button style returned from the navigation bar

UIImage *buttonBack30 = [[UIImage imageNamed:@"button_back_textured_30"]                             resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 5)];    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonBack30                                                      forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

The effect is as follows:

2. Set the style of the tab bar at the bottom (background, selected, default)

UIImage *tabBackground = [[UIImage imageNamed:@"tab_bg"]                              resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];    [[UITabBar appearance] setBackgroundImage:tabBackground];    [[UITabBar appearance] setSelectionIndicatorImage:     [UIImage imageNamed:@"tab_select_indicator"]];

The effect is as follows:

3. Custom uiswitch

// Specify the background color and slider color in the two statuses: [[uiswitch appearance] setontintcolor: [uicolor colorwithred: 0 Green: 175.0/255.0 Blue: 176.0/255.0 ALPHA: 1.0]; [[uiswitch appearance] settintcolor: [uicolor colorwithred: 1.000 Green: 0.989 Blue: 0.753 ALPHA: 1.000]; [[uiswitch appearance] setthumbtintcolor: [uicolor yellowcolor]; // specifies the background image (yes, no) in two States: [uiswitch appearance] setonimage: [uiimage imagenamed: @ "yesswitch"]; [[uiswitch appearance] setoffimage: [uiimage imagenamed: @ "noswitch"];

The effect is as follows:

4. Custom uipagecontrol

// Color of the selected status [[uipagecontrol appearance] setcurrentpageindicatortintcolor: [uicolor colorwithred: 0 Green: 175.0/255.0 Blue: 176.0/255.0 ALPHA: 1.0]; // unselected status color [[uipagecontrol appearance] setpageindicatortintcolor: [uicolor colorwithred: 0.996 Green: 0.788 Blue: 0.180 ALPHA: 1.000];

The effect is as follows:

This section briefly describes the custom effects of several controls. To view the custom effects of other controls, you can download the demo and view it carefully and customize it as needed.

Download demo source code: Code

To join our QQ group or public account, see: Ryan's
Zone public account and QQ Group

At the same time, you are welcome to follow my Sina Weibo chat with me: @ Tang Ren _ Ryan