【Apple Watchアプリ】ボタン内の文字の先頭に画像を入れる方法【WatchKit】

公開日: : 最終更新日:2015/03/30 iPhoneアプリ開発

20150327-131839.jpg

Apple Watch向けのアプリを作るためのフレームワーク「WatchKit」。そのWatchKitでボタン内に画像と文字を埋め込む方法について紹介したいと思います。

    

スポンサード リンク

ボタンのContentをGroupに切り替える

20150327-133118.jpg

WatchKitのボタン(WKInterfaceButton)にはContentという設定があり、通常はTextになっていますが、これをGroupに切り替えることでボタン内にGroupを入れることができるようになります。

    

グループのHeightを設定する

20150327-133039.jpg

一番外側のグループ(WKInterfaceGroup)では、SizeのHeightをFixedの44くらいに設定しておきます。これがボタンの高さとなります。

    

Insetsで隙間を空ける

20150327-133319.jpg

あとはイメージ(WKInterfaceImage)とラベル(WKInterfaceLabel)を横に並べます。

イメージの外側にグループを1個置いて、InsetsをCustomにしてRightを設定することで、ラベルとの隙間を空けることができます。

    

手順が分かる動画はコチラ

今回の全手順が分かる動画を作ってみました。詳しい操作についてはこちらを参照して下さい。

    

@akio0911はこう思った。

WatchKitは、iOSアプリで使ってきたUIKitとはかなり勝手が異なりますね。また何か分かったらTIPSとしてブログに書きたいと思います!

    

この記事が気に入ったら「いいね!」しよう

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

LINEでご感想・ご要望お送りください!
(スマホでLINEを起動 > 友だち追加 > QRコード)

関連記事

20160802-232454.jpg

【Xcode 7】メソッドがどこから呼びだされているかを調べる方法

Xcode 7で、メソッドがどこから呼び出されているのか調べる方法を紹介します!     方法

記事を読む

I20160102-131507.jpg

Swift 2の文法が分かるオススメ本「詳解 Swift 改訂版」

Swift文法書の定番とも言える、荻原 剛志さんの「詳解 Swift」。 Swiftの文法をキ

記事を読む

20141227-125250.jpg

実践的な内容まで載っている!開発のプロが教える Swift標準ガイドブック

株式会社マイナビ様より「開発のプロが教える Swift標準ガイドブック」の見本紙を頂きました。早

記事を読む

I20150722-185359.jpg

【書籍】12のパターンで学ぶ本「iOSアプリ開発 AutoLayout徹底攻略」

     Auto Layoutの使い方について解説されている本「iOSアプリ開発 A

記事を読む

エディタのショートカット・Auto Layout・ブレークポイントに関する詳しい解説も!「Xcode5徹底解説」

著者の@es_kumagaiさんより献本御礼。iOSアプリ開発に用いるツール「Xcode 5」の

記事を読む

20141210-164612.jpg

【Swift】Generated Header内にSwiftクラスの定義が記述されない場合の確認事項【Xcode6】

Swiftで書いたクラスをObjective-Cで使う際には、「Generated Header

記事を読む

20160804-193842.jpg

【Xcode 7】Storyboardで複数の制約をまとめて追加する方法

Xcode 7のStoryboardで、複数の制約をまとめて追加する方法について解説します!

記事を読む

I20150924-010943.jpg

Swift 2.0で追加されたOptionSetTypeがなかなか便利

Swift 2.0で追加されたOptionSetTypeプロトコルがなかなか便利なので紹介し

記事を読む

20141222-120336.jpg

【Swift】PlaygroundでUIImageに画像を読み込む方法

SwiftのPlayground内にて、UIImageに画像ファイルを読み込む方法を紹介しま

記事を読む

I20160209-123839.jpg

【Swift】プロパティのsetとgetには異なるアクセス修飾子を指定できる

Swiftでは、プロパティのセッタ(set節)とゲッタ(get節)に異なるアクセス修飾子を指定

記事を読む

PAGE TOP ↑