[iOS 10] Today Extension の新機能「Expanded Mode」について

2016.11.08

はじめに

こんにちは。モバイルアプリサービス部の平屋です。

本記事では iOS 10 で Today Extension に追加された新機能「Expanded Mode」を有効にする手順をご紹介します。

Today Extension 作成

早速実装の解説に入ります。

まずは既存の Xcode プロジェクトに Today Extension を追加します。追加の手順についてはこちらの記事などを参考にしてみてください!

Today Extension 追加してそのまま Extension を起動してみると、以下のようなウィジェットが表示されます。高さは固定です。

ios-10-today-extension-1

Today Extension を Expanded Mode に対応させる

Today Extension 追加時に生成された ViewController を編集していきます。

Expanded Mode を有効にする

任意のタイミングで、NSExtensionContextwidgetLargestAvailableDisplayMode プロパティ (iOS 10 で新規追加) に .expanded を指定します。これで Expanded Mode が有効になります。

class TodayViewController: UIViewController, NCWidgetProviding {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 追加
        self.extensionContext?.widgetLargestAvailableDisplayMode = .expanded
    }

    // ...
}

display mode が変更された時の処理を追加する

Expanded Mode を有効にすると、ウィジェットの上部に「表示を増やす」ボタンが表示され、ウィジェットの display mode (compact または expanded) を切り替えることができるようになります。

この切替のタイミングをハンドリングするには NCWidgetProviding プロトコルで定義されている widgetActiveDisplayModeDidChange(_:withMaximumSize:) メソッド (iOS 10 で新規追加) を実装します。

display mode は activeDisplayMode 引数から判断できます。

設定可能なウィジェットの最大サイズは maxSize 引数に入っています。 display mode が expanded の場合、UIViewControllerpreferredContentSize プロパティに値を指定することによって、ウィジェットのサイズを変更できます。

class TodayViewController: UIViewController, NCWidgetProviding {

    // ...

    // 追加
    func widgetActiveDisplayModeDidChange(_ activeDisplayMode: NCWidgetDisplayMode,
                                          withMaximumSize maxSize: CGSize) {
        if (activeDisplayMode == .compact) {
            self.preferredContentSize = maxSize;
        } else {
            self.preferredContentSize = CGSize(width: 0, height: 170);
        }
    }
}

動作検証

ViewController を編集した後に Today Extension を起動すると、以下のように「表示を増やす」ボタンが表示されます。

ios-10-today-extension-2

「表示を増やす」ボタンをタップすると、ウィジェットの表示領域が更新されます。

ios-10-today-extension-3

さいごに

本記事では iOS 10 で Today Extension に追加された新機能「Expanded Mode」を有効にする手順をご紹介しました。iOS 10 向けの Today Extension を実装する方の参考になれば幸いです!

参考資料