iOS學習筆記43——iOS6下自訂UI控制面板效果

       儘管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源碼下載:代碼

加入我們的QQ群或公眾帳號請查看：Ryan's
zone公眾帳號及QQ群

同時歡迎關注我的新浪微博和我交流：@唐韌_Ryan