盡管iOS原生的UI控件就已經有很不錯的顯示效果，但是App開發者仍然希望自己的產品與眾不同，所以自定義UI外觀成了每個App產品開發必做之事。今天就來做一個在iOS6下實現自定義UI的demo，內容及Demo來源于國外iOS博客 raywenderlich ，先看看美化前后效果差別（左邊為美化前，右邊為美化后）：
整個Demo里面幾乎包含所有iOS下的UI控件，以下我只對關鍵代碼給出說明，詳情大家可以下載附上的Demo源碼查看。好了，首先在AppDelegate.m中新建了一個方法customizeApperance(),所有的美化效果都在這個方法里完成，并且在application:didFinishLauchingWithOptions:里面調用這個方法。
1.自定義導航欄
//豎屏
UIImage *image44 = [[UIImage imageNamed:@"surf_gradient_textured_44"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UINavigationBar appearance] setBackgroundImage:image44 forBarMetrics:UIBarMetricsDefault];
//橫屏
UIImage *gradientImage32 = [[UIImage imageNamed:@"surf_gradient_textured_32"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UINavigationBar appearance] setBackgroundImage:gradientImage32
forBarMetrics:UIBarMetricsLandscapePhone];
其中resizableImageWithCapInsets方法是iOS5以后才有的，目的是用來指定圖片拉伸區域，其參數Insets制定可被拉伸的圖片區域，UIEdgetInsetsMake有四個參數，按順序分別標示top、left、bottom、right，指定的數字分別表示框起來的矩形框離圖片邊界的距離，只有矩形框內的區域才會被拉伸，如下圖所示：
圖片只會被拉伸紅色矩形區域，假如紅框左右距離圖片邊距分別為25，距離上下邊距為0，則Insets的寫法就是這樣： UIEdgetInsetsMake(0,25,0,25)，如果要使整張圖片拉伸，則四個參數全部傳0即可。代碼中分別指定了橫屏和豎屏下的兩種方式。
同時，可以指定導航欄底部的陰影圖片、顏色和UIBarButtonItem的樣式等：
- 導航欄陰影
[[UINavigationBar appearance] setShadowImage:[UIImage imageNamed:@"navBarShadow"]];
- 導航欄按鈕樣式
UIImage *button30 = [[UIImage imageNamed:@"button_textured_30"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[[UIBarButtonItem appearance] setBackgroundImage:button30 forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
- 導航欄返回按鈕樣式
UIImage *buttonBack30 = [[UIImage imageNamed:@"button_back_textured_30"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 5)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonBack30
forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
效果如下：
2.設置底部Tab欄的樣式（背景、選中、默認）
UIImage *tabBackground = [[UIImage imageNamed:@"tab_bg"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UITabBar appearance] setBackgroundImage:tabBackground];
[[UITabBar appearance] setSelectionIndicatorImage:
[UIImage imageNamed:@"tab_select_indicator"]];
效果如下：
3.自定義UISwitch
//指定開關兩種狀態下背景顏色和滑動桿顏色
[[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]];
//指定開關兩種狀態下背景圖片（YES、NO）
[[UISwitch appearance] setOnImage:[UIImage imageNamed:@"yesSwitch"]];
[[UISwitch appearance] setOffImage:[UIImage imageNamed:@"noSwitch"]];
效果如下：
4.自定義UIPageControl
//選中狀態顏色
[[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]];
這里簡要說明了幾種控件的自定義效果，查看其他控件自定義效果，大家可以下載Demo仔細查看并根據自己的需要進行定制
Demo源碼下載: 代碼
加入我們的或微信公眾賬號請查看：
Ryan's zone公眾賬號及
同時歡迎關注我的新浪微博和我交流：
@唐韌_Ryan
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
