週刊「LUV CAN SAVE Uアプリを作る」第3号 〜画像を指で動かす

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
LUV CAN SAVE Uアプリの画像

このシリーズ書いてると常にLUV CAN SAVE Uが脳内再生されます。いかがお過ごしでしょうか。

週刊「LUV CAN SAVE Uアプリを作る」第3号、今回は2つの画像を指で動かせるようにします。

今回やること

まずは例によってアプリの機能一覧をおさらい。

  1. 初期状態で、2つの画像が表示されている
    1. 男側の画像の位置とサイズは以下の通り
      1. 初期位置は画面の中心からやや下
      2. 幅は画面の2/3ほど
      3. 高さは画面の1/3より少し大きいくらい
    2. 女側の画像の位置とサイズは以下の通り
      1. 拡大後のサイズを基準とする(初期状態は縮小)
      2. サイズは男側の画像と同じ
      3. 縮小状態のサイズは元の2/3
      4. 画面の右下角に、少し余白を置いて配置する
    3. 画像はやや透過気味
    4. 水色の線で縁取られている
    5. 画像の背景は紫色
    6. 男側の画像の方が手前に表示されている
  2. 男側の画像を上にフリックすると、画像が移動する
    1. 0.2秒ほどでアニメーションする
    2. 移動先は画面の左上角
    3. 逆の動作も用意する(下にフリックしたら下に動く)
  3. 女側の画像をタップすると、画像が拡大する
    1. タップしたら一瞬で拡大させる
    2. 逆の動作も用意する(縮小させる)
    3. 画像が縮小中のときは拡大、拡大中のときは縮小する

今回は赤文字で示した部分、2つの画像を指で動かせるようにする部分を作っていきます。

実際に作る手順は以下のような感じです。

  1. 指で操作した時に実行する処理(関数)を作成する
    1. 男側の画像を上に動かす処理
    2. 男側の画像を下に動かす処理
    3. 女側の画像を拡大/縮小する処理
  2. 2つの画像にジェスチャーレコグナイザを登録する

指で操作した時に実行する処理(関数)を作成する

男側の画像を上に動かす処理

「moveUpBoy」という名前で、男側の画像を上に動かす関数を作ります。「sender: UISwipeGestureRecognizer」はジェスチャーレコグナイザを登録するためのおまじないのようなものです。

 

画像の移動は「画像がもともとあった場所からどのくらいずらすか」という仕組みで実現します。ずらす距離は「移動後の画像の中心座標 – 移動前の画像の中心座標」で算出できます。

まずは、移動前の画像の中心座標を保持する変数(boyCenterBefore)をViewControllerクラス内で宣言。その後viewDidLoad()内で画像の中心座標を設定した段階で、その座標をboyCenterBeforeに設定します。

 

関数moveUpBoyに戻って、次は移動後の画像の中心座標を算出します。画面の左上に10pxの余白ができるように設定します。

 

移動後の座標と移動前の座標から、画像が移動する距離を算出します。

 

算出した距離のぶんだけ、画像を動かすアニメーションを実行して処理が完了。
CGAffineTransformで指定する距離はUIViewと違って画面左下が原点となるため注意。

男側の画像を下に動かす処理

先程と同様に、「moveDownBoy」という名前で、男側の画像を下に動かす関数を作ります。

ただし、やることは画像を元の位置に戻す(移動していない状態に戻す)だけ。

女側の画像を拡大/縮小する処理

女側の画像を拡大/縮小する処理は

  • 画像が拡大している状態の時は、縮小する
  • 画像が縮小している状態の時は、拡大する

という1つの関数で実現します。

まずは画像が拡大中かどうかのフラグを設定する変数を、ViewController内で宣言。

 

viewDidLoad()で女側の画像を縮小するよう指定しているので、フラグを「拡大中ではない」と指定。

 

変数の準備ができたら、女側の画像を拡大/縮小する関数を作成。

特段変なことはしてないのでサクッと全体像をどうぞ。

2つの画像にジェスチャーレコグナイザを登録する

画像を操作する関数が完成したら、その関数を指で操作した時に呼び出すためのジェスチャーレコグナイザを2つの画像に登録します。

男側の画像

フリックの動作は、上下左右の方向ごとに1つずつジェスチャーレコグナイザを用意する必要があります。

まずは上方向のフリックから。フリックの場合はUISwipeGestureRecognizerクラスのインスタンスを作成します。
操作した時に関数「moveUpBoy」を呼び出すように指定して、viewDidLoad()内でインスタンスを作成。

 

作成したインスタンスのdirectionプロパティで、フリックの方向を指定。

 

作成したジェスチャーレコグナイザを、男側の画像に登録。

 

下方向のフリックも同様に。

 

女側の画像

女側の画像は、画像のタップで処理を実行します。タップで処理を実行する時はUITapGestureRecognizerクラスのインスタンスを作成します。

 

画像がユーザーの操作に反応するようにする

デフォルトでは画像がユーザーの操作に反応しないため、このままでは画像を指で操作することができません。

2つの画像それぞれについて、isUserInteractionEnabledプロパティをtrueに設定します。

 

以上でアプリは完成です!

動かしてみる

実際にアプリを動かしてみた様子がこちら。

ソース全文

今回作成したアプリのソースがこちら。複製・改変などご自由にどうぞ。

Appleにアプリ申請したらダメだよ!審査通らないから!!

 

このシリーズの記事

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。