盡管iOS原生的UI控件就已經(jīng)有很不錯(cuò)的顯示效果，但是App開發(fā)者仍然希望自己的產(chǎn)品與眾不同，所以自定義UI外觀成了每個(gè)App產(chǎn)品開發(fā)必做之事。今天就來做一個(gè)在iOS6下實(shí)現(xiàn)自定義UI的demo，內(nèi)容及Demo來源于國外iOS博客 raywenderlich ，先看看美化前后效果差別（左邊為美化前，右邊為美化后）：

整個(gè)Demo里面幾乎包含所有iOS下的UI控件，以下我只對關(guān)鍵代碼給出說明，詳情大家可以下載附上的Demo源碼查看。好了，首先在AppDelegate.m中新建了一個(gè)方法customizeApperance(),所有的美化效果都在這個(gè)方法里完成，并且在application:didFinishLauchingWithOptions:里面調(diào)用這個(gè)方法。

1.自定義導(dǎo)航欄

    //豎屏
    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];
  

圖片只會被拉伸紅色矩形區(qū)域，假如紅框左右距離圖片邊距分別為25，距離上下邊距為0，則Insets的寫法就是這樣： UIEdgetInsetsMake(0,25,0,25)，如果要使整張圖片拉伸，則四個(gè)參數(shù)全部傳0即可。代碼中分別指定了橫屏和豎屏下的兩種方式。

同時(shí)，可以指定導(dǎo)航欄底部的陰影圖片、顏色和UIBarButtonItem的樣式等：

• 導(dǎo)航欄陰影

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

• 導(dǎo)航欄按鈕樣式

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

• 導(dǎo)航欄返回按鈕樣式

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

2.設(shè)置底部Tab欄的樣式（背景、選中、默認(rèn)）

    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

    //指定開關(guān)兩種狀態(tài)下背景顏色和滑動(dòng)桿顏色
    [[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]];
    //指定開關(guān)兩種狀態(tài)下背景圖片（YES、NO）
    [[UISwitch appearance] setOnImage:[UIImage imageNamed:@"yesSwitch"]];
    [[UISwitch appearance] setOffImage:[UIImage imageNamed:@"noSwitch"]];
  

4.自定義UIPageControl

    //選中狀態(tài)顏色
    [[UIPageControl appearance] setCurrentPageIndicatorTintColor:[UIColor colorWithRed:0 green:175.0/255.0 blue:176.0/255.0 alpha:1.0]];
    //未選中狀態(tài)顏色
    [[UIPageControl appearance] setPageIndicatorTintColor:[UIColor colorWithRed:0.996 green:0.788 blue:0.180 alpha:1.000]];
  

這里簡要說明了幾種控件的自定義效果，查看其他控件自定義效果，大家可以下載Demo仔細(xì)查看并根據(jù)自己的需要進(jìn)行定制

Demo源碼下載: 代碼

加入我們的或微信公眾賬號請查看： Ryan's zone公眾賬號及

同時(shí)歡迎關(guān)注我的新浪微博和我交流： @唐韌_Ryan

iOS學(xué)習(xí)筆記43——iOS6下自定義UI控件外觀效果