週刊「LUV CAN SAVE Uアプリを作る」第2号 〜画像を配置する

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

どうも。暑い日が続きますが「Cool bed.」してますでしょうか。

週刊「LUV CAN SAVE Uアプリを作る」第2号、今回は画面に表示する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つの画像を表示させるところまで進めていきます。

LUV CAN SAVE Uアプリの画像

2つの画像を配置する

表示する画像を用意する

まずは実際に表示する2つの画像ファイルを用意しましょう。

いらすとや様から以下の2つの素材を拝借。

わかりやすいファイル名に変更して、プロジェクトに追加。

2つの画像ファイルを追加する

男側の画像を配置

最初にViewControllerクラス内でUIImageView型の定数を宣言。今回は関係ないですが、次回以降いろいろな場所でこの画像を参照するのでここで宣言します。

 

定数を宣言したら、viewDidLoad()内で詳細を書いていきます。

まず、この先よく使う変数として「ビュー(画面)の幅」と「ビューの高さ」を定数として用意。

 

pictureBoyに実際に表示する画像を指定します。「LuvCan_boy.png」の部分は、最初に用意したファイル名に合わせてください。

 

次に、表示する画像の幅と高さを指定。幅はビューの2/3、高さはビューの1/3より少し大きく。
ちなみにこの指定は「座標(0,0)を起点にして、右にwidth・下にheightぶん広げた枠を作る」という意味です。位置はこの次にちゃんと指定するのでご安心を。

 

大きさが決まったので、次は画像を配置する場所。画像の中心座標を「ビューの中心座標から少し下にずらした点」に設定します。

 

このまま表示しようとすると、画像が枠にぴったり合うように伸び縮みしてしまう。そこで、画像の表示方法を「縦横比を維持しつつ、枠にフィットさせる」というモードに設定。

 

あとは用意したUIImageViewをビューに表示するだけ。これを忘れて「表示されない!?」となるのはよくあること。

 

ここまででコードはこんな感じになっています。

女側の画像を配置

まずは男側の画像と同様に、ViewControllerクラス内でUIImageView型の定数を宣言するところから。

 

以下、viewDidLoad()内で細かい設定。最初に表示する画像のファイル名を指定します。

 

画像の大きさは拡大後のサイズを基準にします。サイズは男側の画像と同じなので、それを参照させましょう。

 

ビューの右下に40pxの余白ができるように、中心座標を設定。

 

男側と同様に、画像の表示モードを設定。

 

初期表示は画像が縮小した状態なので、CGAffineTransformで変形。

 

最後に、ビューに画像を表示。

 

ここまでのコードをまとめましょう。

画像の細かい調整

画像を不透明度を調節する

UIImageViewのalphaプロパティで、画像の不透明度を設定できます。1.0が不透明度100%で、0.0が不透明度0%。

画像を水色の線でふち取る

layer.borderColorで枠線の色、layer.borderWidthで枠線の太さを指定します。

画像の透過部分(背景色)を紫色にする

backgroundColorプロパティで背景色を指定できます。

男側の画像を手前に表示する

明示的に「男側の画像の方が手前」にするために、viewのbringSubviewメソッドを使用します。手前に持っていきたいビューを「toFront」に指定。

ここまでのコード

ここまでの内容で、冒頭に示した画像のような表示ができるはずです。試しに動かしてみましょう。

次回予告

第3号では、指で画像を動かす処理を実装していきます。これでアプリはほぼ完成になります! お楽しみにー。

 

このシリーズの記事

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

SNSでもご購読できます。