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

関連記事

I20151202-232710.jpg

【Swift 2】配列(Array)を初期化する方法

Swiftで配列(Array)を初期化する方法についてまとめてみたいと思います!   

記事を読む

20150409-103620.jpg

描いたベクターグラフィックをSwift/Objective-Cコードに変換できる「Paint Code 2」

引用元 : PaintCode ベクターグラフィックを描き、それを描画するためのSwift

記事を読む

20141228-232009.jpg

【Swift】as?演算子を使ったキャストでは結果がoptionalとなる

今日はSwiftのas演算子とas?演算子について解説したいと思います。as演算子について

記事を読む

I20160409-211651.jpg

Xcode 7.3の新機能についてまとめてみた

2016年3月22日にXcode 7.3がリリースされましたが、自分が知らない機能があるかもしれ

記事を読む

I20160119-155700.jpg

Xcodeで80文字目のところにガイドラインを表示する方法

Xcodeで80文字目のところに線(ガイドライン)を表示する方法について解説します! 「ソース

記事を読む

20140810-193043.jpg

WordPressでObjective-Cのソースコードをキレイに整形して表示する方法

WordPressの記事内で、Objective-Cのソースコードをキレイに整形して表示する方法

記事を読む

20140724-103334.jpg

iPhoneアプリ開発にオススメの本10選(2014年7月版)

@akio0911です。2013年12月に「レベル・目的別!iPhoneアプリ開発おすすめ本

記事を読む

I20151119-165939.jpg

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

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

記事を読む

I20160212-000722.jpg

Swiftにおけるセレクタ(Selector)について調べてみた

NSTimerなどを使う際、引数に「Selector」という型があるのですが、これがSwiftで

記事を読む

I20150808-104713.jpg

【Xcode】シミュレーターリストの表示がおかしくなった時の解決方法

Xcodeのシミュレーターリストの表示が、上のスクリーンショットのようにおかしくなってしまっ

記事を読む

【HomeKit】家の照明をSiriで制御できるようにしてみた

Apple製品と家電を連携するシステム「HomeKit(ホーム

【メンズネイル】新宿区大久保のサロンでターコイズとピンクのメタルネイルにしてもらった

2016年10月22日、いつもお世話になっているネイルサロン「

[iOS][Swift]スタックトレース(コールスタック)を表示する2つの方法

iOSアプリ開発で、スタックトレース(コールスタック)を表

【使い方】iOS 10のSiriで出来る事299個をまとめてみた

そろそろiOS 11がリリースされそうな雰囲気ではありますが、iO

【メンズネイル】新宿区大久保のサロンでハーレイ・クインがテーマのネイルにしてもらった

2016年9月27日、いつもお世話になっている「Total b

→もっと見る

PAGE TOP ↑