【Swift】ButtonとImageViewを使い「なでなでアプリ」

記事内にPRが含まれる場合があります

2018年7月18日2024年5月14日

URLをコピーしました！

今日はXcodeのInterface Builderを使い、ButtonとImageViewを使って簡単な「なでなでアプリ」を作りました。（テックキャンプの教材には無いけど今までの知識を総動員して出来るんじゃないかと思いました。）

今回の記事の内容はInterfaceBuilderを使ったButtonとImageViewの配置の仕方、制約、Outlet接続、Action接続について紹介したいと思います。

お借りした画像

「ぴよたそ」様よりヒヨコのgifアニメ画像をお借りしました。これをあえて2枚に分割。なでなで画像ですね。

これをボタンを押したら画像が切り替わってナデナデするようなアプリを作ってみます。

Xcodeで新規プロジェクト作成

画面左上のFile＞New＞Projectと進み、プロジェクト名を入力。保存先を決めて作成します。

画像（ImageView）を配置する

ナデナデ画像2つを使う準備をしていきます。

画像2枚をプロジェクトに追加

Xcode画面左上のFile＞Add Files toと進み、2枚の画像を選択して[Add]ボタン

これでこのプロジェクト内で画像を使えるようになりました。

Interface BuilderのViewController上にImageViewを配置

画像を使うためのオブジェクトをView Controllerに配置します。

1.画面左側からMain.storyboardファイルを選択し、Interface Builderを表示させる
2.画面右下のオブジェクトライブラリーからImageViewを選択しドラッグして表示領域に配置
3.画面右上のAttributes（属性） Inspectorをクリックして、imageのところに追加した画像「nade1.png」を選択

配置直後は画像がなぜか潰れちゃってるので

各種制約を付与

画像に制約を付与してiPhone機種によらず同じ画面を表示できるようにします。

1.画面下部にある[Align]ボタンから水平方向の中央寄せの制約を付与し[Add 1Constraint]をクリック。
2.[Add New Constraints]ボタンから、画面上部からの距離を50に指定、画像の横縦サイズを300×330に指定

これにより画像がちゃんと（中央寄せ、上から50の位置）表示されました。

画像はもう1枚あるので、同様にやります。画像が重なり片方しか見えませんがこれでOK。

ボタン（Button）を配置する

ボタンをタップしたら画像を切り替えるためにButtonオブジェクトを置き、使えるように編集していきます。

まずはButtonを配置

画面右下のオブジェクトライブラリーからbuttonで検索すると出てくるのでButtonをドラッグして配置します。

属性ならびに各種制約を設定

置いたButtonに対して位置やサイズや色などの設定をしていきます。

1.画面右上の[Attributes Inspector]から[Title]に”なでなで”と入力しボタンの文字を決めます
2.画面右下（画像では左下だが一覧で見やすくするためここに置いた）の[Alignボタン]から水平中央寄せの制約を付与
3.画面右下の[Add New Constraints]ボタンからヒヨコからの距離を指定、また画像の横縦サイズを指定

これでボタンが左右中央に配置され、また上にあるヒヨコ画像から指定の距離にボタンが配置されました。ここでボタンの縦横サイズを50×50にしたのですが失敗。文字が全部表示されなかった（画像だと表示されてるけど、シミュレーターだとダメ）

なので縦横サイズ50×50という制約を編集します。

オブジェクトの制約を編集するときは

サイズが思ったより小さくて文字が全部ボタン上に表示されなかった、等の場合は画面右側にある[Size Inspector]から各制約をクリックして編集すればOK。

Editというボタンをクリックして表示されるウィンドウのConstantに100と入力しました。横幅100にします。

Outlet接続をしてソースコードを修正する

ここからViewController上に配置したImageViewとButtonをソースコードに関連付けをしてソースコード上で扱えるようにしていきます。

画面右上からAssistant Editorをクリックして開きます

これで左側にView Controller、右側にソースコードが表示されます。

画像とボタンをOutlet接続する

画像2枚とボタンをOutlet接続します。選択状態にしてキーボードのControlを押しながらマウスドラッグで持ってきます。

こちらのクラス宣言の直下にマウスでドラッグします。

class ViewController: UIViewController {

そうするとソースコードは以下のようになります。


@IBOutlet weak var btnNade: UIButton!
@IBOutlet weak var nade1: UIImageView!
@IBOutlet weak var nade2: UIImageView!

概ね変数の宣言はクラス宣言の直下なので、この場所にしました。変数名はButtonは「btnNade」、画像1は「nade1」画像2は「nade2」としています。

ボタンタップ時のAction接続をしてソースコードを修正

先程はButtonとImageViewをOutlet接続して宣言を行ったので、今度はボタンをタップしたときの動きをAction接続して定義していきます。

ボタンをタップしたときの挙動をAction接続で定義

今回はボタンをタップしたら画像1を表示し、タップした指を離したら画像2を表示するようにします。

なのでActionは2つ。「Touch Down」で接続するのと、「Touch Up Inside」でAction接続する。

Touch Downはボタンを押下中の状態を表し、Touch Up Insideはボタンの領域内で指が離れてボタンが押されなくなった状態を表しています。

ViewController上でButtonをクリック（選択）してから、キーボードのControlキーを押しながらマウスでドラッグして（viewDidLoadメソッドの外）、表示されたウィンドウに以下のように入力。

メソッド名も自分で決めるとソースコードに以下の2行を入れたことになります。

@IBAction func tapButtonNade(_ sender: UIButton) {
}

@IBAction func tapButtonNade2(_ sender: UIButton) {
}

メソッドはまだ空ですが接続が成功してるので左側に●のマークが付いています。

ボタンの形を変えておきます

1.ボタンの色を黄色に変更
2.ボタンの形状を四角から丸にします。これは画面上では出来ないのでソースコード上で設定します。

ボタンの形状を丸にするのには以下のようにButtonのインスタンスに設定する。このやり方はテックキャンプで学んだものです。

button.layer.cornerRadius = button.frame.width / 2
button.layer.masksToBounds = true

ボタンをタップしたときのメソッドにprint文で出力してみる

テスト的にボタンをタップしたときの2つのメソッドにprint文を入れてシミュレータで動作確認してみます。

ソースコードは以下のようになります。

@IBAction func tapButtonNade(_ sender: UIButton) {
  print("ボタンが押されています")
}

@IBAction func tapButtonNade2(_ sender: UIButton) {
  print("ボタンが離されました")
}

シミュレータを起動してボタンをクリックしたり離したりしてみると‥ちゃんとボタンが反応しています。

ボタンタップ時のアクションをソースコードに実装

今度はボタンアクションの時にprintを出すのではなくて画像を切り替えるというのを実装します。

ImageViewオブジェクトにはisHiddenというプロパティがあることが調べてわかったので、それを使って画像の表示/非表示を切り替えることで、ナデナデしてるように見せます。

ソースコードを以下のようにしました。

ボタンが押されてる間はnade1は非表示（isHidden = false）、nade2は表示（isHidden = true）。
ボタンから指が離れたらnade1は表示でnade2は非表示。これでどちらかの画像が表示されるはず。

@IBAction func tapButtonNade(_ sender: UIButton) {
  print("ボタンが押されています")
  nade1.isHidden = false
  nade2.isHidden = true
}

@IBAction func tapButtonNade2(_ sender: UIButton) {
  print("ボタンが離されました")
  nade1.isHidden = true
  nade2.isHidden = false
}