iOS 7 使用者介面概觀

iOS 7 引進大量使用者介面變更。 本文強調一些較大的變更，無論是控件的視覺外觀，還是支援新設計的 API。

iOS 7 著重於透過 Chrome 的內容。 iOS 7 中的使用者介面元素會藉由移除外部框線、狀態列和導覽列等屬性來取消強調 Chrome，以減少內容檢視所使用的螢幕空間量。 在 iOS 7 中，內容是設計來使用整個畫面。

iOS 7 引進了數項其他變更：色彩可用來區分使用者介面元素，而不是按鈕框線等屬性。 許多元素，例如導覽列和狀態列，現在要麼模糊和半透明，要麼透明，內容檢視會佔用其下方的區域。 這些內容檢視會透過模糊的橫條呈現，並傳達使用者介面中的深度感覺。

本文涵蓋 iOS 7 中使用者介面元素的數項變更，以及與新使用者介面設計相關的各種 API。

檢視和控制變更

UIKit 中的所有檢視都符合 iOS 7 的新外觀和風格。 本節將重點說明這些檢視的一些變更，以及已變更以支援新 UI 的相關 API。

UIButton

從 類別建立的 UIButton 按鈕現在為無框線，預設沒有背景，如下所示：

樣式 UIButtonType.RoundedRect 已被取代。 如果在 iOS 7 中使用 ， UIButtonType.RoundedRect 將會產生 UIButtonType.System 預設按鈕樣式，且沒有背景或可見邊緣，如上所示。

UIBarButtonItem

類似於 UIButton，列按鈕也是無框線的，預設為如下所示的新 UIBarButtonItemStyle.Plain 樣式：

此外，樣式 UIBarButtonItemStyle.Bordered 已被取代。 在 iOS 7 中設定 UIBarButtonItemStyle.Bordered 會導致 UIBarButtonItemStyle.Plain 使用樣式。

樣式 UIBarButtonItemStyle.Done 尚未過時。 不過，它也會建立無框線按鈕，只會使用粗體文字樣式，如下所示：

UIAlertView

除了新 iOS 7 的外觀和風格變更之外，警示檢視不再支援透過子檢視自定義。 即使 UIAlertView 繼承自 UIView，呼叫 AddSubview 上的 UIAlertView 也不會有任何作用。 例如，請考慮下列程式碼：

UIBarButtonItem button = new UIBarButtonItem ("Bar Button", UIBarButtonItemStyle.Plain, (s,e) =>
{
    UIAlertView alert = new UIAlertView ("Title", "Message", null, "Cancel", "OK");

    alert.AddSubview (new UIView () {
        Frame = new CGRect(50, 50,100, 100),
        BackgroundColor = UIColor.Green
    });

    alert.Show ();
});

這會產生標準警示檢視，並忽略子檢視，如下所示：

注意：iOS 8 中 UIAlertView 已被取代。 在 iOS 8 和更新版本中使用警示檢視來檢視警示控制器 配方。

UISegmentedControl

iOS 7 中的分段控件是透明且支援色調色彩。 色調色彩用於文字和框線色彩。 選取區段時，會在背景與文字之間交換色彩，並搭配用來反白顯示選取區段的色調色彩，如下所示：

此外， UISegmentedControlStyle iOS 7 中已被取代。

選擇器檢視

選擇器檢視的 API 基本上不會變更;不過，iOS 7 設計指導方針現在的狀態選擇器檢視應該內嵌呈現，而不是從螢幕底部動畫顯示的輸入檢視，或透過推入流覽控制器堆疊的新控制器，如同先前的 iOS 版本一樣。 這可以在系統行事曆應用程式中看到：

UISearchDisplayController

當 屬性設定為 true 時 UISearchDisplayController.DisplaysSearchBarInNavigationBar ，搜尋列現在會顯示在導覽列內。 當設定為 false - 預設值 - 顯示搜尋控制器時，導覽列會隱藏。

下列螢幕快照顯示 中的 UISearchDisplayController搜尋列：

UITableView

周圍的 UITableView API 主要不會變更;不過，樣式已大幅變更，以符合新的使用者介面設計。 內部檢視階層也有些不同。 這項變更不會影響大部分的應用程式，但需要注意。

群組表格樣式

已變更群組樣式，內容現在會延伸至畫面邊緣，如下所示：

SeparatorInset

現在可以藉由設定 UITableVIewCell.SeparatorInset 屬性來縮排數據列分隔符。 例如，下列程式代碼將用來縮排左邊緣的儲存格：

cell.SeparatorInset = new UIEdgeInsets (0, 50, 0, 0);

這會在具有縮排單元格的數據表檢視中產生，如下所示：

表格按鈕樣式

數據表檢視中使用的各種按鈕都已全部變更。 下列螢幕快照會以編輯模式呈現資料表檢視：

其他控件變更

其他UIKit控件也已變更，包括滑桿、開關和階梯。 這些變更純粹是視覺上的。 如需詳細資訊，請參閱Apple的 iOS 7 UI轉換指南。

一般使用者介面變更

除了UIKit中的變更之外，iOS 7 還對UI引進了各種視覺效果變更，包括：

• 全螢幕內容
• 直方圖外觀
• 色調色彩

全螢幕內容

iOS 7 的設計目的是讓應用程式充分利用整個螢幕。 檢視控制器現在會與狀態列重疊，如果存在，則與出現在狀態和導覽列下方相反。

當您準備 iOS 7 的應用程式時，您可以使用 Interface Builder 或 Xamarin iOS 設計工具，以可視化方式重新調整子檢視。 您也可以使用其中一個新的 API，以程式設計方式處理全螢幕內容。 以下介紹這些 API。

TopLayoutGuide 和 BottomLayoutGuide

TopLayoutGuide 和 BottomLayoutGuide 作為檢視應開始或結束位置的參考，因此內容不會由半透明 UIKit 列重疊，如下列範例所示：

這些 API 可用來計算畫面頂端或底部檢視的位移，並據以調整內容放置：

public override void ViewDidLayoutSubviews ()
{
    base.ViewDidLayoutSubviews ();

    if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) {
        nfloat displacement_y = this.TopLayoutGuide.Length;

        //load subviews with displacement
    }

}

我們可以使用上述計算的值來設定畫面 ImageView頂端的位移，因此可以看到整個影像：

當 View 新增至階層之後，就會動態產生位移值，因此嘗試讀取 TopLayoutGuide 和 BottomLayoutGuide 中的 ViewDidLoad 值會傳回 0。 計算檢視載入之後的值，例如 ，在中 ViewDidLayoutSubviews。

重要

TopLayoutGuide 和 BottomLayoutGuide 在 iOS 11 中已被取代，有利於新的安全區域配置。 Apple 表示，使用安全區域與 iOS 11 之前的 iOS 版本相容。 如需詳細資訊，請參閱 更新適用於 iOS 11 的應用程式指南。

EdgesForExtendedLayout

此 API 會指定檢視的邊緣應該延伸至全螢幕，而不論橫條半透明。 在 iOS 7 中，導覽列和工具列會顯示在控制器檢視上方的分層，與先前的 iOS 版本不同，它們不會佔用相同的空間。 iOS 7 Photos 應用程式說明預設值 UIViewController.EdgesForExtendedLayoutUIRectEdge.All。 此設定會以內容填滿檢視中的所有四個邊緣，並建立重疊和全螢幕效果：

點選影像會移除橫條，並顯示全螢幕影像：

因為全螢幕內容是預設值，針對iOS 6 設定的應用程式將會有部分剪下檢視，如下列螢幕快照所示：

修改屬性會 UIViewController.EdgesForExtendedLayout 針對此行為進行調整。 我們可以指定檢視不會填滿任何邊緣，因此我們的檢視會避免在流覽或工具列所佔用的空間中顯示內容（每個方向）：

if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) {
    this.EdgesForExtendedLayout = UIRectEdge.None;
}

在我們的應用程式中，我們將再次看到檢視重新置放，因此會顯示整個影像：

請注意，雖然 和 EdgesForExtendedLayout API 的效果TopLayoutGuide/BottomLayoutGuide很類似，但它們是為了填滿不同的目標。 從預設值變更 EdgesForExtendedLayout 設定可能會修正針對 iOS 6 所設計的應用程式中裁剪的檢視，但良好的 iOS 7 設計應該接受全螢幕美學，並提供全螢幕檢視體驗，並依賴 TopLayoutGuide 並 BottomLayoutGuide 適當地放置要操作為用戶舒適位置的內容。

狀態和導覽列

狀態列和導覽列會以透明度呈現。 狀態列是透明的，而工具列和導覽列是半透明和模糊的，以傳達使用者介面中的深度感覺。 下列螢幕快照顯示此模糊和透明度，其中集合檢視的藍色背景色彩會透過狀態和導覽列顯示，讓它們呈現淺藍色的外觀：

狀態欄樣式

除了模糊和透明度之外，狀態列的前景可以是淺色或深色（暗為預設值）。 您可以從檢視控制器設定狀態列樣式。 檢視控制器也可以設定狀態列是隱藏還是顯示。

例如，下列程式代碼會 PreferredStatusBarStyle 覆寫檢視控制器的 方法，讓狀態列顯示淺色前景：

public override UIStatusBarStyle PreferredStatusBarStyle ()
{
    return UIStatusBarStyle.LightContent;
}

這會導致狀態列如下所示：

若要從檢視控制器的程式代碼隱藏狀態列，請覆寫 PrefersStatusBarHidden，如下所示：

public override bool PrefersStatusBarHidden ()
{
    return true;
}

這會隱藏狀態列：

色調色彩

按鈕現在會顯示為無 Chrome 文字。 文字色彩可以使用 上的UIView新 TintColor 屬性來控制。 設定 會將 TintColor 色彩套用至設定該檢視的整個檢視階層。 若要在整個應用程式中套用 TintColor，請將它設定在 Window上。 您也可以透過 UIView.TintColorDidChange 方法偵測色調色彩何時變更。

例如，下列螢幕快照顯示將流覽控制器檢視上的色調色彩變更為紫色的效果：

當 設定UIImageRenderingMode.AlwaysTemplate為 時RenderingMode，也可以將色調色彩套用至影像。

重要

無法使用 來設定 UIAppearance色調色彩。

動態類型

在 iOS 7 中，用戶可以在系統設定中指定文字大小。 使用動態類型時，不論大小為何，字型都會動態調整為外觀良好。 UIFont.PreferredFontForTextStyle 應該用來取得針對使用者控制的大小優化的字型。

摘要

本文涵蓋 iOS 7 中使用者介面元素的變更。 它會檢查 UIKit 中檢視和控件所做的數項變更，並醒目提示視覺效果變更，以及相關 API 的變更。 最後，它會引進新的 API，以使用全螢幕內容、新的色調色彩支援，以及動態類型。