[Apple Watch アプリ開発] #5 ボタン

2015.04.23

WKInterfaceButton

概要

WKInterfaceButtonオブジェクトは、画面上でタップ可能な領域(ボタン)を表します。 ボタンに表示するテキストや色・画像を設定することができます。

特性

ボタンは以下の特性を持ちます。

  • カスタマイズ可能な背景を持つ
  • 他の要素を区別するための丸角を持つ
  • ラベルやグループオブジェクトを含めることができる

また、Apple はボタンを使用するときは以下のことを推奨しています。

  • 横幅はスクリーンいっぱいになるように作成してください ボタンを横に並べなければいけない場合でも、並べられるボタンは最大 2 つです
  • 可能な限りボタンの高さは統一してください
  • デフォルトのcorner radiusを使用してください 標準のボタンのcorner radius6 ポイントです

作ってみる

wk5-1

実行画面

wk5-8

フォントスタイル

OS で用意されているWKInterfaceButtonのフォントスタイルは以下の9 種類です。 デフォルトのフォントスタイルはRegularです。

wk5-2

それぞれの見た目はこのようになっています。

wk5-3-2

wk5-4

wk5-5

ボタンタップ時のアクションを設定する

タップされた時のメソッドの登録はStoryboard 上からしかできないようです。 WatchKit では、UIControladdTargetに相当するメソッドは用意されていません。

wk5-6

wk5-7

WKInterfaceButton の定義

WKInterfaceButton は以下のように定義されています。

@availability(iOS, introduced=8.2)
class WKInterfaceButton : WKInterfaceObject {

func setTitle(title: String?)
func setAttributedTitle(attributedTitle: NSAttributedString?)

func setBackgroundColor(color: UIColor?)
func setBackgroundImage(image: UIImage?)
func setBackgroundImageData(imageData: NSData?)
func setBackgroundImageNamed(imageName: String?)

func setEnabled(enabled: Bool)
}

ボタンのタイトルと背景色/画像を設定できます。 また Enabled の切り替えもできるようです。

それでは実際に背景画像を設定してみましょう。

背景画像の設定

設定する画像はこちら。 ファイル名はmosaic@2x.pngとしています。

wk5-9

wk5-10

サンプルコード

@IBOutlet weak var button: WKInterfaceButton!

override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)

self.button.setBackgroundImageNamed("mosaic")
}

実行画面

wk5-11

背景画像によってボタンの高さが動的に変わるのでしょうか。 横幅は画面にフィットするようでした。 ここらへんの挙動はよくわかりませんでした。 ごめんなさい。

まとめ

WKInterfaceButtonはボタンを作成するために利用します。 ボタンタップ時のアクションは Storyboard から設定しましょう。

リンク