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

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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 から設定しましょう。

リンク