Swift watchOS コンプリケーションで文字盤にアイコンを追加しアプリを起動する

文字盤に、コンプリケーションを使ってアプリの情報を表示できるようだ。

1.文字盤を変更

デザインや配色を変えたり、コンプリケーションを使って文字盤に情報を表示したりできます

Apple Watch の文字盤をカスタマイズ

文字盤を長押しすると、編集モードに入る。

赤枠内がコンプリケーションのようだ。ここ、変えられるのね。

edit_watch_face

左右にスワイプすると、コンプリケーションを変更できる

edit_complication

2.コンプリケーションのプレースホルダーを追加する

では、コンプリケーションをプロジェクトに組み込んでいくに当たって、概要を見ておく。

アプリがサポートするすべてのコンプリケーションのファミリーのプレースホルダーを作成します。

これらのプレースホルダーは、コンプリケーションが通常表示するデータの種類を示すことが理想的です。

ユーザーがApple Watchでウォッチフェイスを設定する際、システムはこれらのプレースホルダーを使用してコンプリケーションを表現します。

プレースホルダーを提供する方法には、静的な画像を使用する方法と、コンプリケーション・テンプレートを使用してローカライズしたバージョンを動的に作成する方法があります。

理想的には、アプリが両方を提供することです。

静的プレースホルダー画像の追加

プレースホルダーを提供しない場合、システムはアプリアイコンを基にプレースホルダーを生成します。

デフォルトでは、新しい watchOS プロジェクトを作成したり、既存のプロジェクトに watchOS ターゲットを追加すると、Xcode は Complication グループを WatchKit 拡張モジュールのアセットカタログに追加します。

3.watchOSアプリのコンプリケーションを有効にする

Apple Watchの文字盤にコンプリケーションを追加する前に、アプリでコンプリケーションのサポートを有効にする必要があります。

WatchOSアプリの新規作成時にコンプリケーションを有効にするために、Include Complicationsにチェックを入れてください。

コンプリケーションを含めると、Xcode は、アプリのコンプリケーションデータソースを作成し、設定します。

データソースは、コンプリケーションを構成し、タイムラインを入力し、プレースホルダーを提供するために必要な多くのメソッドのスタブが含まれています。

Xcode はまた、静的なプレースホルダ画像のために、拡張機能のアセット-カタログにグループを作成します。

3.1既存のアプリにコンプリケーションを追加する

既存のwatchOSアプリにコンプリケーションを追加するには、これらのアイテムを自分で作成する必要があります。

まず、CLKComplicationDataSourceプロトコルを採用したクラスを作成します。

次に、拡張機能のアセットカタログにComplicationグループを追加します(まだ存在しない場合)。

Assets.xcassets ファイルを開き、Editor > Add Assets > watchOS > New Watch Complication Placeholder を選択します。

最後に、プロジェクトナビゲータでアプリを選択し、エクステンションの一般タブを開いてください。

Complication Configuration で、Data Source Class と Complication Group を、先ほど作成したクラスとアセット・カタログ・グループに設定します。

4.実践

上記で見た手順に沿って、プロジェクトにコンプリケーションを構成していく。

4.1 拡張機能のアセットカタログにComplicationグループを追加 

追加しようとおもったら、既にされていた、、

complecation_assets

4.2 プロジェクトナビゲータでアプリを選択し、エクステンションの一般タブに追加

しようと思ったら既に追加されていた。

complecation_config

4.3 CLKComplicationDataSourceプロトコルを採用したクラスを作成

こちらも構成されていた。

complication_class

iOSプロジェクトに、watchOSを組み込んだ時に自動で適用されていたのかしら?

実機で、サンプルアプリのコンプリケーションを文字盤に設定してみる。

文字盤長押し、編集、左右スワイプからコンプリケーションの変更、右下のアイコンを選択して、リューズを回す。

choice_complication

おお。サンプルアプリも一覧に出てるのね。

選択する。

select_sampleapp_for_complication

サンプルアプリのコンプリケーションアイコンが追加されたので、タップしてみる。

added_sample_complication

サンプルアプリが起動した!

run_sampleapp

 

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です