㈠ 如何在iOS 5中定製用戶界面
事實上，App Store中很多流行應用都以一種非標準的形式來呈現標準的iOS 用戶界面元素：
1.Twitter使用了定製的UITabBar
2.Instagram使用了定製的UITabBar和UINavigationBar
3.Epicurious(iPad版)使用了標准split-view的定製元素
在iOS5推出之前，要實現標准界面的定製化設計，對開發者來說可沒那麼簡單。盡管創建drawRect的子類或覆蓋drawRect類是個不錯的辦法，但開發者會被這么事情搞得頭昏腦脹。
現在有了iOS5，開發者終於看到了黎明的曙光!iOS5中包含了眾多的新API，可以輕松定製不同UIKit界面控制元素的外觀。
為了展示這些功能，本文會使用一個名為「
Surf』s Up」的示例項目，讓界面顯得更具備「沙灘風格」。
當然，在學習本教程之前，需要你了解iOS開發的基礎知識。
開始前的准備
首先請下載這個初始項目(http://www.raywenderlich.com/downloads/SurfsUpStarter.zip)
我已經創建好了一個簡單的應用，這樣大家就可以把重點放在學習如何定製UIKit界面元素上。
當你打開項目之後，先看看其中的代碼和XIB文件。你會發現主視圖呈現了一個沖浪之旅的列表，而細節視圖則勻速我們獲取每個沖浪之旅的詳細信息。
看完基本代碼和XIB文件後，讓我們編譯運行項目，會看到以下的兩個視圖。
現在這個應用勉強可用，但從界面上一點感覺不到海灘沖浪的氛圍。
讓我們從detail(細節)頁面上開始改造吧。現在它看起來相當的標准。
首先是頂部UINavigationBar(導航欄)上的平淡無奇的UIBarButtonItem，然後是底部的幾個UITabBar元素，接著就是幾個標準的數據輸入元素：
1.使用了系統Helvetica字體的UILabel(標簽)
2.UITextField(文本輸入框)
3.UISlider(滑動條)
4.UISwitch(切換開關)
5.UISegmentedControl(分段控制)
我們要做的事情是，把這些完全「標准」的界面改造成具有獨特風格的定製界面。
添加背景圖片
事實上，我們已經把所需要的資源圖片都放在Resources裡面了，所以要做的只是添加代碼而已。
在images文件夾中有一個bg_sand.png圖片。我們打算用它當做細節視圖的背景圖片。
打開DetailViewController.m，創建一個viewDidLoad方法如下：
-(void)viewDidLoad{
[superviewDidLoad];
[[selfview]setBackgroundColor:[UIColorcolorWithPatternImage:[UIImageimageNamed:@"bg_sand"]]];
}
無疑，這是設置背景圖片的最佳方式，雖然沒有backgroundImage這樣的屬性，但是使用backgroundColor屬性我們同樣可以實現這個目的!
編譯運行項目，可以看到以下界面：
定製UINavigationBar
在images文件夾中，我們將使用以下兩個圖片來定製導航欄：surf_gradient_textured_32.png和surf_gradident_textured_44.png。
我們希望在導航欄中從左到右重復鋪設這些圖片。之所有用了兩個不同的高度，是因為當導航欄切換到橫屏模式時會縮小。
要實現以上效果，iOS提供了兩個新的API：
1.UINavigationbar現在可以設置backgroundImage屬性
2.UIImage提供了新的resizableImageWithCapInsets方法，方便創建可調整大小的圖片。
當然，我們可以進入細節視圖，並使用以上API來直接設置導航欄的背景圖片。但如果這樣做，那就得在列表視圖或應用的其它視圖中手動修改。
幸運的是，iOS5允許我們一次性定製用戶界面元素，從而讓「處於同一級別的」界面元素使用類似的定製。
在SurfsUpAppDelegate.m文件中，在application:didFinishLaunchingWithOptions:方法的上面添加一個新的方法如下：
-(void)customizeAppearance{
//create resizable images創建可調整大小的圖像
UIImage *gradientImage44 = [[UIImageimageNamed:@"surf_gradient_textured_44"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
UIImage *gradientImage32 = [[UIImageimageNamed:@"surf_gradient_textured_32"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
//set the background image for *all* UINavigationBars為所有導航欄設置背景圖片
[[UINavigationBarappearance]setBackgroundImage:gradientImage44forBarMetrics:UIBarMetricsDefault];
[[UINavigationBarappearance]setBackgroundImage:gradientImage32forBarMetrics:UIBarMetricsLandscapePhone];
//customize the title text for *all* UINavigationBars為所有導航欄設置標題文本
[[UINavigationBarappearance]setTitleTextAttributes:
[:
[UIColorcolorWithRed:255.0/255.0green:255.0/255.0blue:255.0/255.0alpha:1.0],
UITextAttributeTextColor,
[UIColorcolorWithRed:0.0green:0.0blue:0.0alpha:0.8],
,
[NSValuevalueWithUIOffset:UIOffsetMake(0, -1)],
,
[UIFontfontWithName:@"Arial-Bold"size:0.0],
UITextAttributeFont,
nil]];
}
在以上的代碼中，頭兩行的作用是使用resizableImageWithCapInsets方法創建了可伸縮的圖像。需要注意的是，該方法取代了之前版本中使用的:topCapHeight:方法(已被刪除)。
關於cap insets，我們只需簡單的設置指定圖像在頂部，左端，右端和下部的固定區域。在這里，我們希望整個圖片都伸縮，所以為每個端都設置了0。
接下來的兩行代碼使用appearance(外觀)代理將可伸縮圖片設置為背景圖片，並指定了導航欄的測量方式。
最後幾行代碼指定了細節視圖中的標題樣式。我們傳入了標題文本屬性詞典，相關的可用鍵值包括：
UITextAttributeFont
UITextAttributeTextColor
Ok，差不多搞定了，只需要在application:didFinishLaunchingWithOptions:方法的頂部添加一行代碼：
[selfcustomizeAppearance];
編譯運行應用，並切換設備的朝向，可以看到以下畫面：
定製UIBarButtonItem
打開images，找到button_textured_24.png和button_textured_30.png兩個文件，我們將用它們來設置導航欄中的按鈕外觀。
注意我們需要將按鈕圖像設置為可調整大小的，因為按鈕的寬度取決於其中的文本。
對於這些按鈕，我們不需要最左和最右的5個像素也伸縮，所以需要將left和right cap insets設置為5。
在customizeAppearance方法的最後添加以下代碼：
//customize the apperance for UIBarButtonItems
UIImage *button30 = [[UIImageimageNamed:@"button_textured_30"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
UIImage *button24 = [[UIImageimageNamed:@"button_textured_24"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[[UIBarButtonItemappearance] setBackgroundImage:button30forState::UIBarMetricsDefault];
[[UIBarButtonItemappearance] setBackgroundImage:button24forState::UIBarMetricsLandscapePhone];
[[UIBarButtonItemappearance]setTitleTextAttributes:
[:
[UIColorcolorWithRed:220.0/255.0green:104.0/255.0blue:1.0/255.0alpha:1.0],
UITextAttributeTextColor,
[UIColorcolorWithRed:1.0green:1.0blue:1.0alpha:1.0],
,
[NSValuevalueWithUIOffset:UIOffsetMake(0, 1)],
,
[UIFontfontWithName:@"AmericanTypewriter"size:0.0],
UITextAttributeFont,
nil]
forState:UIControlStateNormal];
以上代碼其實和定製導航欄的差不多。首先我們還是為按鈕創建了可伸縮的圖像，並設置為背景圖片。然後我們指定了文本的格式。
其中的」back」按鈕需要特殊定製，因為它需要看起來與眾不同。
讓我們在customizeApperance方法的最後添加以下代碼來特殊對待back按鈕：
//customize the appeance for "back" on UIBarButtonItems
UIImage *buttonBack30 = [[UIImageimageNamed:@"button_back_textured_30"]resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 5)];
UIImage *buttonBack24 = [[UIImageimageNamed:@"button_back_textured_24"]resizableImageWithCapInsets:UIEdgeInsetsMake(0, 12, 0, 5)];
[[UIBarButtonItemappearance]setBackButtonBackgroundImage:buttonBack30forState::UIBarMetricsDefault];
[[UIBarButtonItemappearance]setBackButtonBackgroundImage:buttonBack24forState::UIBarMetricsLandscapePhone];
需要注意的是，我們為back按鈕設置了不同的cap inset值。同時,UIBarButtonItem還有一個專門的backButtonBackgroundImage屬性可以使用。
編譯運行，可以看到下圖：
定製UITabBar
在iOS5中提供了一個API來設置UITabBar的背景圖片，以及表示選中的圖片。
在customizeAppearance方法的底部添加以下代碼：
//customize the apperance for UITabBar
UIImage *tabBackground = [[UIImageimageNamed:@"tab_bg"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UITabBarappearance]setBackgroundImage:tabBackground];
[[UITabBarappearance]setSelectionIndicatorImage:[UIImageimageNamed:@"tab_select_indicator"]];
我想這三行代碼基本不需要再解釋了。
㈡ ios 自定義顏色 橘紅色怎麼調
更改導航欄的背景和文字Color
方法一：
[objc] view plain
//set NavigationBar 背景顏色&title 顏色
[self.navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:20/255.0 green:155/255.0 blue:213/255.0 alpha:1.0]];
[self.navigationController.navigationBar setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],UITextAttributeTextColor,nil]];
效果如下：
我們把背景改成了藍色，title文字改成了白色，是不是很簡單呢？NavigationBar極其push過去的子頁面也會是你修改後的背景顏色
方法二：
[objc] view plain
//設置NavigationBar背景顏色
[[UINavigationBar appearance] setBarTintColor:[UIColor redColor]];
//@{}代表Dictionary
[[UINavigationBar appearance] setTitleTextAttributes:@{:[UIColor whiteColor]}];
效果如下：
在導航欄使用背景圖片：
如果您的應用程序使用了自定義圖像作為欄的背景，你需要提供一個「更大」的圖片，使其延伸了狀態欄的後面。導航欄的高度現在是從44點（88像素）更改為64點（128像素）。
仍然可以使用了setBackgroundImage：方法來指定自定義圖像的導航欄。下面是代碼行設置背景圖片：
[objc] view plain
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault];
效果圖和上面的一樣，我就不貼出來了。
改變導航欄標題的字體
就像iOS 6，我們可以通過使用導航欄的「titleTextAttributes」屬性來自定義的文本樣式。可以指定字體，文字顏色，文字陰影顏色，文字陰影在文本標題偏移屬性字典，使用下面的文本屬性鍵：
UITextAttributeFont - 字體
UITextAttributeTextColor - 文字顏色
- 文字陰影顏色
- 偏移用於文本陰影
[objc] view plain
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];
shadow.shadowOffset = CGSizeMake(0, 1);
[[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
[UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], ,
shadow, NSShadowAttributeName,
[UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil nil]];
使用圖片作為導航欄標題
不想標題欄是光禿禿的文字？可以通過使用代碼行中的圖像或標志取代它：簡單地改變titleview用來自定義，（適用於較低版本）
[objc] view plain
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"appcoda-logo.png"]];
效果如下，我隨便用了個圖片，別介意：
添加多個欄按鈕項目
您希望添加導航欄的一側不止一個欄按鈕項目，無論是leftBarButtonItems和rightBarButtonItems 您在導航欄左側/右側指定自定義欄按鈕項目。比如你想添加一個攝像頭和一個共享按鈕右側的吧。您可以使用下面的代碼：
[objc] view plain
UIBarButtonItem *shareItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action: nil nil];
UIBarButtonItem *cameraItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action: nil nil];
NSArray *itemsArr = @[shareItem,cameraItem];
self.navigationItem.rightBarButtonItems = itemsArr;
自定義後退按鈕的文字和顏色
通常情況下，我們使用UINavigationController時，push到的子頁面，左上角會是系統自動取值上一層父頁面的title名稱，默認情況是這樣，那麼我們該如何修改它呢？
左側顯示了父頁面的title：用戶登錄，可是我們想修改成返回，方式有很多，舉些例子
方法一：
通過設置navigationItem的backBarButtonItem可以直接更換文字，【注意，要在父視圖的Controller中設置】如下：
[objc] view plain
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.backBarButtonItem = item;
效果如下：
所有的子界面返回時都變成了我們定義的文字，如果不想顯示文字，直接""，就會單獨顯示一個系統的返回箭頭圖標，也是很清晰的感覺。
做到這里發現文字顏色和背景有重復，那麼如何自定義其顏色呢？在iOS7，可以改變tintColor屬性，它提供了一個快速和簡單的方式，下面是一個示例代碼片段：
[objc] view plain
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
效果如下：
全是系統的圖標和文字，這回看著舒服了，有木有？【除了後退按鈕，請注意，tintColor屬性影響所有按鈕標題和按鈕圖像】
最後舉個例子，另外一種實現自定義導航控制器返回按鈕，代碼如下：
[objc] view plain
[self.navigationController.navigationBar setTitleTextAttributes:@{: [UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:19.0]}];
self.title=[NSString stringWithFormat:@"第%lu頁",(unsigned long)self.navigationController.viewControllers.count];
//自定義返回按鈕
UIImage *backButtonImage = [[UIImage imageNamed:@"fanhui.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 30, 0, 0)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
//將返回按鈕的文字position設置不在屏幕上顯示
[[UIBarButtonItem appearance] :UIOffsetMake(NSIntegerMin, NSIntegerMin) forBarMetrics:UIBarMetricsDefault];
效果如下：
最後說一下使用pushViewController切換到下一個視圖時，navigation controller按照以下3條順序更改導航欄的左側按鈕（本段摘自網路）：
1、如果B視圖有一個自定義的左側按鈕（leftBarButtonItem），則會顯示這個自定義按鈕；
2、如果B沒有自定義按鈕，但是A視圖的backBarButtonItem屬性有自定義項，則顯示這個自定義項；
3、如果前2條都沒有，則默認顯示一個後退按鈕，後退按鈕的標題是A視圖的標題；