Apple Watch アプリではWKInterfaceButton を使ってボタンを設置します。

このボタンには画像を設定することもできるようになっているので、今回はそれを使って画像のボタンを設置してみることにしました。

ボタンで使う画像を準備する

まずは、ボタンで使う画像を準備します。

今回は Interface Builder を使ってボタンに画像を置くことにするので、WatchKit App のバンドルに組み込まれる方のアセットカタログに、ボタンで使う画像を揃えます。

2015-04-27 に登場する Apple Watch は Retina ディスプレイらしいので @2x サイズの画像さえあれば問題ないとは思いますが、今回は試しに @1x , @2x , @3x の 3 タイプを用意してみることにしました。

念のため、どれが使われたかわかるように対象解像度を画像内に記載してあります。

画像ボタンを設置する

それでは、Apple Watch アプリの画面に画像ボタンを設置します。

通常のボタン (WKInterfaceButton ) に画像を表示する機能があるので、まずは普通にボタンを設置します。

そして、ボタンに画像を設定します。

WKInterfaceButton では『背景』として画像を設置することになるようです。設置したボタンを選択したら、属性インスペクターのBackground で、使いたい画像を指定します。

既定だとボタンの設置サイズに合わせて画像が間延びするようなので、ボタンのSize 設定でSize To Fit Content を選択して、ボタンのサイズを画像にフィットするようにします。

これで画像を配置することができました。

ボタンの画像は『背景』扱いなので、その上にテキストを重ねられます。他にもボタン自体の位置を調整したりできます。

このようにして画像ボタンを設置できます。

Interface Builder 上では @1x の画像が使用されているように見えますが、iOS シミュレータで動かしてみると @2x 用の画像が使われることが確認できます。

ボタンの背景色を変更する

Apple Watch のボタンの背景色は既定では黒になる様子です。

WKInterfaceButton には背景色を指定する項目がありますが、今回のように背景画像を設定している場合は無視されます。

画像ボタンの背景色を調整したい場合には、ボタンで扱うコンテンツの種類を『グループ』に変更します。コンテンツの種類は、ボタンのContent の項で変更できます。

ボタンをグループタイプに変更すると、ボタン内をレイアウトできるボタンに変わります。

画像ボタンを作る

今回は画像ボタンを作ることが目的なので、このレイアウトグループの中に画像を設置します。

ボタンは先ほど既に作成してあるので、今回はボタンではなく純粋に『画像』オブジェクトを投げ込みます。投げ込み先のグループが、先ほど作ったボタンそのものです。

そうして設置した画像オブジェクトに、表示する画像の名前やサイズなどを設定すれば、これで先ほどのような画像ボタンができあがります。

ボタンの見た目は同じですけど、ドキュメントアウトラインで確認すると、ボタンの下にグループがかまされていて、その中に画像が設置されていることがわかります。

背景を設定する

これらのオブジェクトそれぞれを設定できるので、この中のグループに『背景色』を設定します。グループは角丸の設定もできるので、ついでにそれも行ってみました。

このようにすることで、画像ボタンの背景に色をつけることができました。

画像とラベルが混在したボタンも設置可能

グループタイプのボタンは、その中に複数のコントロールを設置できるようになっています。

そのため、ボタンの中に画像とラベルを併設することも可能です。グループのサイズや角丸の他にも、さらにグループを設置してラベルを縦に並べたりもできるので、ボタン内をさまざまにレイアウトすることが可能です。

このようにして作られたボタンは、全体でひとつのボタンとして振る舞います。

ちなみにボタンの中にボタンをさらに設置すると、ビルド時にButtons can't contain nested controls. というエラーになるようです。