【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コード)

関連記事

I20160411-122213.jpg

Swift 2.2の変更点をまとめてみた

2016年3月22日、Xcode 7.3と共にSwift 2.2が正式にリリースされました。

記事を読む

20160730-172416.jpg

Auto Layoutで非表示にした部分を詰める(トルツメ)する方法

Auto Layoutを使って非表示にしたコントロールの部分を詰める(トルツメ)方法を説明します

記事を読む

I20151030-214417.jpg

【開発本】SpriteKitの入門書籍「iPhoneのゲームアプリをつくろう!」

SwiftとSpriteKitでiPhoneゲームアプリを開発するための入門書「iPhone

記事を読む

I20151122-213340.jpg

【入門本】詳細! Swift 2 iPhoneアプリ開発 入門ノート Swift 2 + Xcode 7対応

ソーテック社より「詳細! Swift 2 iPhoneアプリ開発 入門ノート Swift

記事を読む

I20151103-131550.jpg

iPhoneアプリ開発にオススメの本7選(初心者向け含む)2015年11月版

Xcode 7/Swift 2/iOS 9に対応した関連書籍が揃ってきたので、iPhoneア

記事を読む

20160420-180135.jpg

【RxSwift】2つのUITextFieldに入力された数値の合計をUILabelに表示する

そろそろRxSwiftについて学び始めよう!ということで、まずは2つのUITex

記事を読む

20160804-193842.jpg

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

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

記事を読む

I20160207-111059.jpg

【Swift】Xcodeで型推論された変数や定数の型を調べる方法

Swiftには、そのデータ型が明らかであれば型を明記する必要が無い「型推論」という機能があります

記事を読む

I20160122-095132.jpg

Swift 2のドキュメントコメントの書き方(JavaDoc的なやつ)

コード補完時やoptionクリック時などに説明が出てくるようにする「ドキュメントコメント(J

記事を読む

I20151119-165939.jpg

Swift 2.1に対応した本「詳解 Swift 改訂版」が出るぞ!

Swiftの文法に関する解説書の定番「詳解 Swift」の、Swift2.1に対応した改訂版「詳

記事を読む

I20170228-002742.jpg
約3ヶ月で体脂肪率を6.2%も落とせたキッカケについて

(右上の赤枠内がダイエット開始前、左下の赤枠内が3ヶ月後の数値

I20161224-174949.jpg
「季節の野菜を直接配送!季節のスムージー」を買ってみた

「FiNCモール」で、「季節の野菜を直接配送!季節のスムージー」を

I20161002-152537.jpg
【メンズネイル】東京・新宿のネイルサロンでマットネイルしてもらった

2016年7月18日、東京・新宿のメンズOKなネイルサロン「Tot

I20160925-163452.jpg
タブバーアイコン非選択時の色を変更する方法【iOS 10】

UITabBarControllerで、タブバーアイコン非選択時の

I20160924-123726.jpg
iPad Pro 9.7インチ SIMフリーモデルにFREETELのSIMを入れて使ってみた

今までiPad miniで使っていたFREETELのSIM

→もっと見る

PAGE TOP ↑