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

ベティーのブログ / 作曲、ボカロ、主に結月ゆかり

ベティーです。歌を作っています。Vocaloid、主に結月ゆかり。

オートレイアウトでiPhone電卓の画面を作る その3(完結編)

iPhoneアプリ開発

オートレイアウトでiPhone電卓の画面を作る、その3。今回で完結ですのでがんばっていきましょう。

 

前回の「その2」では、電卓画面の0ボタンを作成し、制約を設定して、見た目を整えたところまででしたね。

**前回までの作業画面**

f:id:bettychang:20160117170316p:plain

 

なお、これまでの記事はこちらになります。

*** その1 ***

swift-bettychang.hatenadiary.jp

 

*** その2 ***

swift-bettychang.hatenadiary.jp

 

では、今回はのこりのボタンとディスプレイ部分を作って、見た目だけの電卓を完成させましょう。

 

目次です。

目次

  • 残りのボタンをすべてコピペして用意
  • 仮配置する
  • 端から順に積んでいく
  • ドットボタンの制約設定
  • その他すべてのボタンの制約設定
  • ディスプレイの制約設定

 

残りのボタンをすべてコピペして用意

まずは残りのボタンをすべて用意しましょう。用意するには、前回作成した0ボタンをコピペするのが楽です。

画面中央左のViewControllerSceneツリーに表示されている0ボタンをコピペしてボタンを複製できます。

f:id:bettychang:20160117172050p:plain

  • 0ボタンを選択(赤枠)
  • Command + c
  • そのままCommand + v
  • ツリー上に0ボタンの複製ができます(黄枠)

では、この手順で必要な数のボタンを用意し、画面中央にボタンを仮配置してみましょう。

 

仮配置する

このように各ボタンをレイアウトしてください。

f:id:bettychang:20160117172438p:plain

 

このとき、各ボタンの間は広く隙間を空けてください。Xcodeに各ボタンの配置関係を正しく認識してもらうためです。

 

では、ボタンの表示と色も整えてみたのがこちらです。

f:id:bettychang:20160117172602p:plain

だいぶ電卓らしくなってきましたね。

 

 


広告

 

 




 

端から順に積んでいく

では、これから残りのボタンすべてに制約を設定していくわけですが、オートレイアウトでは制約を設定する順番が非常に大事です。

 

方法としては、このように端から順々に設定していきます。

f:id:bettychang:20160117171511p:plain

 

倉庫で荷物を端から積んでいくようなイメージですね。

1番の荷物を端っこに入れたらその横に詰めて2番の荷物を並べます。さらに、2番の横に3番。その次4番はスペースがないので上に乗っけていきます。

 

では、2番の荷物から作業をしていきましょう。

 

ドットボタンの制約設定

ドット(ポイント)ボタンの制約を設定する

では、順番どおり、0のとなりに位置すべき「.」の制約を設定しましょう。

まずは配置場所X軸(横軸)です。

 

配置位置X軸とY軸

この場合、ドットボタンのX軸はどこにあるべきでしょうか。正解は0ボタンのとなりです。では「ドットボタンのX軸は0ボタンのとなりです」という制約を設定します。

また、Y軸も設定しますが、Y軸は画面全体に対して一番下という制約にします。画面全体とは、ツリー上でいう一階層うえの「View」のことです。

ではやりましょう。

f:id:bettychang:20160117175140p:plain

  • ツリーでドットボタンを選択(ボタンの名前はわかりやすいように適当に変えてください)
  • |-◻︎-|のアイコンをクリック
  • Add New Constraintsのエリアの左側の▼を選択
  • ドットボタンの左側にあるものが表示されるので、0ボタンを選択(|ー|のアイコンが赤くなっているのを確認、なってなければ自分でチェックする)

 

続きです。

f:id:bettychang:20160117180905p:plain

  • 左側の枠に0を入力

*ここからそのままY軸の設定にはいります

  • Add New Constraintsの下向きの枠の▼をクリック
  • ドットボタンの下に位置するものが表示されますので、Viewを選択
  • 下側の枠に0を入力(|ー|のアイコンが赤くなっているのを確認、なってなければ自分でチェックする)
  • Add 2 Constraintsを実行

 *数字は全て半角で入力してください

 

これで、ドットボタンの配置場所X軸とY軸が定まりました。

 

 サイズWidthとHeight

ではサイズも設定しましょう。これは前回作業の0ボタンとほぼ同じです。横幅が違いますね。「その1」で作成した設計図をみてください。

  • Width(横幅):0.25
  • Height(高さ):0.142857

ではやってみましょう。

f:id:bettychang:20160117181816p:plain

  • dotボタンとその親であるViewを両方選択( commandキーで)
  • |-◻︎-|をクリック
  • Equal WidthsとEqual Heightsにチェック
  • Add 2 Constraintsを実行

これでまず、ドットボタンが親View(画面全体)と同じ巨大サイズになりました。ではサイズ調整です。

f:id:bettychang:20160117182151p:plain

  • ツリー上のドットボタンを単体で選択する
  • Xcode右側のプロパティエリアでEqual Width to: のEditをクリック
  • Multiplierに0.25を設定

同様に、Heightも調整します。

f:id:bettychang:20160117182558p:plain

  • Equal Height to: のEditをクリック
  • Multiplierに0.142857を入力

*すべて半角です

*画面が見つからない方は、上のタブのエリアが物差しアイコンになっているか確認してください

 

これでドットボタンの制約が設定できました。ちょっとupdateFrameして状態を見てみましょう。

updateFrameする

f:id:bettychang:20160117183115p:plain

  •  ツリー上でドットボタンを選択
  • |-△-|のアイコンをクリック
  • 上の方のUpdateFrameを実行

 

 いかがですか?

制約がうまく設定できていれば、下記のように0ボタンにぴったりとくっつきます。

f:id:bettychang:20160117183354p:plain

 

なお、制約の設定を間違えていると、ドットボタンはどこか遠くに吹っ飛んで見えなくなります(とんでいってしまった場合はプロパティエリアでX,Y軸を直接指定するとその座標に戻ってきます)。

 

その他全てのボタンの制約設定

では、のこりのボタンの制約も設定していきましょう。

配置場所X軸Y軸に関してはドットボタンと同じですので、省略させていただきます

ボタンのサイズについても、ドットボタンと同じようにしてもよいのですが、それですと、あとでボタンサイズを変更したくなったときに、全てのボタンの設定を変更しなければならなくなり、変更作業が煩雑になります。

よって、他のボタンのサイズは、「ドットボタンと同じ」という制約にしておきましょう。

その手順がこちらです。画面の作業対象はドットボタンのとなりの「=」ボタンです。

f:id:bettychang:20160117184153p:plain

  • ドットボタンとイコールボタンを両方選択(commandキー使用)
  • |-◻︎-|を選択
  • Equal WidthsとEqual Hightsをチェック
  • Add 2 Constraintsを実行

これで完了です。こちらのほうが調整作業がない分楽ですね。

 

さて、この要領でひたすらボタンに制約を設定していきましょう

作業が完了してupdateFrameした結果がこちらです。

f:id:bettychang:20160117184903p:plain

ちょっとがたついてますが、これはXcode画面表示上の問題(不具合?)のようなので無視です。

最後に黒いディスプレイ画面を設定しましょう(うっかりディスプレイもボタンで作成してしまいましたが、どのみち動かないので、、今回はよしとします)。

 

ディスプレイの制約設定

ここまで設定できたら大体オートレイアウトの仕組みがお分かりいただけたかとおもいます。ではのこりのディスプレイ部分の制約を設定しましょう。

このディスプレイのX軸の位置はどこになりますか?これは横一面をつかっているので、X軸の位置は中央です。

Y軸はどうでしょうか。ディスプレイとボタンの間は隙間がないデザインになっているので、Y軸は下のボタンにくっついているのがよいですね。下に0を設定しましょう。

 

では設定しましょう。

配置場所X軸です。

f:id:bettychang:20160117185635p:plain

  • ディスプレイボタン(画面ではresultAreaという名前に変えています)を選択
  • |呂のアイコンをクリック
  • Horizontally in Containerにチェック

これで、ディスプレイのX軸が中央揃えになりました。

次にY軸ですが、これは下のボタンにくっつけます。

f:id:bettychang:20160117190237p:plain

  • ディスプレイを選択
  • |-◻︎-|をクリック
  • Add New Constraintsエリアの下の▼をクリック

ここでディスプレイボタンより下に配置されているものがすべて表示されます

f:id:bettychang:20160117190509p:plain

  • レイアウト上一番上の段にあるボタンのどれか(この場合C)を選択する

 

サイズも設定しましょう。設計図をみてください。

  • Width:1
  • Height:0.285714

ではこちらも設定します。

f:id:bettychang:20160117190950p:plain

  • ディスプレイ(resultArea)とViewを両方選択(commandキーで)

  • |-◻︎-|をクリック
  • Equal WidthとEqual Heightsをチェック
  • Add 2 Constraintsを実行

これで、ディスプレイ(ボタン)は画面全体と縦横同じ幅になりました。よこはこのままでよいので、縦幅だけ調整しましょう。

f:id:bettychang:20160117191258p:plain

  • ディスプレイ(ボタン)を選択
  • プロパティエリアのConstraints箇所でEqual Height to のEditをクリック
  • Multiplierに0.285714を実行

 

これで一通り制約設定が完了しました。おつかれさまでした。

 


広告

 


 

 

実機で確認

iPhone5sでの実行画面です。

f:id:bettychang:20160117191715j:plain

 

すごく偽物感がありますが、一応成功ですね。なお、こちらが本物です。

f:id:bettychang:20160117191830j:plain

 

iPadminiでの実行結果。

 

f:id:bettychang:20160117192004j:plain

 

iPadでもレイアウトが崩れずに表示されていますね。試しにiPadを横にしてみました。

f:id:bettychang:20160117192124j:plain

いいですね。

なお、すでにお気付きのとおり、罫線が表示されていません。残念ですが、デフォルトでは罫線がでないので追加作業を行う必要があるのですが、それはまた別の機会にしたいと思います。

 

以上です。ご覧いただきありがとうございました!

 

 

swift-bettychang.hatenadiary.jp

 

swift-bettychang.hatenadiary.jp