読者です 読者をやめる 読者になる 読者になる

からたちねみち

歌を作っています。Vocaloid、主に結月ゆかり、またはiPhoneアプリ開発

swiftでアプリ開発入門その5 - Viewを縦に並べる

iPhoneアプリ開発

もう少しストーリーボード上でのオートレイアウト設定の練習をしていきましょう。

Viewを縦に4つ均等に並べる

今回はViewを縦に4つ並べてみましょう。ビューは画面をレイアウトするうえでの基本です。ビューで大きくエリアを区切ってからその中にラベルやボタンを入れていくように設計すると、綺麗で構造もわかりやすく、修正もしやすいです。

 

完成イメージ

f:id:bettychang:20160103143727p:plain

手書きアプリでイメージを描いてみました。黒と青のエリアがそれぞれビューです。

オートレイアウト設定のポイント

オートレイアウトの設定で意識するべきポイントを確認しましょう。大事なことは常にこの2つです。

  • パーツを配置する位置を定義する(X軸、Y軸)
  • パーツのサイズを定義する(横幅-Width、縦幅-Height)

この2つを定義するためにいろいろな方法があると考えるとうまく設定できるようになります。では早速やってみましょう。

 

プロジェクトを新規作成する

まずはプロジェクトを作りましょう。名前はtest2など適当で構いません。

手順はこちらをご参照ください。

swift-bettychang.hatenadiary.jp

 

 

ビューを用意する

 ビューを一つ用意しましょう。Xcode右下のパーツ群の中から四角いわくのアイコンを選択して中央の画面に貼り付けてください。

f:id:bettychang:20160103144545p:plain

 

ビューの色を変える

ビューは初期状態だと色が透明で見えません。これでは作業がしずらいので色をつけましょう。

f:id:bettychang:20160103144925p:plain

  1. ツリーエリアでいま用意したビューを選択
  2.  Xcode右側のプロパティーエリアで下矢印アイコンを選択
  3. backgroundで好きな色を選択する

 

ビューをあと3つコピーペーストで用意する

今回は4つのビューを縦にならべますので、あと3つビューが必要です。同じ作業を繰り返して作ってもよいのですが、ストーリーボードではパーツの複製がコピーペーストで簡単にできますので楽です。やってみましょう。

 

f:id:bettychang:20160103145622p:plain

 

  1. ツリービューでいま作成したView(下の階層のView)を選択
  2. Command + cでコピー
  3. Command + v で貼り付け

いかがでしょうか。簡単に同じ見た目のビューが複製できたと思います。

同様にあと2つ作りましょう。

 

名前を変えて、縦に並べる

コピーペーストしたビューは名前が同じです。これだと作業がしづらいし管理上もわかりづらいため名前を変えましょう。名前は機能的に判りやすいものがいいと思います。例)ヘッダーの領域として使うビューならheaderViewなど。

今回は上からView1,View2,View3,View4としましょう。

f:id:bettychang:20160103150256p:plain

  • ツリービュー上でビューを選択しエンター
  • 名前を変更する

Macの基本操作と同じですね。次に、画面中央のiPhone画面上に表示されている4つのビューをうえから順に並べてください。

  • 選択して、ドラッグして上からView1,View2,View3,View4となるように並べる

 

この時重要なポイントは、各ビューの間には隙間を空けることです。隙間が空いていないと、各ビューの配置関係をXcodeが正しく認識してくれないためです。先のフェーズで改めて解説します。

 

上のビューの配置を定義する

では、各ビューの配置位置を定義していきましょう。こういった複数のパーツの位置を定義していく場合に重要なことは、端から定義していくことです。

今回の場合、縦に4つビューを並べるので、選択肢としては下記2つです。

  • 上から定義する
  • 下から定義する

今回は上からやってみましょう。つまり作業対象はView1です。

まず配置位置のX軸(横軸)を決めましょう。といっても、横は画面いっぱいでよいので、この場合のX軸の位置はCenter(中央)ということになります。やってみましょう。

f:id:bettychang:20160103151903p:plain

  1. View1を選択
  2. |呂 のアイコンをクリック
  3. Horizontally in Containerにチェック
  4. Add 1 Constraintを実行

これでView1のX軸の位置が画面中央に設定されました。

続いてY軸(縦軸)の位置を決めましょう。

Y軸は縦の位置です。View1は4つのビューのうち一番上に配置します。設定内容は、「View1のY軸の位置は親ビューに対して、上が0」とします。わかりずらいので解説します。こちらが親ビューです。iPhone/iPadの画面領域全体とイコールです。

f:id:bettychang:20160103153402p:plain

 

灰色のビューがView1です。このように入れ子構造になっています。

f:id:bettychang:20160103153504p:plain

 

 

「View1のY軸の位置は親ビューに対して、上が0」とはつまり、親のビューとView1の上辺の距離を0にします、という意味の定義です。

f:id:bettychang:20160103154316p:plain

 

View1のY軸は画面上一番上と定義できます。設定方法はこちらです。やってみましょう。

f:id:bettychang:20160103154440p:plain

  1. View1を選択
  2. |-ロ-|のアイコンをクリック
  3. 設定用のフキダシが表示されますので、一番上の緑の枠をクリック
  4. View(constraint distance = ・・・)を選択します

 

f:id:bettychang:20160103154918p:plain

 

  • 値を0に設定します
  • 一番上のが赤く表示されていることを確認します
  • エンター(add 1 constraintでもよい)

 

これでView1のY軸の定義ができました。

 

View1のサイズを定義する

次にサイズを定義します。サイズはViewのWidth(横幅)とHeight(縦幅)を定義することで決まります。今回は4つのビューを均等に縦にならべまするわけですが、サイズを定義する時の基本的な考え方として、原則、数値を指定してはいけません。

たとえばあるビューを縦200、横500のサイズに定義したとしましょう。これは下記で指定できます。

f:id:bettychang:20160103160550p:plain

 

この設定をiPhone5sとiPadminiで実機で比較して見てみましょう。

 *わかりやすいように背景を暗くしています

 

iPhone5s縦

f:id:bettychang:20160103161453j:plain

  

iPhone5s横表示

f:id:bettychang:20160103161547j:plain

 

iPadmini

f:id:bettychang:20160103161648j:plain

 

iPadmini

f:id:bettychang:20160103161735j:plain

 

いかがでしょうか。固定値でサイズを決めてしまうと、実行される機種で画面サイズが異なるので、まったく違うレイアウトのビューになってしまっています。

画面の小さいiPhone5sでは、ビューが画面全体の半分くらいを占めているのに対し、iPadminiでは1/4くらいのサイズになっていますね。

このように、さまざまな画面サイズが縦横表示するような現環境では、固定値をしていするとはそれぞれの機種でまったく違う見え方になってしまいます。iPadProでこのビューを表示させた場合、そうとうに小さいビューになってしまうでしょう。

なお、AppStoreでアプリをアップするときにはiPadPro用、iPhone5s用などとアプリを分けてリリースすることはできませんし、現実的に数が多すぎて不可能です。これが固定値は原則使わないという理由です。

 

話を戻しまして、View1のサイズを定義しましょう。固定値を使用しないかわりに用いる定義方法は、割合、比率で考えることです。実際に定義してみます。

 

f:id:bettychang:20160103163447p:plain

  1.  ツリーでViewとView1を選択します
  2. |-◻︎-|をクリック
  3. Equal WidthsとEqual Heightsにチェック
  4. Add 2 Constraintsを実行

この定義で、View1は親ビューであるViewと同じサイズになりました。つまり画面全体です。これはiPadでもiPhone5sでも同じように画面全体を意味します。

 

中央の画面にはまだ制約(定義)が反映されていませんので、updateFrameして見てみましょう。

f:id:bettychang:20160103164003p:plain

  1. View1を選択
  2. |-△-|をクリック
  3. Update Framesを実行

 *command + option + shift + =でもよい

 

実行結果がこちらです。画面いっぱいに表示されていますね。

f:id:bettychang:20160103164136p:plain

 

 縦幅の割合を指定する

このままでは縦幅がおおきすぎるので、値を修正します。

f:id:bettychang:20160103164507p:plain

  1. View1を選択
  2. Xcode画面の右側のプロパティ表示エリアで、Equal Height to :SuperViewのEditを選択
  3. Multiplierを1→0.25に設定
  4. エンター
  5. 中央のiPhone画面のVIew1の縦幅表示が変化する

*表示されていない場合下記アイコンが物差しのマークになっているか確認

f:id:bettychang:20160103164755p:plain

 

 

これでView1のサイズ設定が完了です。Multiplierの値は

1 / ビューの数4  =  0.25

というように、全体を1として、View1の割合を考えます。例えば、5つのビューを均等に並べるのであれば、1つあたりのMultiplierの値は0.2に設定すればちょうどぴったりとなります。

この設定方法であれば、iPhone5sでもiPadProでもView1のサイズは画面縦幅に対する4分の1で描かれます。

 

残りのビューの定義

では、のこりのビューも設定していきましょう。

View2の配置位置ですが、X軸はView1と同じですね。説明は割愛させていただきます。Y軸について考えてみましょう。

 

View2のY軸の位置

View2の位置は、View1のすぐ下に配置する必要があります。よって、定義内容は「View2のY軸の位置は、View1に対して上0」とします。

 

 *その前に、わかりずらいのでView2とView4の背景色を変えておいてください

 

では作業手順はこちらです。

f:id:bettychang:20160103170127p:plain

  1. View2を選択
  2. |-◻︎-|をクリック
  3. add constraintsの一番上の数字の▼をクリック
  4. View1を選択(view1 current distance = xx)*みえずらくてすみません

 

ここで、ビューを配置する時に隙間を空けるようにといった理由を説明します。

この作業は、View2のY軸の位置を決めるために、View1との距離を指定しているわけですが、この時にView1との隙間が下記のようにびっちりと埋まって配置してしまっていると、上記4の「view1 current distance = xx」が選択肢でで表示されない場合があります。

f:id:bettychang:20160103170703p:plain

 これは、xcode中央の画面の中でのパーツの配置位置を参考に、選択肢をひょうじしているためです。よって、ある程度隙間を空けておいて、「View2の上にView1があるよ」とXcodeに認識させておいてやる必要があるわけです。

 

では続きです。

f:id:bettychang:20160103171055p:plain

  • 値を0に設定します
  • 一番上のが赤く表示されていることを確認します
  • エンター(add 1 constraintでもよい)

 

これで、View2のY軸の位置も決まりました。

 

View2のサイズを定義する

View2のサイズ定義ですが、これはView1と同じですね。作業を繰り返してもよいですし、「View1と同じ」と設定することもできます。今回は後者でいきます。

 

f:id:bettychang:20160103171558p:plain

  1. View2とView1を選択します
  2. |-◻︎-|を選択
  3. Equal WidthsとEqual Heightsをチェック
  4. Add 2 Constraintsを実行

これで、「View2のサイズはView1と同じ」になりました。

UpdateFrameして見てみましょう。

f:id:bettychang:20160103172006p:plain

  1. View2を選択
  2. |-△-|をクリック
  3. Update Framesを実行

中央の画面上のView2がView1と同じサイズになりましたか?

ところで、これまで触れてきませんでしたが、制約(定義)が不足したり間違っていると、ツリーエリアのView Controller Scene の右側の矢印が赤くなります。正常だと黄色になります。

まだ作業途中なのに、たびたび赤くエラー表示されますが、気にしないでください。エラー内容を見ることもできますが、わかりずらいのであまりおすすめしません。それよりも、最初に触れた2点をきちんと考えて設定することが大事です。

  • パーツを配置する位置を定義する(X軸、Y軸)
  • パーツのサイズを定義する(横幅-Width、縦幅-Height)

そのうえで、実際の制約をプロパティーエリアで確認して、なにが不足しているか間違っているのかを考えるほうが早い気がします。

 

View3とView4も同様に設定する 

残りのView3とView4についても、View2と同様の作業を行います(説明は割愛させていただきます)。

 

実機で確認

では、実機確認です。

iPhone5sとiPadminiで実行した結果がこちらです。

 

iPhone5s

f:id:bettychang:20160103173145j:plain

f:id:bettychang:20160103173151j:plain

 

iPadmini

f:id:bettychang:20160103173310j:plain

f:id:bettychang:20160103173340j:plain

 

以上です。

ご覧いただきありがとうございました。

swift-bettychang.hatenadiary.jp

swift-bettychang.hatenadiary.jp