1.Twitter使用定制的UITabBar。
2.Instagram使用定制的UITabBar和UINavigationBar。
3.Epicurous (iPad版)使用標準拆分視圖的自定義元素。
在iOS5推出之前,開發者想要實現標準界面的定制化設計並不是那麽簡單。雖然創建drawRect的子類或者重寫drawRect類是個好主意,但是開發人員會被這樣的事情搞糊塗。
現在有了iOS5,開發者終於看到了曙光!IOS5包含許多新的API,可以輕松定制不同UIKit界面控件元素的外觀。
為了演示這些功能,本文將使用壹個名為“Surf's Up”的示例項目,使界面更具“海灘風格”。
當然,在學習本教程之前,妳需要了解iOS開發的基礎知識。
現在這個應用勉強可用,但是從界面上完全感受不到沙灘沖浪的氛圍。
我們從詳情頁開始。現在看起來挺標準的。
首先是頂部UINavigationBar(導航欄)上的普通UIBarButtonItem,然後是底部的幾個UITabBar元素,最後是幾個標準的數據輸入元素:
1.使用系統Helvetica字體的UILabel(標簽)。
2.UITextField(文本輸入框)
3.UISlider(滑塊)
4.UISwitch(轉換開關)
5.分段控制
我們要做的就是把這些完全“標準”的界面改造成風格獨特的定制界面。
添加背景圖片
事實上,我們已經將所有需要的圖片放在資源中,所以我們所要做的就是添加代碼。
images文件夾裏有壹張bg_sand.png圖片。我們打算用它作為詳細視圖的背景圖片。
打開DetailViewController.m並創建壹個viewDidLoad方法,如下所示:
-(void)viewDidLoad{
[superviewDidLoad];
[[self view]set background color:[uicolorcolowithpatterniimage:[UIImageimageNamed:@ " BG _ sand "]];
}
自定義UINavigationBar
在images文件夾中,我們將使用以下兩張圖片來自定義導航欄:surf_gradient_textured_32.png和surf _ gradient _ textured _ 32.png。
我們希望在導航欄中從左到右重復放置這些圖片。它們都使用兩種不同的高度,因為當切換到橫向模式時,導航欄會縮小。
為了達到上述效果,iOS提供了兩個新的API:
1.UINavigationbar現在可以設置backgroundImage屬性。
2.UIImage提供了壹種新的resizableImageWithCapInsets方法,便於創建可調整大小的圖片。
當然,我們可以進入細節視圖,用上面的API直接設置導航欄的背景圖片。但是如果這樣做,就必須在應用程序的列表視圖或其他視圖中手動修改。
幸運的是,iOS5允許我們壹次性定制用戶界面元素,這樣“處於同壹級別”的界面元素就可以使用類似的定制。
在SurfsUpAppDelegate.m文件中,在應用程序上方添加壹個新方法:did finishlaunching with options:method,如下所示:
-(void)定制外觀{
//創建可調整大小的圖像創建可調整大小的圖像。
ui image * gradient image 44 =[[UIImageimageNamed:@ " surf _ gradient _ textured _ 44 "]resizableImageWithCapInsets:UIEdgeInsetsMake(0,0,0,0)];
ui image * gradient image 32 =[[ui image image named:@ " surf _ gradient _ textured _ 32 "]resizableImageWithCapInsets:uiedgeinsets make(0,0,0,0)];
//設置* all * uinavigationbars的背景圖像設置所有導航欄的背景圖像。
[[UINavigationBarappearance]set background image:gradient image 44 for barmetrics:UIBarMetricsDefault];
[[UINavigationBarappearance]set background image:gradient image 32 for barmetrics:UIBarMetricsLandscapePhone];
//自定義* all * uinavigationbars的標題文本設置所有導航欄的標題文本。
[[UINavigationBarappearance]setTitleTextAttributes:
[NSDictionarydictionaryWithObjectsAndKeys:
[uicolorcolowithred:255.0/255.0綠色:255.0/255.0藍色:255.0/255.0alpha:1.0],
UITextAttributeTextColor,
【uicolorcolowithred:0.0綠色:0.0藍色:0.0alpha:0.8】,
UITextAttributeTextShadowColor,
[nsvaluewithfuioffset:UIOffsetMake(0,-1)],
UITextAttributeTextShadowOffset,
[UIFontfontWithName:@ " Arial-Bold " size:0.0],
UITextAttributeFont,
nil]];
}
在上面的代碼中,前兩行的功能是通過使用resizableImageWithCapInsets方法創建壹個可縮放的圖像。需要註意的是,該方法替代了之前版本中使用的stretchableimagewithlefcapwidth:top cap height:方法(已刪除)。
關於cap insets,我們只需要簡單地在頂部、左端、右端和下部設置指定圖像的固定區域。在這裏,我們希望整個圖片縮放,所以我們為每壹端設置0。
接下來的兩行代碼使用外觀代理將可縮放圖片設置為背景圖片,並指定導航欄的測量方法。
最後幾行代碼指定了詳細視圖中的標題樣式。我們傳入了標題文本屬性字典,相關的可用鍵值包括:
UITextAttributeFont
UITextAttributeTextColor
UITextAttributeTextShadowColor
UITextAttributeTextShadowOffset
好了,差不多完成了,只需要在應用程序的頂部添加壹行代碼:did finish launching with options:method:
【self customize appearance】;
編譯並運行應用程序,切換設備的方向。
自定義UIBarButtonItem
打開圖片,找到兩個文件,button_textured_24.png和button_textured_30.png,我們將用它們來設置導航欄中按鈕的外觀。
註意,我們需要使按鈕圖像可調整大小,因為按鈕的寬度取決於其中的文本。
對於這些按鈕,我們不需要縮放最左邊和最右邊的五個像素,所以我們需要將left和rightcaps設置為5。
在Customizability方法的末尾添加以下代碼:
//自定義UIBarButtonItems的外觀
ui image * button 30 =[[UIImageimageNamed:@ " button _ textured _ 30 "]resizableImageWithCapInsets:UIEdgeInsetsMake(0,5,0,5)];
ui image * button 24 =[[UIImageimageNamed:@ " button _ textured _ 24 "]resizableImageWithCapInsets:UIEdgeInsetsMake(0,5,0,5)];
[[uibarbuttonitemcappearance]set background image:button 30 for state:UIControlStateNormalbarMetrics:UIBarMetricsDefault];
[[uibarbuttonitemcappearance]set background image:button 24 for state:uicontrolstatenormalbarrmetrics:UIBarMetricsLandscapePhone];
[[uibarbuttonitempearance]setTitleTextAttributes:
[NSDictionarydictionaryWithObjectsAndKeys:
[uicolorcolowithred:220.0/255.0綠色:104.0/255.0藍色:1.0/255.0 alpha:1.0],
UITextAttributeTextColor,
[uicolorcolowithred:1.0 green:1.0 blue:1.0 alpha:1.0],
UITextAttributeTextShadowColor,
[nsvaluewithuifoffset:UIOffsetMake(0,1)],
UITextAttributeTextShadowOffset,
[UIFontfontWithName:@ " American typewriter " size:0.0],
UITextAttributeFont,
無]
for state:UIControlStateNormal];
上面的代碼實際上類似於自定義導航欄。首先,我們為按鈕創建了壹個可縮放的圖像,並將其設置為背景圖像。然後我們指定文本的格式。
“後退”按鈕需要特殊定制,因為它需要看起來不同。
讓我們將以下代碼添加到Customizability方法的末尾,以便對back按鈕進行特殊處理:
//自定義UIBarButtonItems上“後退”的外觀
ui image * button back 30 =[[UIImageimageNamed:@ " button _ back _ textured _ 30 "]resizableImageWithCapInsets:uiedgeinsets make(0,13,0,5)];
ui image * button back 24 =[[UIImageimageNamed:@ " button _ back _ textured _ 24 "]resizableImageWithCapInsets:uiedgeinsets make(0,12,0,5)];
[[uibarbuttonitempearance]setBackButtonBackgroundImage:button back 30 for state:UIControlStateNormalbarMetrics:UIBarMetricsDefault];
[[uibarbuttonitempearance]setBackButtonBackgroundImage:button back 24 for state:uicontrolstatenormalbarmmetrics:UIBarMetricsLandscapePhone];
需要註意的是,我們為back按鈕設置了不同的值。同時,UIBarButtonItem還有壹個特殊的backButtonBackgroundImage屬性可以使用。
編譯運行,可以看到下圖:
自定義UITabBar
iOS5中提供了壹個API來設置UITabBar的背景圖片,並表示選中的圖片。
在customizeAppearance方法的底部添加以下代碼:
//自定義UITabBar的外觀
ui image * tab background =[[UIImageimageNamed:@ " tab _ BG "]resizableImageWithCapInsets:uiedgeinsets make(0,0,0,0)];
[[uitabbarpearance]set background image:tab background];
[[uitabbarpearance]setSelectionIndicatorImage:[UIImageimageNamed:@ " tab _ select _ indicator "]];