iOS 7用戶界面過渡指南

過渡前的準備

重要:由於iOS7還未最終發佈,該文檔的部分內容還會繼續修改。

開始之前的工作

iOS 7引入了許多用戶界面上的改變,比如無邊框的按鈕,透明操作欄,全屏視圖控制器佈局。使用Xcode 5可以創建iOS 7項目,並使用模擬器一窺iOS 7用戶界面的變化。

例如,示例程序TheElement在iOS6和iOS7模擬器上分別看起來分別是這樣的。

iOS7模擬器上的樣子                                      iOS6模擬器上的樣子

模擬器上的樣子

注意:iOS 7 beta2 現已發佈,支持iPad

對於這樣結構的程序,你甚至不用更新你的應用程序,但在開始之前還是有幾件事要考慮一下。當你操作內置的應用程序時,你會感覺到iOS 7的變化既微妙又深刻。熟悉的UI元素非常易於辨認,但它們看起來和原來變化很大。接近真實的虛擬觸摸變得更加柔和精妙,同時動態效果的真實性得到了增強。

注意:iOS 7上所有的UI元素看起來和原來區別很大,並且提供了許多新功能,但是你所熟悉的UIKit API基本上沒有變化太多。

隨着你探索的深入,會認識到iOS 7的主要主題:

  1. 順從。界面的作用是幫助用戶理解內容、和內容交互,而不是與內容競爭。
  2. 明晰。每個字號的字體都清晰可辨,icon精確易懂,裝飾元素恰如其分,對於功能的精確聚焦是設計驅動力。
  3. 深度。通過可視化的層、逼真的動畫,加深用戶的愉悅和理解。

因爲iOS體驗發生了根本而普遍的變化,iOS 7爲大家提供了一個珍貴的機會:重新審視你的app的核心目的是什麼,爲用戶提供什麼樣的功能。儘管你現在可能還沒準備好利用這個機會,當你將app適配到iOS 7的時候,請記住這一點。(當你準備好重新審視你的app設計或者開始一個新項目的時候,請參閱《Designing for iOS 7(爲iOS 7而設計)》)

瞭解app的特徵

不論你準備重新設計app,或者只是改進設計,你都需要知道你的app的特質會對重新設計過程產生影響。首先請自問如下2個問題,它們能幫助你思考過渡的策略:

你使用Auto Layout來設計app了嗎?

如果你使用了Auto Layout來佈局的話,你的工作量就少了很多。在Xcode 5中,Auto Layout會幫助app自動調整新的UI元素度量,並且對字號自動動態調整。Auto Layout對你從iOS 6升級到iOS 7,和同時支持兩個版本操作系統非常有幫助。

如果你沒有使用Auto Layout,現在開始學着使用吧,特別是當你需要支持app的多個版本的時候。如果使用手動佈局或者區分性佈局技術的話會比較麻煩,就需要時刻考慮確保字號改變的時候造成的佈局變化是否合適。

你的app需要支持iOS 6嗎?

記住很多iOS用戶很可能在較短時間內升級他們的設備到iOS 7,他們不希望看到自己喜歡的app在iOS 7上表現得糟糕。

你也可能出於商業原因需要考慮對iOS 6的支持,這時最佳的方案仍然是將app先升級到支持iOS 7,然後儘可能地去將設計的變化運用到app的iOS 6版本。這個過程的處理細節請參考“支持iOS 6系統”(第7頁)。

接下來要檢查app是依照什麼樣的方式定製的。不同定製方式影響了工作量。

定製分爲三種類型:

標準型(Standard): app中只包含了UIKit中所提供的標準UI元素。

自定義型(Custom): app中完全使用了UIKit中沒有的自定義UI元素。

混合型(Hybrid): 既使用了標準元素,也用了自定義元素(包括使用UIKit着色和外表自定義API定製的自定義的標準元素)。

對標準型app。需要確認視覺和交互設計在iOS 7環境下時是否依然合適。如果你決定保持原有的佈局和交互方式,主要的工作就是進行微調,確保app可以正常處理系統全局的手勢。

自定義型。這對工作量要求就比較高了。如果當前的UI和體驗依然合適的話,那要做的事情還不算多。相反,如果app的個性和體驗與iOS 7相差迥異,那爲了迎合用戶的習慣,你可能就需要做比較多的工作了。

混合型。根據其使用自定義控件的多少與其和標準控件綁定情況不同,工作量也有所區別。重新審視混合型app的時候,還要確保自定義部分和標準部分依然可以一起正常工作。

注意:如果你的app以自定義的方式模擬了iOS 6的傳統UI,那就會需要花大力氣修改了,否則它會看起來非常陳舊。

過渡工作的範圍

瞭解你的app特徵及其定製方式,能讓你大概知道怎麼進行過渡。參考下面的清單,填充上自己項目的細節,來了解整個過渡工作的範圍。

強制每個app做的事情
  1. 更新app的icon,在iOS 7中,app的圖標尺寸是120 x 120像素(高分辨率下)。
  2. 更新app的載入圖像,如果原有的載入圖像中不包含頂欄部分的話,補充上狀態欄部分的圖像。
  3. 請支持Retina屏和iPhone 5的屏幕尺寸。(譯者注:不支持就不能更新了)
  • 建議每個app做的事情
  1. 確保app的內容在透明UI元素(比如透明的bar和透明鍵盤)和透明的系統狀態欄下依然可辨識。在iOS 7中,視圖控制器統一採用了全屏視圖(參考第11頁“使用視圖控制器”)。
  2. 重新設計自定義bar的icon。iOS 7下,bar上的按鈕圖標更加輕巧,風格也有變化。
  3. 拿掉按鈕的背景圖片, 重視現有的按鈕外觀,嘗試無邊框的按鈕。
  4. 檢查app中寫死的UI數值,比如sizeposition,用系統提供的動態數值替換它們。使用Auto Layout幫助你的app完成相應佈局變化下的響應。(如果你這個菜鳥連Auto Layout都不知道是什麼的話,請自行閱讀Cocoa Auto Layout Guide
  5. 檢查app中使用UIKit的地方,看尺度和風格發生變化的控制器和視圖是否對佈局和外觀產生了影響。比如,開關更加寬了,組合式表格(grouped tables)變成通欄的了,進度指示條變成了非常細的小條。更詳細的UI元素變化,請參考21頁的“操作欄和欄上的按鈕”,第26頁的“控件”,第19頁的“內容視圖”,第32頁的“臨時視圖”。
  6. 使用動態的字體。在iOS 7中,用戶可以自由調整app中的字號大小。如果開發者使用動態字體的話,用戶在系統中設定自定義字號的時候,app的字體也會發生相應的變化。更多信息請參考12頁的“使用字體”。
  7. 確保你的app不會與系統的新增手勢產生衝突:從屏幕底部向上滑動調出控制中心的手勢,從屏幕左右邊緣向中間滑動的前進後退手勢。
  8. app樣式中慎用投影、漸變、浮雕效果。因爲iOS 7的美學重視平緩、分層——儘量少使用讓UI元素看起來擬實的視覺效果。
  9. 必要的話,將app升級到iOS 6中推薦的最佳實踐方法(如:Auto Layout和故事版)並確保app不使用廢棄的API。

現在你知道你需要做哪類事情了,瞭解更多關於視圖控制器、着色、字體的改變,請閱讀第11頁的“佈局和外觀”。

如果你仍需支持iOS6

如果你必須支持iOS 6和7兩個系統,你可以在app運行的時候檢測操作系統的版本,並隨時加載相應的資源文件。更多信息請參考第7頁的“支持iOS 6系統”。

支持iOS 6系統

如果出於商業原因必須支持iOS 6或者更早期的系統版本,你需要選擇最切合實際的方式升級app到支持iOS 7。你選擇的技術可能有所不同,但總的建議是:聚焦在首先爲iOS 7而重新設計,然後爲app考慮iOS 6版本需要做的事情。

注意:在運行iOS 7的設備上,所有的系統界面元素(比如警告對話框和通知信息)都會使用iOS 7的默認外觀,即使你的app使用更早期的外觀。

使用Interface Builder支持app多版本

Xcode 5中的Interface Builder包含了諸多新功能 ,它們能幫助你將app過渡到iOS 7的同時支持舊的版本。

看一下你對用戶界面的升級會對早期版本產生什麼樣的影響。使用Assistant Editor,可以在畫布上修改iOS 7故事版或xib文件的同時,看到這些變動會對iOS 6版本文件造成的影響。

預覽早期故事版文件和xib文件的方法:

  1. 在畫布上查看iOS 7故事版文件或者xib文件的時候,打開assistant editor。
  2. 打開Assistant彈出菜單。
  3. 在菜單中,定位到預覽項,然後選中相應故事版文件或xib文件。

預覽早期故事版文件

在iOS 7和早期版本iOS的UI預覽之間切換。如果你的app需要支持iOS 6.1之前的版本,使用這個功能來確認UI在早期版本看起來沒有問題。

在兩個版本的UI之間切換的方法:

  1. 在Interface Builder的檢查器中打開文件。
  2. 打開菜單“View as”。
  3. 選擇你想預覽的版本號。

更多關於Xcode 5中新的Interface Builder的信息,請參考“What’s New in Xcode”。

支持標準app的兩個版本

如果標準app的兩個版本使用相同的佈局,使用Auto Layout創建適用於兩個版本iOS的用戶界面。要支持多版本的iOS,指定單獨一套的常量以便Auto Layout調整故事版和xib文件中的視圖和控制器。(更多信息參考“Constraints Express Relationships Between Views”)

如果標準app的兩個版本需要使用相同的外觀,但你又沒有使用Auto Layout,那麼請使用offsets偏移量。在使用offsets前請將UI升級到iOS 7。接下來將早期UI元素的起始、高度、寬度的值指定爲iOS 7中使用的offsets偏移量。

更多Auto Layout的內容,請看“Cocoa Auto Layout Guide”。

管理混合型app中的多個版本圖片

混合型app經常包含自定義圖片資源,比如操作欄按鈕圖標,操作欄或者其他控件的視圖背景。apps可以使用一種或多種資源分類方法來管理這些資源。(瞭解更多資源分類資料,請看“Asset Catalog Help”)

注意:資源分類(asset catalog)包括顯示在app中的資源;資源分類不能包含app的icon,載入圖像,或者其他任何外部過程需要獲取到的圖片。

混合型app如果需要支持多版本iOS,則必須自己管理圖像資源。將與app各個版本的圖片分別使用不同命名。

如果你的故事版或xib文件包含嵌入式圖片,考慮創建一個圖片視圖的出口(outlet),並在需要的時候加載合適的資源。在代碼中加載不同資源的方法,參考“Loading Resources Conditionally”。

依據附加條件加載資源

有時候,你需要考慮app在什麼iOS版本上運行,才能在代碼中做出相應的對策。比如,在不同版本的app中,佈局可能是截然不同的,可以通過加載不同的故事版或xib文件來實現。你可能需要使用不同代碼來處理API之間的不同之處,比如在給操作欄背景着色的時候使用barTintColor還是tintColor。

如果你需要爲不同app版本加載不同的資源,但你只在Info.plist文件中指定了一個故事版或xib文件,那麼你也可以先檢查系統版本然後加載對應的資源(application:didFinish-LaunchingWithOptions:)

檢測app是否當前運行在iOS 7環境的方法是:寫一個宏來檢查系統版本。下面的代碼展示了檢查系統版本並存儲結果的方法(方便以後隨時調用)。

NSUInteger DeviceSystemMajorVersion();

NSUInteger DeviceSystemMajorVersion() {

static NSUInteger _deviceSystemMajorVersion = -1;

static dispatch_once_t onceToken;

dispatch_once(&onceToken, ^{

_deviceSystemMajorVersion = [[[[[UIDevice currentDevice] systemVersion] componentsSeparatedByString:@”.”] objectAtIndex:0] intValue];

});

return _deviceSystemMajorVersion;

}

#define MY_MACRO_NAME (DeviceSystemMajorVersion() < 7)

 

佈局和外觀(Layout & Appearance)

iOS 7給你的app佈局和UI帶來了不少變化。視圖控制器、着色、字體效果等的變化,會影響你的app中所有UIKit對象。

使用視圖控制器(View Controller)

在iOS 7中,視圖控制器都是全屏的。iOS 7視圖控制器的外觀給人傳達了更細膩的控制感。特別是新的全屏外觀讓你可以指定視圖的每個邊緣的佈局。

視圖控制器接口wantsFullScreenLayout已作廢。如果你像以前那樣地指定wantsFullScreenLayout = NO,iOS 7中視圖控制器會在將其內容顯示到一個意外的屏幕位置。

UIViewController提供瞭如下屬性來調整視圖控制器的外觀:

  1. edgesForExtendedLayout
    這個屬性屬於UIExtendedEdge類型,它可以單獨指定矩形的四條邊,也可以單獨指定、指定全部、全部不指定。
    使用edgesForExtendedLayout指定視圖的哪條邊需要擴展,不用理會操作欄的透明度。這個屬性的默認值是UIRectEdgeAll。
  2. extendedLayoutIncludesOpaqueBars
    如果你使用了不透明的操作欄,設置edgesForExtendedLayout的時候也請將extendedLayoutIncludesOpaqueBars的值設置爲No(默認值是YES)。
  3. automaticallyAdjustsScrollViewInsets
    如果你不想讓scroll view的內容自動調整,將這個屬性設爲NO(默認值YES)。

iOS 7中,視圖控制器支持自定義視圖之間的過場動畫。另外,你可以使用iOS 7的新API來支持過場動畫過程中的用戶交互。更多信息請參考下面兩個文檔:《UIViewController過場動畫協議參考》和《UIViewController過場交互協議參考》。

iOS 7允許視圖控制器在app運行過程中改變系統狀態欄的樣式。開啓這個功能,請在Info.plist文件中添加鍵UIViewControllerBasedStatusBarAppearance,並將值設爲YES。動態改變系統狀態欄的一個好方法是重寫preferredStatusBarStyle方法,用一個動畫模塊來更新狀態欄外觀,並調用setNeedsStatusBarAppearanceUpdate方法。

使用着色(Tint Color)

在iOS 7中,着色是UIView的一個屬性。iOS 7的app會使用着色來定義一個關鍵色,這個顏色表明“這裏是可交互的”,或者表示元素選中的狀態。

當你指定某個視圖的着色的時候,這個顏色會自動繼承到所有的子視圖中。因爲UIWindows繼承自UIView,你可以這樣通過設置窗體的着色屬性指定着色:

window.tintColor = [UIColor purpleColor];

如果不爲窗體指定着色,則會使用系統默認的顏色。

默認情況下,視圖的着色是nil,意味着視圖使用父級的着色。也就是說哪怕你不設置着色的話,視圖也總能夠獲取到一個色值。

總的來說,最好在視圖還沒有顯示到屏幕上之前指定它的着色。想讓視圖繼承上個層級的着色的話,就將着色設置爲nil。

重要:iOS 7不支持通過外觀代理API來設置着色。

當警告框(alert)和上拉菜單(action sheet)出現的時候,iOS 7自動將背後視圖的着色變暗。爲了響應該色彩變化,在渲染時使用tintColor的自定義視圖的子類需要重寫tintColorDidChange方法,以便在合適的時候刷新渲染。

注意:在iOS 6中,tintColor可以用來給導航欄的背景着色、tab欄、工具欄、搜索欄、搜索欄的範圍選擇欄着色。而在iOS 7中,給背景着色只需要使用barTintColor屬性就可以了。

使用字體(Fonts)

iOS 7引入了動態字體(Dynamic Type),它讓你的app中的字體顯示更加出色。

最小字號下的郵件正文                                      最大非殘障輔助字號下的郵件正文

不同字號下的郵件正文

使用動態字體時,同時意味着:

  1. 所有文字的粗細,字間距,行高都被自動調整。
  2. 可以語義上指定不同的文字樣式:正文、腳註、大標題等等。
  3. 對動態字體和殘障輔助超大號字體都能有很好的響應效果。

要享受動態字體的好處,請用UIFont類下的preferredFontForTextStyle方法來生成文字,而不是直接指定字體的名稱和大小。iOS 7會保證每個大小字體的最佳可讀性。

操作欄和欄上按鈕(Bars & Bar Buttons)

iOS 7中,狀態欄是透明的,其他的操作欄(導航欄、tab欄、工具欄、搜索欄、搜索欄下面的範圍選擇欄)是半透明的。通常情況下,你希望能看到操作欄背後是你的內容。

大多數操作欄會將遮蔽住的內容進行模糊處理,除非你提供一張自定義背景圖。

爲了標識操作欄的位置,iOS 7引入了barPosition屬性,它可以幫助你指定什麼時候自定義背景圖片需要平鋪在狀態欄上。值UIBarPositionTopAttached表明操作欄貼近屏幕頂部,背景向上延伸入系統狀態欄區域。相對的,值UIBarPositionTop表示操作欄位於當前局部內容的頂部(比如,在彈出式氣泡的頂部)它不爲狀態欄提供背景。

默認情況下,所有的欄上按鈕都是無邊框的。詳情請看第18頁的“欄上按鈕”。

系統狀態欄(Status Bar)

因爲系統狀態欄是透明的,所以可以透過它看到後面的視圖。狀態欄的風格依照它內容的外觀呈現,包括時間、電量、Wi-Fi信號等。使用常量UIStatusBarStyle來指定使用黑色風格還是白色風格:

UIStatusBarStyleDefault 顯示黑色的文字內容。當狀態欄後面的內容是淡色的時候適合使用。
UIStatusBarStyleDefault
UIStatusBarStyleLightContent 顯示白色的文字內容。當狀態欄後面的內容是深色時使用比較合適。
UIStatusBarStyleLightContent
有些情況下,導航欄和搜索欄的背景圖片可以向上延伸到狀態欄背後(詳情見22頁的“導航欄”章節和23頁的“搜索欄和範圍選擇欄”章節)。如果狀態欄下面沒有其他欄,內容視圖需要使用全屏高度。要了解視圖控制器是怎樣恰當地佈局的,請看11頁的“使用視圖控制器”。在iOS 7中,通過獨立的視圖控制器,可以在app運行的時候改變狀態欄的風格。實現方法是在Info.plist中加入鍵UIViewControllerBasedStatusBarAppearance,並設置值爲YES。

  • 導航欄(Navigation Bar)
  • 導航欄幫助用戶在不同信息層次結構中穿梭,並選擇性地管理屏幕內容。

iOS 7                                                          iOS 6

標題欄

  • 表格1
    iOS 7 讓在導航欄上增加搜索欄的變得非常簡單。詳情參考第16頁的“搜索欄和範圍選擇欄”。*  如果想用自定義的圖像來替換返回的箭頭“<”的話,還需自己創建一個相應的遮罩。在導航過場動畫的時候,iOS 7使用遮罩來讓上個層級的標題漸隱漸出。瞭解更多返回按鈕和遮罩圖像的控制屬性,請參閱 “UINavigationBar類參考” 

如果你使用UIBarPositionTopAttached樣式創建了一個導航欄背景,確保圖像包含了系統狀態欄的區域。具體來說,你需要一個高分辨率下128像素的圖像。

下面這個表格描述了iOS 7如何對待不同高度的可變導航欄背景。(更多請看“UIImage類參考”) 

表格 5-1 可變大小的背景圖片處理策略

表格2
搜索欄和範圍選擇欄(Search Bar & Scope Bar)
避免使用超高的背景圖片來製作導航欄下面的自定義投影,這種技術在iOS 7中不起作用,因爲超高的圖片會向上(系統狀態欄方向)擴展,而不是向下(導航欄下面)擴展。如果你想給導航欄增加投影,可以創建一個自定義圖片,然後使用shadowImage屬性來自定義投影圖片。

搜索欄接收用戶輸入的文字,下方可以附帶一個範圍選擇欄。

iOS 7                                                          iOS 6

搜索欄和範圍選擇欄

表格3
在iOS 7中,UISearchDisplayController包含了displaySearchBarInNavigationBar屬性,這樣你就可以將搜索欄放進導航欄,就像日曆app裏面這樣:如果你使用UIBarPositionTopAttached的位置爲搜索欄創建了一個背景圖片,請確保圖片的高度包含了狀態欄的高度。如果你創建了一個可變大小的背景圖片,參閱15頁的表格5-1獲取更多iOS 7調整背景圖片大小的策略。 

日曆app

範圍選擇欄則允許用戶選擇搜索結果的範圍。

注意:範圍選擇欄不能單獨出現;必須依附在搜索欄下面出現。

iOS 7                                                          iOS 6

範圍選擇欄

表格4

Tab欄(Tab Bar)

Tab欄讓用戶可以在不同子任務、視圖、模式之間切換。

iOS 7                                                          iOS 6

Tab欄

表格5

如果使用了自定義icon的話,可以使用UITabBarItem中的selectedImage屬性來設置按下狀態的圖像。如果不提供按下狀態的icon,則兩個狀態會使用相同icon。

工具欄(Toolbar)

工具欄上放置當前屏幕或者視圖下相關的對象的操作按鈕。

iOS 7                                                          iOS 6

工具欄

表格6

如果你創建了可變大小的背景圖片,請參考15頁的表格5-1獲取iOS 7處理不同尺寸圖片的細節。

欄上按鈕(Bar Buttons)

在iOS 6中,欄上按鈕可以是有邊框的,也可以是無邊框的。在iOS 7中只能是無邊框的。

iOS 7中的導航欄按鈕                                iOS 6中的導航欄按鈕

欄上按鈕

爲了更加明確,在iOS 7中,app的欄上按鈕經常使用文字而不是圖形。例如,iOS 7中的日曆應用使用了Inbox(收件箱)代替了收件箱圖形:

iOS 7                                                          iOS 6

日曆應用

在早期版本的iOS中,自定義欄上按鈕圖片會自動被當做“template image”。(template image被用作最終圖像的一個遮罩。)而iOS 7中,你可以使用以下UIImage屬性來指定是否需要把自定義的圖片當做template image來處理:

  1. UIImageRenderingModeAlwaysTemplate。圖片被用作Template Image。
  2. UIImageRenderingModeAlwaysOriginal。圖片按照原樣渲染。

如果你沒有指定對圖片的處理方法的話,圖片會使用包含它的視圖的默認處理方式。比如,tab欄默認會使用template處理方式,而進度滑塊則會使用原樣完整渲染的處理方式。

注意:template image會依照其父結構的着色進行着色(更多請看18頁的“使用着色”)。如果不想讓欄上的元素被着色,爲圖片設置UIImageRendering-ModeAlwaysOriginal屬性。

內容視圖(Content View)

內容視圖用來顯示自定義的app內容。因爲大多數內容視圖的外觀系統都沒有提供,所以iOS 7視覺上的變化對他們幾乎沒有影響。有個比較大的例外是分組聚合表格視圖,它在iOS 7上外觀有巨大的變化。

活動菜單(Activity)

活動菜單代表了一個可以響應當前選擇內容的功能,它可以是系統提供的或者自定義的。用戶可以通過系統提供的活動視圖控制器來使用這些功能,當用戶點擊分享按鈕的時候,活動視圖控制器就會從屏幕底部向上升起。

系統提供的活動菜單中可以提供兩種風格的按鈕:

  1. 原樣渲染的app圖標——比如下面這個郵件的icon
  2. 和tab欄上的按鈕一樣的風格——比如下面複製、打印這樣的icon

第三方功能總是使用第二種風格的icon。

活動菜單

如果要在你的app中提供某個服務,創建一個簡潔、線框狀的template image。創建template image的時候請遵守下述指導原則:

  1. 使用黑色或者白色,配合適當的alpha透明度
  2. 不要使用投影
  3. 使用抗鋸齒效果

活動菜單上的template image應該在區域中居中,分辨率大約在70 x 70像素左右。

集合視圖(Collection View)

集合視圖用來管理和有序排列項目,將它們以可定製的佈局進行呈現。

在iOS 7中,集合視圖支持自定義過場動畫。瞭解更多請參考“UICollectionViewTransition-Layout類參考”。

照片應用使用了集合視圖來展示圖片集,並支持他們之間的過場動畫。

集合視圖

圖片視圖(Image View)

圖片視圖顯示一張圖片或者一系列動態的圖片。

在iOS 7中,UIImageView包含了着色屬性tintColor。當圖片視圖包含template image的時候,tintColor會被應用到圖片上。

地圖視圖(Map View)

地圖視圖展示地理數據,支持自帶地圖應用的大多數功能。

照片應用中的地圖視圖幫助用戶查看照片的地理位置信息。

地圖視圖

在iOS 7,只能夠使用一個新的類MKOverlayRenderer來在地圖視圖上面創建覆蓋層。

如果要給地圖視圖增加3D外觀的話,只需給它的camera屬性分配一個相機對象即可(MKMapCamera的一個實例)。要了解更多,參考“MKMapView類參考”。

頁面視圖控制器(Page View Controller)

頁面視圖控制器用來管理多頁的內容,可以使用滾動過場,也可以使用卷頁過場動畫。

在iOS 7中,使用兩個方法來分別指定(pageViewControllerPreferredInterfaceOrientationForPresentation和pageViewControllerSupportedInterfaceOrientations)。

下面可以看到iOS 7模擬器中頁面視圖控制器的默認外觀:

頁面視圖控制器

滾動視圖(Scroll View)

滾動視圖幫助用戶查看超出視圖邊界的內容。滾動視圖在iOS 6和7上視覺唯一的不同是滾動條的外觀。

iOS 7                                                          iOS 6

滾動視圖

在iOS 7上,你可以通過UIViewController的automaticallyAdjustsScrollViewInsets屬性來管理滾動視圖的項目分組之間的間隔。

表格視圖(Table View)

表格視圖將數據以多行單列的列表呈現。

iOS 7爲單行和成組的表格視圖引入了新的變化。

iOS 7(表格組)                                                iOS 6(表格組)

表格視圖

表格7

表格視圖中的元素在iOS 7中也有了不同的樣式。

表格8

文本視圖(Text View)

文本視圖接受和顯示多行文本。

請使用UIFont類的preferredFontForTextStyle方法獲取文本視圖中顯示的文字內容。

網頁視圖(Web View)

網頁視圖是可以顯示富HTML內容的區域。

在iOS 7中,UIWebView支持顯示分頁外觀的內容的顯示。

控件(Controls)

控件是種特殊的UI元素,用戶既可以看(獲取信息)也可以與之交互(操作它)。所有的iOS 7控件的外觀都得到了升級,它們大多數都有了新的尺度。

因爲UIControl是從UIView繼承而來,你可以使用控件的tintColor屬性來爲它們着色。更多內容請參閱第11頁的“使用着色”。

系統提供的控件默認支持系統定義的動效,外觀也會隨着高亮和選中狀態的變化而變化。

日期拾取器(Date Picker)

日期拾取器顯示了日期和時間的內容,包括:分鐘,小時,日期,年份。它的整體尺寸和iOS 6比起來沒有變化,但是外觀發生了巨大的變化。

日期拾取器

iOS 7的app會將日期拾取器嵌入到內容中,而不是單獨呈現在一個彈出的視圖上。比如日曆應用動態地將表格的一行擴展開,將日期拾取器嵌入,用戶指定時間的時候就不需要離開當前這個添加事項視圖。

日期拾取器嵌入到內容中

新增聯繫人按鈕(Contact Add Button)

新增聯繫人按鈕是一個UIButtonTypeContactAdd類型的UIButton,它可以將用戶的信息添加到其他基於文字視圖的文字域中。

新增聯繫人按鈕的大小和外觀在iOS 7中有變化。

iOS 7               iOS 6

新增聯繫人按鈕

細節展開按鈕(Detail Disclosure Button)

細節展開按鈕是一個UIButtonTypeDetailDisclosure類型的UIButton,它表明當前項目還有額外的細節和相關功能,點擊後會在另一個表格或視圖中呈現。在iOS 7中,細節展開按鈕使用和Info按鈕一樣的符號。

iOS 7               iOS 6

細節展開按鈕

當細節展開按鈕出現在表格的一行中,點擊該行的其它地方不會激活該按鈕;相反地,這個操作會選中該行,或者觸發app定義的行爲。

Info按鈕(Info Button)

Info按鈕的類型是UIButtonTypeInfoLight或者UIButtonTypeInfoDark。它表明app的配置細節入口,新頁面有時候出現在當前視圖的背面。在iOS 7中,info按鈕使用和細節展開按鈕相同的圖形。

在iOS 7中,info按鈕的大小和外觀發生了變化。

iOS 7            iOS 6(天氣應用中的)

Info按鈕

文本標籤(Label)

文本標籤用來呈現靜態文本。

默認情況下,文本標籤會使用系統字體,所以在iOS 6和7上會看起來不一樣。

iOS 7                                                                  iOS 6

文本標籤

確保使用UIFont的方法preferredFontForTextStyle來獲取顯示在標籤上的文字。

頁碼控件(Page Control)

頁碼控件指示打開了多少視圖,當前看到的是哪一個。

iOS 7中,頁碼控件的大小和外觀發生了變化。

iOS 7(天氣應用中的)                     iOS 6(天氣應用中的)

頁碼控件

拾取器(Picker)

拾取器顯示一系列值,用戶可以滾動並選擇其一。

拾取器的總體大小相比iOS 6沒有變化;外觀和行爲與日期時間拾取器是一致的。

iOS 7                                                                  iOS 6

拾取器

進度視圖(Progress View)

進度視圖用來展示任務和過程的進度。

進度視圖的大小和外觀(下圖是在自帶郵件客戶端中的)在iOS 7中發生了變化。

iOS 7                                                                  iOS 6

進度視圖

刷新控件(Refresh Control)

刷新控件響應用戶主動觸發的刷新操作,一般會出現在表格上。

它的大小和外觀在iOS 7中發生了變化。

iOS 7                                                                  iOS 6

刷新控件

圓角矩形按鈕(Rounded Rectangle Button)

圓角矩形按鈕在iOS 7中被棄用了。用系統的無邊界按鈕替代它。對應的類型是UIButtonTypeSystem的UIButton。

iOS 7系統按鈕不包括倒角和背景樣式。系統按鈕可以包含一個圖形或者文字信息,可以指定一種着色或者繼承父級的着色。

iOS 7系統按鈕            iOS 6的圓角矩形按鈕

圓角矩形按鈕

注意:在iOS 7中,UIButtonTypeRoundedRect被重新定義成UIButtonType-System。在iOS 6中使用圓角矩形按鈕的app會自動轉化成系統按鈕的外觀。

如果你需要顯示一個包含倒角的按鈕,使用UIButtonTypeCustom類型的按鈕,這個類型支持自定義背景圖片。

分段控件(Segmented Control)

分段控件是由一系列分段構成的,每個段的功能相當於一個按鈕,每個按鈕點擊後都展示一個不同的視圖。

分段控件的大小和樣式在iOS 7中的變化如下。

iOS 7                                                                  iOS 6

分段控件

在iOS 7中,分段控件使用單一的樣式,segmentedControlStyle屬性不再使用。

滑動器(Slider)

滑動器讓用戶可以在允許的範圍內連續調整某個值。

在iOS 7中的大小和樣式如下。

iOS 7                                                                  iOS 6

滑動器

iOS 7中依然可以對最小和最大軌道圖像按下狀態使用着色,使用三個屬性來操作(minimumTrackTintColor,maximumTrackTintColor和thumbTintColor)。如果你將minimumTrackColor屬性設爲nil,則該區域會繼承父級的着色;如果設置maximumTrackTintColor或thumbTintColor的值爲nil的話,兩個區域都會使用默認顏色。

步進器(Stepper)

步進器可以將某個值增減一個常數值。

它在iOS 7中的大小和外觀發生了變化。

iOS 7                       iOS 6

步進器

在iOS 7中,默認情況下,步進器將自定義增減位置的圖像視爲template image。

開關(Switch)

開關用來表示兩個互斥的選項或狀態(最常在表格視圖中使用)。

在iOS 7中的變化如下。

iOS 7                       iOS 6

開關

iOS 7繼續可以對開、關、不可用三個狀態使用着色。按下狀態則使用下面三個屬性着色:onTintColor,tintColor和thumbTintColor。

在iOS 7中,默認情況中自定義的開關圖像會被忽略。

文本域(Text Field)

文本域接受用戶的單行輸入。

它在iOS 7中的大小和外觀有如下變化。

iOS 7(地圖中的兩行文字域)                     iOS 6( 地圖中的兩行文字域)

文本域

確保使用UIFont的preferredFontForTextStyle方法來獲取和顯示文字域中的文字。

 

臨時視圖(Temporary Views)

動作列表,警告對話框,模態視圖是三種臨時視圖,它們在需要用戶特別注意的時候、或提供額外的選擇或者功能的時候會出現。

雖然動作列表和警告對話框的內容可以自定義,它們的外觀能做的自定義很少。因此你幾乎不用考慮怎麼讓它們在iOS 7上看起來更美觀。

因爲模態視圖本質上是視圖的一種,你可能也需要重新設計一下模態視圖,讓它們在iOS 7上看起來更適宜。

注意:當臨時視圖出現的時候,iOS 7自動將背後那個標準視圖變暗。你可能需要調整一下你的代碼來處理這種顏色的變化;更多信息請看第18頁的“使用着色”。

動作列表(Action Sheet)

動作列表用來呈現一系列用戶觸發的任務的選擇。

在iOS 7中,默認情況動作列表是透明的,包括無邊框的按鈕。

iOS 7                                                                  iOS 6

動作列表

iOS 7中,常量UIActionSheetStyle不再使用。在iOS 7設備上,不管系統提供的UI(如動作列表的UI)是怎樣的,都會一律使用iOS 7的默認外觀。

注意動作列表中潛在危險的選項——destructiveButtonTitle中參數initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles指定的——自動使用系統紅色。

警告對話框(Alert)

警告對話框呈現給用戶影響他們使用app或者設備的重要信息。

外觀在iOS 7上看起來是這樣的。

iOS 7                                                                  iOS 6

警告對話框

在iOS 7設備中,系統提供的UI(比如警告框)使用系統提供的樣式,不管當前運行的app樣式是怎樣的。

如果你的警告對話框有三個按鈕,第三個按鈕會顯示在這兩個主按鈕下面一排。

模態視圖(Modal View)

模態視圖提供了當前任務或工作流的自承載的功能。

在iOS 7中,系統提供的模態視圖使用和以前相同的外觀。

iOS 7                                                                  iOS 6

模態視圖

在iOS 7中,你可以使用自定義的對象和選擇性交互控制器對象來管理模態展現。瞭解更多自定義視圖控制器的過場動畫,請參考UIViewControllerAnimatorTransitioning協議參考和UIViewControllerInteractiveTransitioning協議參考。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章