iOS 10 中的搜尋和主畫面小工具增強功能

本文涵蓋 Apple 在 iOS 10 中對 Widget 系統所做的增強功能。

Apple 已對 Widget 系統引進數項增強功能，以確保小工具在任何存在於新 iOS 10 鎖定畫面的背景上看起來都很棒。 此外，小工具現在包含 NCWidgetDisplayMode 屬性，可讓開發人員描述有多少可用內容，並允許使用者展開和折疊內容。

小工具（也稱為今日延伸模組）是一種特殊的iOS擴充功能類型，可顯示少量有用的資訊，或及時公開應用程式特定功能。 例如，新聞應用程式有一個小工具可顯示頭條新聞，而行事曆應用程式提供兩個不同的小工具：一個用來顯示今天的事件，另一個用來顯示即將發生的事件。

小工具可高度自定義，且可能包含文字、影像、按鈕等UI元素。此外，開發人員也可以進一步自定義其小工具的配置。

使用者可以檢視應用程式 Widget 並與其互動的兩個主要位置：

• 搜尋畫面 - 使用者可以將他們找到最有用的小工具新增至搜尋畫面。 搜尋畫面可透過在 [首頁] 和 [鎖定] 畫面上向右撥動來存取。
• 主畫面 - 從主畫面，用戶可以使用 3D Touch 開啟快速動作清單，方法是將壓力套用至應用程式的圖示。 應用程式的小工具會顯示在 [快速動作清單] 上方。 如需詳細資訊，請參閱 3D Touch 簡介檔。

Widget 開發人員建議

在理想情況下，開發人員應該一律嘗試並設計使用者想要新增至其搜尋畫面的小工具。 為此，Apple 有下列建議：

• 建立絕佳的快速瀏覽體驗 - 使用者想要提供狀態更新簡短、快速瀏覽資訊的 Widget，或讓他們快速執行簡單的工作。 這使得提供正確的資訊和互動性是不可或缺的。 盡可能允許使用者使用單一點選來執行指定的工作。 此外，由於 Widget 不支援行動瀏覽或捲動，因此在 Widget 的設計中必須考慮這一點。
• 快速顯示內容 - 小工具的設計可一目了然，因此使用者一旦顯示小工具，就不應該等到內容載入。 小工具應該在本機快取其內容，以便在背景載入新內容時顯示最近的內容。
• 提供適當的邊框間距和邊界 - 小工具不應該看起來擁擠，因此請避免將內容延伸至 Widget 檢視的邊緣。 邊緣與內容之間一律應該有數個像素寬的邊界。 Apple 也建議使用顯示在 Widget 頂端的應用程式圖示作為對齊指南。 如果 Widget 呈現網格線配置，請確定網格線中的專案之間有適當的邊框間距，並嘗試將項目數目限制為 4 個最大值。
• 使用可調整的版面配置 - 小工具的寬度會根據執行裝置的裝置和裝置方向而有所不同。 如果小工具的高度顯示在 [折疊] 或 [預設] 或 [展開] 或 [所有小工具] 狀態中，則小工具的高度也會有所不同。 折疊小工具的高度大約為兩個半標準 iOS 數據表數據列。 開發人員可以要求展開小工具的大小，但最好小於螢幕的高度。 在折迭狀態中，小工具應該只顯示必要的獨立資訊。 展開時，Widget 應該會顯示補充資訊，以增強以折疊狀態顯示的主要內容。 快速動作清單中顯示的小工具只會處於折迭狀態。
• 請勿自定義小工具的背景 - 小工具會顯示在系統提供的淺色模糊背景上。 這樣做是為了促進 Widget 之間的一致性，並改善其內容的可讀性。 請避免使用影像做為 Widget 背景，因為它可能會與使用者的鎖定和主畫面背景衝突。
• 使用黑色或深灰色 的系統字型 - 在 Widget 中顯示文字時，系統字型效果最佳。 字型應為黑色或深灰色，以醒目提示淺色、模糊的小工具背景。
• 適當時 提供應用程式存取 - Widget 應該一律與其應用程式分開運作，不過，如果需要更深入的功能，Widget 應該能夠啟動應用程式來查看或編輯特定資訊片段。 絕對不要包含 [開啟的應用程式] 按鈕，只要允許使用者點選內容本身，再也不會開啟第三方應用程式。
• 選取清楚、精簡的小工具名稱 - 應用程式圖示和 Widget 的名稱一律會顯示在 Widget 的內容上。 Apple 建議將應用程式的名稱用於其主要 Widget，並為它提供的任何其他工具提供清楚、簡潔的名稱。 提供自定義小工具標題時，其前面應加上應用程式的名稱（例如 地圖 附近、地圖 餐廳等）。
• 當驗證新增值 時通知 - 如果只有使用者通過驗證並登入時，才可使用其他功能或資訊，請向使用者顯示此專案。 例如，乘坐共用應用程式可能會說「登入預約車程」。
• 選取快速動作清單小工具 - 如果應用程式提供一個以上的小工具 ，開發人員應該選擇當使用者使用 3D Touch 將壓力套用至應用程式圖示時要呈現的快速動作清單。

如需使用小工具的詳細資訊，請參閱我們的 擴充功能簡介、 3D Touch 簡介檔和 Apple 的應用程式延伸模組程式設計指南。

使用 Vibrancy

Vibrancy 可確保小工具的文字在小工具的光線、模糊的背景上呈現時保持清晰（由系統提供）。 在 iOS 10 之前，開發人員會針對小工具的活力使用 NotificationCenterVibrancyEffect 。 例如：

// DEPRECATED: Get Widget Vibrancy Effect
var vibrancy = UIVibrancyEffect.CreateForNotificationCenter ();

這在 iOS 10 中已被取代，且應該取代為 WidgetPrimaryVibrancyEffect 或 WidgetSecondaryVibrancyEffect。 例如：

// Get Primary Widget Vibrancy Effect
var vibrancy = UIVibrancyEffect.CreatePrimaryVibrancyEffectForNotificationCenter ();

// Get Secondary Widget Vibrancy Effect
var vibrancy2 = UIVibrancyEffect.CreateSecondaryVibrancyEffectForNotificationCenter ();

使用折疊和展開的小工具

iOS 10 的新功能，小工具現在包含 NCWidgetDisplayMode 屬性，可讓開發人員描述有多少可用內容，並允許用戶展開和折疊內容。

一開始顯示 Widget 時，它處於折迭狀態。 折疊小工具的高度大約為兩個半標準 iOS 數據表數據列。 開發人員可以要求展開小工具的大小，但最好小於螢幕的高度。

在折迭狀態中，小工具應該只顯示必要的獨立資訊。 展開時，Widget 應該會顯示補充資訊，以增強以折疊狀態顯示的主要內容。 例如，Weather 應用程式會顯示折疊時的目前天氣狀況，並在展開時新增每小時預測。

快速動作清單中顯示的小工具只會處於折迭狀態。 如果應用程式提供一個以上的 Widget，開發人員應該選擇當使用者使用 3D Touch 將壓力套用至應用程式圖示時要呈現的快速動作清單。

下列範例是處理 Collapsed 和 Expanded 狀態的簡單 Today Extension （Widget）：

using System;
using NotificationCenter;
using Foundation;
using UIKit;
using CoreGraphics;

namespace MonkeyAbout
{
    public partial class TodayViewController : UIViewController, INCWidgetProviding
    {
        protected TodayViewController (IntPtr handle) : base (handle)
        {
            // Note: this .ctor should not contain any initialization logic.
        }

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

            // Tell widget it can be expanded
            ExtensionContext.SetWidgetLargestAvailableDisplayMode (NCWidgetDisplayMode.Expanded);

            // Get the maximum size
            var maxSize = ExtensionContext.GetWidgetMaximumSize (NCWidgetDisplayMode.Expanded);
        }

        [Export ("widgetPerformUpdateWithCompletionHandler:")]
        public void WidgetPerformUpdate (Action<NCUpdateResult> completionHandler)
        {
            // Take action based on the display mode
            switch (ExtensionContext.GetWidgetActiveDisplayMode()) {
            case NCWidgetDisplayMode.Compact:
                Content.Text = "Let's Monkey About!";
                break;
            case NCWidgetDisplayMode.Expanded:
                Content.Text = "Gorilla!!!!";
                break;
            }

            // Report results
            // If an error is encoutered, use NCUpdateResultFailed
            // If there's no update required, use NCUpdateResultNoData
            // If there's an update, use NCUpdateResultNewData
            completionHandler (NCUpdateResult.NewData);
        }

        [Export ("widgetActiveDisplayModeDidChange:withMaximumSize:")]
        public void WidgetActiveDisplayModeDidChange (NCWidgetDisplayMode activeDisplayMode, CGSize maxSize)
        {
            // Take action based on the display mode
            switch (activeDisplayMode) {
            case NCWidgetDisplayMode.Compact:
                PreferredContentSize = maxSize;
                Content.Text = "Let's Monkey About!";
                break;
            case NCWidgetDisplayMode.Expanded:
                PreferredContentSize = new CGSize (0, 200);
                Content.Text = "Gorilla!!!!";
                break;
            }
        }

    }
}

詳細查看小工具顯示模式特定程序代碼。 若要通知系統此 Widget 支援展開狀態，它會使用：

// Tell widget it can be expanded
ExtensionContext.SetWidgetLargestAvailableDisplayMode (NCWidgetDisplayMode.Expanded);

若要取得 Widget 目前的顯示模式，它會使用：

ExtensionContext.GetWidgetActiveDisplayMode()

若要取得 Collapsed 或 Expanded 狀態的大小上限，它會使用：

// Get the maximum size
var maxSize = ExtensionContext.GetWidgetMaximumSize (NCWidgetDisplayMode.Expanded);

若要處理狀態 （顯示模式） 變更，它會使用：

[Export ("widgetActiveDisplayModeDidChange:withMaximumSize:")]
public void WidgetActiveDisplayModeDidChange (NCWidgetDisplayMode activeDisplayMode, CGSize maxSize)
{
    // Take action based on the display mode
    switch (activeDisplayMode) {
    case NCWidgetDisplayMode.Compact:
        PreferredContentSize = maxSize;
        Content.Text = "Let's Monkey About!";
        break;
    case NCWidgetDisplayMode.Expanded:
        PreferredContentSize = new CGSize (0, 200);
        Content.Text = "Gorilla!!!!";
        break;
    }
}

除了設定每個狀態的要求大小 （Collapsed 或 Expanded），它也會更新顯示的內容，以符合新的大小。

摘要

本文涵蓋 Apple 在 iOS 10 中對 Widget 系統所做的增強功能，並示範如何在 Xamarin.iOS 中實作它們。

相關連結

• 延伸模組簡介
• 3D 觸控簡介
• 應用程式延伸模組程序設計指南