Before iOS 5, the appearance of custom native controls didn't have native support, so developers felt a lot of trouble. The problem that developers often face is to modify the appearance of all instances of a control. The correct way to solve this problem is to rewrite the control again. But because this is very time consuming, some developers begin to overwrite or mix some methods, such as drawRect:
.
Starting with iOS 5, Apple UIAppearance
UIAppearanceContainer
has standardized support for many Uikit controls with two protocols (and). All UIAppearance
UI controls that follow the protocol can render a variety of skins by customizing them. Furthermore, the UIAppearance
protocol allows developers to specify different skins based on the area the control belongs to. That is, when a control is included in a particular view, you can specify its appearance ( UIBarButtonItem
for example tintColor
). You can also get the appearance proxy object for the control class, which is implemented by customizing the appearance of that proxy, and here's an example.
To customize the color of all the bar buttons in your app, you can set them in UIBarButtonItem
the appearance agent tintColor
:
[[UIBarButtonItem appearance] setTintColor:[UIColor redColor]];
Note that IOS 4 is in the middle of the setTintColor
process UIBarButtonItem
, but it will only work on a particular control instance, not all of these controls. With the appearance of proxy objects, we can customize the appearance of any object created with the above class.
Similarly, you can customize the appearance of the control in the following ways, based on the internal included views:
[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setTintColor:[UIColor redColor]];
The first parameter is a nil
list of all the container classes that end with, including UINavigatorBar
, and UIPopOverController
so on, classes that follow the UIAppearanceContainer
protocol.
Starting with iOS 5, most UI elements have added support for the UIAppearance
protocol. In addition, similar controls in IOS 5 UISwitch
allow us to easily turn the on switch color into a designer-selected color. Now, how do you determine which cases are able to customize all the elements (and which attributes in the element) through the Uikit appearance proxy? There are two ways of doing this. The old way is to consult a document, and the other is to use shortcuts for most developers: Read header files. Opens the header file for the corresponding Uikit element, where all UI_APPEARANCE_SELECTOR
tagged attributes are supported for customization through the skin proxy. For example, the attributes in UINavigationBar.h are tintColor
UI_APPEARANCE_SELECTOR
marked with:
@property(nonatomic,retain) UIColor *tintColor UI_APPEARANCE_SELECTOR;
means that you can call the
[[UINavigationBar appearance] setTintColor:newColor];
Although Apple opposed the use of UI customizations (on Mac and iOS platforms) at first, the situation slowly changed. Apple's own native applications, such as the new reminder application, also have a deeply customized, realistic user interface. With the UIAppearance
protocol, there is much less code to achieve the same effect.
IOS5 and later provide a more powerful tool uiappearance, we set some UI by uiappearance the global effect, so that it is easy to implement UI customization and the simplest to achieve a unified interface style, it provides the following two methods.
+ (ID) appearance
This method is the unification of all changes, such as you set Uinavbar Tintcolor, you can write: [[Uinavigationbar appearance] settintcolor:mycolor];
+ (ID) Appearancewhencontainedin: (Class <>) Containerclass,...
This method sets the change of a class: for example, to set the effect of Uibarbuttonitem in Uinavigationbar, Uipopovercontroller, and Uitabbar. You can write it like this.
[[Uibarbuttonitem Appearancewhencontainedin:[uinavigationbar class], [Uipopovercontroller Class],[UITabbar class] NIL] settintcolor:mypopovernavbarcolor];
Please note that using appearance to set the UI effect is best to use global settings, which are set before all interfaces are initialized, or may fail.
The specific UI appearance is modified as follows:
1. Modify the navigation bar background
The code is as follows:
Uinavigationbar * appearance = [Uinavigationbar appearance];
UIImage *navbackgroundimg =[uiimage imagenamed:@ "Navbg.png"];
[Appearance SetBackgroundImage:navBackgroundImgforBarMetrics:UIBarMetricsDefault];
2. tab bar (Uitabbar)
The code is as follows:
Uitabbar *appearance = [Uitabbar appearance];
Set a background picture
[Appearance setbackgroundimage:[uiimage imagenamed:@ "Tabbar_bg.png"];
Gate Select item Background image
UIImage * selectionindicatorimage =[[uiimageimagenamed:@ "Tabbar_slider"]resizableimagewithcapinsets: Uiedgeinsetsmake (4, 0, 0,0)];
[Appearance setselectionindicatorimage:selectionindicatorimage];
3. Segmented control (Uisegmentcontrol)
The code is as follows:
Uisegmentedcontrol *appearance = [Uisegmentedcontrol appearance];
Segmenteg Normal Background
[Appearance setbackgroundimage:[uiimage imagenamed:@ "Segmente.png"]
Forstate:uicontrolstatenormal
Barmetrics:uibarmetricsdefault];
Segmente Selected background
[Appearance setbackgroundimage:[uiimage imagenamed:@ "Segmente_a.png"]
forstate:uicontrolstateselected
Barmetrics:uibarmetricsdefault];
Split line when Segmente is left unchecked
Barmetrics represents the status of navigation bar, Uibarmetricsdefault represents portrait status (44pixel height), uibarmetricslandscapephone Represents the landscape status (32pixel height)
[Appearance setdividerimage:[uiimage imagenamed:@ "Segmente_line.png"]
Forleftsegmentstate:uicontrolstatenormal
Rightsegmentstate:uicontrolstatenormal
Barmetrics:uibarmetricsdefault];
[Appearance setdividerimage:[uiimage imagenamed:@ "Segmente_line.png"]
forleftsegmentstate:uicontrolstateselected
Rightsegmentstate:uicontrolstatenormal
Barmetrics:uibarmetricsdefault];
[Appearance setdividerimage:[uiimage imagenamed:@ "Segmente_line.png"]
Forleftsegmentstate:uicontrolstatenormal
rightsegmentstate:uicontrolstateselected
Barmetrics:uibarmetricsdefault];
Font
Nsdictionary *textattributes1 = @{uitextattributefont: [Uifont systemfontofsize:18],
Uitextattributetextcolor: [Uicolor Bluecolor],
Uitextattributetextshadowcolor: [Uicolor Whitecolor],
Uitextattributetextshadowoffset: [Nsvaluevaluewithcgsize:cgsizemake (1, 1)]};
[Appearance settitletextattributes:textattributes1 forstate:1];
Nsdictionary *textattributes2 = @{uitextattributefont: [Uifont systemfontofsize:18],
Uitextattributetextcolor: [Uicolor Whitecolor],
Uitextattributetextshadowcolor: [Uicolor Blackcolor],
Uitextattributetextshadowoffset: [Nsvaluevaluewithcgsize:cgsizemake (1, 1)]};
[Appearance settitletextattributes:textattributes2 forstate:0];
4.UIBarbutton
Note: The Uibarbutton has Leftbarbutton,rightbarbutton and Backbarbutton, where the Backbarbutton, with the arrows, need to be set separately.
Barbutton background setting is ios6.0 and later, and Backbutton is ios5.0 and later, here to pay attention!
The code is as follows:
Modify the Uibarbuttonitem on the navigation bar
Uibarbuttonitem *appearance = [Uibarbuttonitem Appearancewhencontainedin:[uinavigationbar class], nil];
Set the font for the navigation bar including Backbarbutton and Leftbarbutton,rightbarbutton
Nsdictionary *textattributes = @{uitextattributefont: [Uifont systemfontofsize:18],
Uitextattributetextcolor: [Uicolorbluecolor],
Uitextattributetextshadowcolor: [Uicolorwhitecolor],
Uitextattributetextshadowoffset: [Nsvaluevaluewithcgsize:cgsizemake (1, 1)]};
[Appearance settitletextattributes:textattributes forstate:1];//forstate is 0 when the normal state, 1 is the click state.
Modify Leftbarbutton,rightbarbutton Background effect
[Appearance setbackgroundimage:[uiimage imagenamed:@ "Navbarbutton.png"]
Forstate:uicontrolstatenormal
Style:uibarbuttonitemstylebordered
Barmetrics:uibarmetricsdefault];
[Appearance setbackgroundimage:[uiimage imagenamed:@ "Navbarbutton_a.png"]
forstate:uicontrolstatehighlighted
Style:uibarbuttonitemstylebordered
Barmetrics:uibarmetricsdefault];
Backbarbutton need to set the background effect separately. Can only be used after ios6.0.
[Appearance setbackbuttonbackgroundimage:[uiimage imagenamed:@ "Nav_bg.png"]
forstate:0
Barmetrics:uibarmetricsdefault];
[Appearance setbackbuttonbackgroundimage:[uiimage imagenamed:@ "Work.png"]
Forstate:1
Barmetrics:uibarmetricsdefault];
[Appearance Setbackbuttontitlepositionadjustment:uioffsetmake (2,-1)
Forbarmetrics:uibarmetricsdefault];
5. Toolbars (Uitoolbar)
Uitoolbar *appearance = [Uitoolbar appearance];
Style and background Two choose one and see what you need.
Style (black translucent, opaque, etc.) settings
[Appearance setbarstyle:uibarstyleblacktranslucent];
Background settings
[Appearance setbackgroundimage:[uiimage imagenamed:@ "Toolbarbg.png"]
Fortoolbarposition:uitoolbarpositionany
Barmetrics:uibarmetricsdefault];
[Turn]ios uiappearance use detailed