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

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

Swift 4.0
Xcode 9.0

 
 

UIButton に画像を貼る

 
文字の代わりに画像を入れたボタンですが、基本的にはボタンの作成になります。

この両方で考えてみます。

 

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

あるいは、画像はAssets.xcassets に入れるのがいいかもしれません。

 

ライブラリーから Button を選択して画面に配置
 
Button の Attributes Inspector からTypeを「Custom」に変更します。
 

 
ButtonのTitleは「Button」を空白にします。
 
画像の縦横比を変えたくない場合は「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 actionを設定
 
後は通常のButtonと同じようにタップされたときのactionを規定します。
Buttonがタップされると4枚の画像を順番に変更するようにしました。
 
ViewController.swift

 
Storyboardでこの「buttonTapped」と「Touch Up Inside」
「New Reference Outlet」と「button」をそれぞれを紐付けします。
 
button_image_3
 
これで出来上がりです。画像をタップして順番に画像が変わっていきましたでしょうか
 

 

コードで記述

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

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

storyboardでおこなったAspectFitとHorizontal, Verticalの拡大もコードで入れます。

ViewController.swift

 
storyboardで作ると簡単なところもありますが、コードであるメリットもまたあります。
 

 
関連ページ:

Reference:
UIButton | Apple Developer Documentation


ページのトップへ戻る

シェアする

  • このエントリーをはてなブックマークに追加

フォローする