當前位置:成語大全網 - 英語詞典 - 如何在iOS5中自定義用戶界面

如何在iOS5中自定義用戶界面

事實上,App Store中許多流行的應用程序都以非標準的形式呈現標準的iOS用戶界面元素:

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 "]];