自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

iOS應(yīng)用開發(fā)新手教程：iOS5 UIKit新特性

作者：王軍
移動開發(fā) iOS
在iOS5推出之前，要實現(xiàn)標(biāo)準(zhǔn)界面的定制設(shè)計，對于開發(fā)者來說可沒有那么簡單。盡管開發(fā)者可以通過重寫drawRect是一個不錯的辦法，但開發(fā)者也很頭痛。

現(xiàn)在有了ios5了，UIKit添加了許多控件元素的外觀。

開始前的準(zhǔn)備

首先請下載這個初始項目(http://www.raywenderlich.com/downloads/SurfsUpStarter.zip)

我已經(jīng)創(chuàng)建好了一個簡單的應(yīng)用，這樣大家就可以把重點放在學(xué)習(xí)如何定制UIKit界面元素上。

當(dāng)你打開項目之后，先看看其中的代碼和XIB文件。你會發(fā)現(xiàn)主視圖呈現(xiàn)了一個沖浪之旅的列表，而細(xì)節(jié)視圖則勻速我們獲取每個沖浪之旅的詳細(xì)信息。

看完基本代碼和XIB文件后，讓我們編譯運行項目，會看到以下的兩個視圖。

現(xiàn)在我們要做的事情是，把這個完全標(biāo)準(zhǔn)的界面改造成具有獨風(fēng)格的定制界面。#p#

添加背景圖片

事實上，我們已經(jīng)把所需要的資源圖片都放在Resources里面了，所以要做的只是添加代碼而已。

在images文件夾中有一個bg_sand.png圖片。我們打算用它當(dāng)做細(xì)節(jié)視圖的背景圖片。

打開DetailViewController.m，創(chuàng)建一個viewDidLoad方法如下：

  1. -(void)viewDidLoad{ 
  2. [superviewDidLoad]; 
  3. [[selfview]setBackgroundColor:[UIColorcolorWithPatternImage:[UIImageimageNamed:@"bg_sand"]]]; 
  4.  
  5. } 

無疑，這是設(shè)置背景圖片的最佳方式，雖然沒有backgroundImage這樣的屬性，但是使用backgroundColor屬性我們同樣可以實現(xiàn)這個目的!

編譯運行項目，可以看到以下界面：

#p#

定制UINavigationBar

在images文件夾中，我們將使用以下兩個圖片來定制導(dǎo)航欄：surf_gradient_textured_32.png和surf_gradident_textured_44.png。

我們希望在導(dǎo)航欄中從左到右重復(fù)鋪設(shè)這些圖片。之所有用了兩個不同的高度，是因為當(dāng)導(dǎo)航欄切換到橫屏模式時會縮小。

要實現(xiàn)以上效果，iOS提供了兩個新的API：

1.UINavigationbar現(xiàn)在可以設(shè)置backgroundImage屬性

2.UIImage提供了新的resizableImageWithCapInsets方法，方便創(chuàng)建可調(diào)整大小的圖片。

當(dāng)然，我們可以進(jìn)入細(xì)節(jié)視圖，并使用以上API來直接設(shè)置導(dǎo)航欄的背景圖片。但如果這樣做，那就得在列表視圖或應(yīng)用的其它視圖中手動修改。

幸運的是，iOS5允許我們一次性定制用戶界面元素，從而讓“處于同一級別的”界面元素使用類似的定制。

在SurfsUpAppDelegate.m文件中，在application:didFinishLaunchingWithOptions:方法的上面添加一個新的方法如下：

  1. -(void)customizeAppearance{ 
  2. //create resizable images創(chuàng)建可調(diào)整大小的圖像 
  3. UIImage *gradientImage44 = [[UIImageimageNamed:@"surf_gradient_textured_44"] 
  4. resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)]; 
  5. UIImage *gradientImage32 = [[UIImageimageNamed:@"surf_gradient_textured_32"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)]; 
  6. //set the background image for *all* UINavigationBars為所有導(dǎo)航欄設(shè)置背景圖片 
  7. [[UINavigationBarappearance]setBackgroundImage:gradientImage44forBarMetrics:UIBarMetricsDefault]; 
  8. [[UINavigationBarappearance]setBackgroundImage:gradientImage32forBarMetrics:UIBarMetricsLandscapePhone]; 
  9. //customize the title text for *all* UINavigationBars為所有導(dǎo)航欄設(shè)置標(biāo)題文本 
  10. [[UINavigationBarappearance]setTitleTextAttributes: 
  11. [NSDictionarydictionaryWithObjectsAndKeys: 
  12. [UIColorcolorWithRed:255.0/255.0green:255.0/255.0blue:255.0/255.0alpha:1.0], 
  13. UITextAttributeTextColor, 
  14. [UIColorcolorWithRed:0.0green:0.0blue:0.0alpha:0.8], 
  15. UITextAttributeTextShadowColor, 
  16. [NSValuevalueWithUIOffset:UIOffsetMake(0, -1)], 
  17. UITextAttributeTextShadowOffset, 
  18. [UIFontfontWithName:@"Arial-Bold"size:0.0], 
  19. UITextAttributeFont, 
  20. nil]]; 
  21. } 

在以上的代碼中，頭兩行的作用是使用resizableImageWithCapInsets方法創(chuàng)建了可伸縮的圖像。需要注意的是，該方法取代了之前版本中使用的stretchableImageWithLeftCapWidth:topCapHeight:方法(已被刪除)。

關(guān)于cap insets，我們只需簡單的設(shè)置指定圖像在頂部，左端，右端和下部的固定區(qū)域。在這里，我們希望整個圖片都伸縮，所以為每個端都設(shè)置了0。

接下來的兩行代碼使用appearance(外觀)代理將可伸縮圖片設(shè)置為背景圖片，并指定了導(dǎo)航欄的測量方式。

最后幾行代碼指定了細(xì)節(jié)視圖中的標(biāo)題樣式。我們傳入了標(biāo)題文本屬性詞典，相關(guān)的可用鍵值包括：

  1. UITextAttributeFont 
  2. UITextAttributeTextColor 
  3. UITextAttributeTextShadowColor 
  4. UITextAttributeTextShadowOffset 

Ok，差不多搞定了，只需要在application:didFinishLaunchingWithOptions:方法的頂部添加一行代碼：

  1. [selfcustomizeAppearance]; 

編譯運行應(yīng)用，并切換設(shè)備的朝向，可以看到以下畫面：

#p#

定制UIBarButtonItem

打開images，找到button_textured_24.png和button_textured_30.png兩個文件，我們將用它們來設(shè)置導(dǎo)航欄中的按鈕外觀。

注意我們需要將按鈕圖像設(shè)置為可調(diào)整大小的，因為按鈕的寬度取決于其中的文本。

對于這些按鈕，我們不需要最左和最右的5個像素也伸縮，所以需要將left和right cap insets設(shè)置為5。

在customizeAppearance方法的最后添加以下代碼：

  1. //customize the apperance for UIBarButtonItems 
  2. UIImage *button30 = [[UIImageimageNamed:@"button_textured_30"] r 
  3. esizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)]; 
  4. UIImage *button24 = [[UIImageimageNamed:@"button_textured_24"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)]; 
  5. [[UIBarButtonItemappearance] setBackgroundImage:button30forState:UIControlStateNormalbarMetrics:UIBarMetricsDefault]; 
  6. [[UIBarButtonItemappearance] setBackgroundImage:button24forState:UIControlStateNormalbarMetrics:UIBarMetricsLandscapePhone]; 
  7. [[UIBarButtonItemappearance]setTitleTextAttributes: 
  8. [NSDictionarydictionaryWithObjectsAndKeys: 
  9. [UIColorcolorWithRed:220.0/255.0green:104.0/255.0blue:1.0/255.0alpha:1.0], 
  10. UITextAttributeTextColor, 
  11. [UIColorcolorWithRed:1.0green:1.0blue:1.0alpha:1.0], 
  12. UITextAttributeTextShadowColor, 
  13. [NSValuevalueWithUIOffset:UIOffsetMake(0, 1)], 
  14. UITextAttributeTextShadowOffset, 
  15. [UIFontfontWithName:@"AmericanTypewriter"size:0.0], 
  16. UITextAttributeFont, 
  17. nil] 
  18. forState:UIControlStateNormal]; 

以上代碼其實和定制導(dǎo)航欄的差不多。首先我們還是為按鈕創(chuàng)建了可伸縮的圖像，并設(shè)置為背景圖片。然后我們指定了文本的格式。

其中的”back”按鈕需要特殊定制，因為它需要看起來與眾不同。

讓我們在customizeApperance方法的最后添加以下代碼來特殊對待back按鈕：

  1. //customize the appeance for "back" on UIBarButtonItems 
  2. UIImage *buttonBack30 = [[UIImageimageNamed:@"button_back_textured_30"] 
  3. resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 5)]; 
  4. UIImage *buttonBack24 = [[UIImageimageNamed:@"button_back_textured_24"] 
  5. resizableImageWithCapInsets:UIEdgeInsetsMake(0, 12, 0, 5)]; 
  6. [[UIBarButtonItemappearance]setBackButtonBackgroundImage:buttonBack30forState: 
  7. UIControlStateNormalbarMetrics:UIBarMetricsDefault]; 
  8. [[UIBarButtonItemappearance]setBackButtonBackgroundImage:buttonBack24forState: 
  9. UIControlStateNormalbarMetrics:UIBarMetricsLandscapePhone]; 

需要注意的是，我們?yōu)閎ack按鈕設(shè)置了不同的cap inset值。同時,UIBarButtonItem還有一個專門的backButtonBackgroundImage屬性可以使用。

編譯運行，可以看到下圖：

#p#

定制UITabBar

在iOS5中提供了一個API來設(shè)置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"]];

我想這三行代碼基本不需要再解釋了。

編譯運行項目，會看到以下界面：

#p#

定制UISlider

在iOS5中，我們只需設(shè)置maximusTrackImage，minimumTrackImage和thumbImage屬性即可輕松定制滑動控制。

讓我們在customizeAppearance方法的底部添加以下代碼：

  1. //customize the apperance for UISlider 
  2. UIImage *minImage = [[UIImageimageNamed:@"slider_minimum"] 
  3. resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)]; 
  4. UIImage *maxImage = [[UIImageimageNamed:@"slider_maximum"] 
  5. resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)]; 
  6. UIImage *thumbImage = [UIImageimageNamed:@"thumb"]; 
  7. [[UISliderappearance]setMaximumTrackImage:maxImageforState:UIControlStateNormal]; 
  8. [[UISliderappearance]setMinimumTrackImage:minImageforState:UIControlStateNormal]; 
  9. [[UISliderappearance]setThumbImage:thumbImageforState:UIControlStateNormal]; 

編譯運行，就可以看到定制后的UISlider滑動條!

#p#

定制UISegmentedControl

接下來讓我們來定制分段控制。這個元素稍微復(fù)雜一點。因為我們需要使用選中和非選中的背景，以及鄰近區(qū)域的不同狀態(tài)(如左邊選中，右邊未選中;左邊未選中和右邊選中，以及兩邊都沒有選中)。

在customizeAppearance方法的底部添加以下代碼：

  1. //customize the appearance for UISegmentedControl 
  2. UIImage *segmentSelected =[[UIImageimageNamed:@"segcontrol_sel"] 
  3. resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)]; 
  4. UIImage *segmentUnselected =[[UIImageimageNamed:@"segcontrol_uns"] 
  5. resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)]; 
  6. UIImage *segmentSelectedUnselected =[UIImageimageNamed:@"segcontrol_sel-uns"]; 
  7. UIImage *segUnselectedSelected = [UIImageimageNamed:@"segcontrol_uns-sel"]; 
  8. UIImage *segmentUnselectedUnselected =[UIImageimageNamed:@"segcontrol_uns-uns"]; 
  9. [[UISegmentedControlappearance]setBackgroundImage:segmentUnselectedforState: 
  10. UIControlStateNormalbarMetrics:UIBarMetricsDefault]; 
  11. [[UISegmentedControlappearance]setBackgroundImage:segmentSelectedforState: 
  12. UIControlStateSelectedbarMetrics:UIBarMetricsDefault]; 
  13. [[UISegmentedControlappearance]setDividerImage:segmentUnselectedUnselectedforLeftSegmentState: 
  14. UIControlStateNormalrightSegmentState:UIControlStateNormalbarMetrics:UIBarMetricsDefault]; 
  15. [[UISegmentedControlappearance]setDividerImage:segmentSelectedUnselectedforLeftSegmentState: 
  16. UIControlStateSelectedrightSegmentState:UIControlStateNormalbarMetrics:UIBarMetricsDefault]; 
  17. [[UISegmentedControlappearance]setDividerImage:segUnselectedSelectedforLeftSegmentState: 
  18. UIControlStateNormalrightSegmentState:UIControlStateSelectedbarMetrics:UIBarMetricsDefault]; 

編譯運行項目，可以看到UISegmentedControl現(xiàn)在是舊貌換新顏了!

定制UISwitch

截止目前為止，我們還沒有找到定制UISwitch的合適方法，但要修改它的tintColor屬性還是輕而易舉的。

注意到在DetailViewController中，已經(jīng)有一個IBOutlet- rentSwitch的聯(lián)系將切換開關(guān)和DetailView.xib聯(lián)系起來。

我們只需在DetailViewController的viewDidLoad方法中添加以下代碼即可：

  1. -(void)viewDidLoad{ 
  2. [superviewDidLoad]; 
  3. [[selfview]setBackgroundColor:[UIColorcolorWithPatternImage:[UIImageimageNamed:@"bg_sand"]]]; 
  4. [rentSwitchsetOnTintColor:[UIColorcolorWithRed:0green:175.0/255.0blue:176.0/255.0alpha:1.0]]; 
  5. } 

編譯運行項目，會看到切換開關(guān)有了新的顏色!

#p#

定制UILabel

標(biāo)簽是細(xì)節(jié)視圖中的重要組成部分，但我們不會通過appearance代理來進(jìn)行定制。

打開DetailView.xib，在主視圖中選中第一個標(biāo)簽(比如name)，然后在右側(cè)面板選擇Attributes Inspector，并進(jìn)行以下設(shè)置：

Font: Custom

Family: American Typewriter

Style: Regular

Size: 16

 

同時再修改剩下的兩個標(biāo)簽屬性：“Experience Level”和”Rent a board”

編譯運行項目，會看到標(biāo)簽的外觀更養(yǎng)眼一些了。

#p#

定制UITextField

現(xiàn)在，我們的UITextField(文本輸入框)已經(jīng)被設(shè)置為使用UITextBorderStyleLine.讓我們在Interface Builder中將字體設(shè)置為American Typewriter,Size 12,Regular。

切換到Identity Inspector，你會看到現(xiàn)在的類型是CustomTextField。

現(xiàn)在又該用到drawRect:方法了。為了提供青色的背景，我們需要覆蓋drawRect方法。

現(xiàn)在在Xcode中找到我們?yōu)榇怂鶆?chuàng)建的CustomTextField.m文件，使用以下代碼替換drawRect:方法：

  1. - (void)drawRect:(CGRect)rect 
  2. { 
  3. // [superdrawRect:rect]; 
  4. UIImage *textFieldBackground = [[UIImageimageNamed:@"text_field_teal"] 
  5. resizableImageWithCapInsets:UIEdgeInsetsMake(15, 5, 15, 5)]; 
  6. [textFieldBackgrounddrawInRect:[selfbounds]]; 
  7. } 

這里我們創(chuàng)建了另一個可伸縮的圖像，并在視圖邊界定義的矩形中繪制?，F(xiàn)在可以編譯運行項目了。

項目源代碼：http://easymorse-iphone.googlecode.com/svn/trunk/surf-starter/

原文鏈接：http://www.raywenderlich.com/4344/user-interface-customization-in-ios-5

翻譯：http://wangjun.easymorse.com/?p=1657

責(zé)任編輯：佚名 來源： 王軍的博客
iOS教程iOS5 UIKit新特性
相關(guān)推薦

2012-04-04 22:36:52

iOS5

2012-01-18 14:14:29

iOS教程iOS5

2011-06-15 16:11:51

UIKitCocoa TouchiOS

2011-07-08 14:58:16

iPhone Xcode iOS

2017-02-06 11:17:31

iOSiOS 10.3新特性

2011-09-19 15:42:33

TwitteriOS5

2011-06-14 17:02:43

Xcode 4Cocoa TouchiOS

2011-06-07 06:59:51

iOS 5iOS蘋果

2013-03-25 13:41:10

iOS5ARC內(nèi)存管理

2011-07-19 13:39:20

iOS HTML5

2011-08-10 10:00:17

iOS 5升級

2022-05-05 15:16:13

iOSStoreKit 2API

2015-10-16 14:27:29

iOS9collectionV特性

2011-08-09 14:25:43

蘋果iCloudiOS5

2013-07-22 14:38:00

iOS開發(fā)ASIHTTPRequ

2012-05-01 21:27:20

iOS

2012-08-30 09:32:12

FacebookiOS

2012-05-27 20:21:40

2012-03-24 21:02:41

iOS

2011-08-09 10:27:41

iOS剪貼板
點贊
收藏

51CTO技術(shù)棧公眾號