[iPhone] 画像をボタンにする

画像をタップしてアクションを起こしたい場合、幾つかやり方があるとは思いますが、ボタンに画像を貼ればボタンとしてタップによるアクションを起こせます。

これは、画像を貼ったボタンですが、タップすると別の画像に変わる例です。

button_image_01
button_image_02

 

Swift 3.0
Xcode 8.0

 

sponsored link

UIButton に画像を貼る

 
Storyboardで作成するケースと、コードのみのケースの両方で考えてみます。

 

Storyboardを使って作成

 
開発手順はこのようなります。

  1. 画像を「Add Files to …」でプロジェクトに追加
  2. ライブラリーから Button を選択して画面に配置
  3. image を追加した画像に設定
  4. Button actionを設定
 

画像を「Add Files to …」でプロジェクトに追加
 
スクリーンショット 2016-08-26 15.04.14
 
このときに「Options」から「Copy Items if needed」にチェックを入れておかないとプロジェクトを塊として扱えません。また、画像は@2xあるいは@3xでRetina対応にします。
 
スクリーンショット 2016-08-26 15.06.13

 

ライブラリーから Button を選択して画面に配置
 
Button の Attributes Inspector からTypeを「Custom」に変更します。
 
button_image_1
 
更に、ButtonのTitleを消します。
 
スクリーンショット 2016-08-26 15.21.17
 
画像の縦横比を変えたくない場合は「Aspect Fit」あるいは「Aspect Fill」を選択します。
 
スクリーンショット 2016-08-26 15.21.44

 

image を追加した画像に設定
 
「image」の項目で追加した画像をリストアップから選択します。
 
スクリーンショット 2016-08-26 15.31.47
 
これでボタンに画像を貼り付けられました。
 
これでもいいのですが、ボタンをaspect比を維持しながら横幅いっぱいまで大きくし、それに画像が入るようにしたいと思います。ボタンを画像のアスペクト比を保ったまま横幅いっぱいに広げます。
「Control」「Alignment」「Horizontal」「Vertical」を設定するとボタンサイズに拡大されます。またViewの背景に色を設定(お好みで)
 
button_image_2

 

Button actionを設定
 
後は通常のButtonと同じようにタップされたときのactionを規定します。
Buttonがタップされると4枚の画像を順番に変更するようにしました。
 
ViewController.swift

 

Storyboardでこの「buttonTapped」と「Touch Up Inside」
「New Reference Outlet」と「button」をそれぞれを紐付けします。

button_image_3

これで出来上がりです。画像をタップして順番に画像が変わっていきましたでしょうか

Simulator Screen Shot 2016.08.26 14.38.35
Simulator Screen Shot 2016.08.26 14.38.38
Simulator Screen Shot 2016.08.26 16.03.39
Simulator Screen Shot 2016.08.26 16.05.41
 

コードで記述

 
画面サイズに応じてボタン位置を変更したい場合は、コードで書いた方が便利です。

  1. UIImage のインスタンスを生成
  2. UIButton のインスタンスを生成
  3. TypeはCustomがデフォルト設定
  4. 表示するフレームを設定
  5. ビューへ貼る
  6. Button actionを設定
    • UIButton のaddTarget メソッドを使う
    • UIControlEventTouchUpInside に設定

ViewController.swift

 
Simulator Screen Shot 2016.08.26 18.05.46
 
これできましたが、画像がボタンサイズまで拡大されないので以下のコードを追加します。
 

 


Swift 2 のケース

 
Swift2ではこのようにしていました。参考まで
 

Storyboardで設定
ViewController.swift

 

コードで設定

 

拡大させるケース