はじめに
前回ではUIButtonの基本的な使い方を説明しましたが、通常のボタンではなくオリジナルの画像を貼り付けたボタンを使用したい場合が結構ありますよね〜
そこでオリジナルの画像を使用したUIButtonの作成方法を説明します！
通常のボタンではなく、オリジナル画像のボタンを作成する方法
基本的なXcodeのプロジェクト作成、UIButtonの配置方法は以下の記事を参考にしてください。
最初にUIButtonの画像を用意しましょう。今回は以下の画像「button.jpg」を用意しました。
次に用意した画像をXcodeのプロジェクトに追加しましょう。Xcodeのメニューから「File」→「Add Files to “プロジェクト名”」を選択し用意した画像を選択します。
ナビゲーターエリアに「button.jpg」が追加されます。
「Main.storyboard」でボタンを選択しユーティリティエリアの「Type」を「Custom」に選択し、「image」に「button.jpg」を選択します。
するとボタンの画像が変わり以下のボタンが作成されます。
画像ボタンのレイアウトを調整する
画像のボタンはテキストを追加することもできます。ユーティリティエリアの「Title」でボタンのテキストを追加します。
「Title」テキストを追加すると画像のボタンにテキストが追加されますが、テキストが変な場所に表示されている思います。そこでユーティリティエリアの「Edge」でテキストと画像の位置を調整します。
- Content … 画像とテキスト両方の位置を設定する
- Title … テキストの位置を設定する
- Image …画像と位置を設定する
今回は以下のように画像とテキストの位置を設定しました。
画像とテキストの位置を調整して実行すると以下のようになりました！お疲れ様でした〜
まとめ
以下の手順で画像付きのUIButtonを作成できます。
- UIButtonを「Main.storyboard」を設置する
- ボタンの画像を用意しXcodeのプロジェクトに追加する
- UIButtonの「Type」を「Custom」に設定し、「image」にXcodeのプロジェクトに追加したボタンの画像を選択する。
- 画像にテキストを追加した場合は「Edge」で画像とテキストの位置を調整する。
参考サイト
Objective-C – 画像付きUIButtonのレイアウトを変更する – Qiita
