はじめに

前回ではUIButtonの基本的な使い方を説明しましたが、通常のボタンではなくオリジナルの画像を貼り付けたボタンを使用したい場合が結構ありますよね〜

そこでオリジナルの画像を使用したUIButtonの作成方法を説明します!

通常のボタンではなく、オリジナル画像のボタンを作成する方法

基本的なXcodeのプロジェクト作成、UIButtonの配置方法は以下の記事を参考にしてください。

Xcodeの基本的な開発の流れ – Xcodeの使い方1

 

最初にUIButtonの画像を用意しましょう。今回は以下の画像「button.jpg」を用意しました。

buttton

 

次に用意した画像をXcodeのプロジェクトに追加しましょう。Xcodeのメニューから「File」→「Add Files to “プロジェクト名”」を選択し用意した画像を選択します。

スクリーンショット 2016-01-10 5.23.58

 

ナビゲーターエリアに「button.jpg」が追加されます。

スクリーンショット_2016-01-10_5_24_12

 

「Main.storyboard」でボタンを選択しユーティリティエリアの「Type」を「Custom」に選択し、「image」に「button.jpg」を選択します。

スクリーンショット_2016-01-10_5_25_46

 

するとボタンの画像が変わり以下のボタンが作成されます。

Simulator Screen Shot 2016.01.10 5.27.16

 

画像ボタンのレイアウトを調整する

画像のボタンはテキストを追加することもできます。ユーティリティエリアの「Title」でボタンのテキストを追加します。

スクリーンショット_2016-01-10_5_26_01

 

「Title」テキストを追加すると画像のボタンにテキストが追加されますが、テキストが変な場所に表示されている思います。そこでユーティリティエリアの「Edge」でテキストと画像の位置を調整します。

スクリーンショット 2016-01-10 6.12.42

  • Content … 画像とテキスト両方の位置を設定する
  • Title … テキストの位置を設定する
  • Image …画像と位置を設定する

 

今回は以下のように画像とテキストの位置を設定しました。

スクリーンショット 2016-01-10 5.28.24

スクリーンショット 2016-01-10 5.28.36

 

画像とテキストの位置を調整して実行すると以下のようになりました!お疲れ様でした〜

Simulator Screen Shot 2016.01.10 5.28.58

 

まとめ

以下の手順で画像付きのUIButtonを作成できます。

  1. UIButtonを「Main.storyboard」を設置する
  2. ボタンの画像を用意しXcodeのプロジェクトに追加する
  3. UIButtonの「Type」を「Custom」に設定し、「image」にXcodeのプロジェクトに追加したボタンの画像を選択する。
  4. 画像にテキストを追加した場合は「Edge」で画像とテキストの位置を調整する。

 

参考サイト

画像付きUIButtonのレイアウト調整 – PILOG

Objective-C – 画像付きUIButtonのレイアウトを変更する – Qiita