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

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

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

オートレイアウトでiPhone電卓の画面を作る その1

iPhoneアプリ開発

今回はオートレイアウトを使ってiPhoneの標準アプリの電卓(計算機)の画面を再現してみましょう。こちらです。

f:id:bettychang:20160115150039p:plain

 

なお、計算機能はつくりません。画面のレイアウトだけ再現してみましょう。

 

目次

  • オートレイアウトとは
  • 電卓アプリの画面構成を分析する
  • 画面の寸法を考える
  • 紙に寸法を書いてみる

 

オートレイアウトとは

まず、オートレイアウトとはなんでしょうか。

現在スマホにはiPhoneやiPadなど様々な画面サイズの機種がありますね。オートレイアウトは一つのプログラムで、どの機種でも同じようなアプリ画面に見せるための画面設計方法です。

例えば、こちらのピアノアプリの画面はオートレイアウトで作っています。

ピアノPiano - 無料練習・演奏・苦手キー対策・脱初心者! on the App Store

これをiPhone5sでDLして表示するとこうです。

f:id:bettychang:20160115152839j:plain

 

iPadminiだとこのように表示されます。

f:id:bettychang:20160115152800j:plain

 

 画面サイズの異なるiPhoneとiPadでも同じようなレイアウトでピアノの鍵盤が表示されていますね。

こちらのプログラムですが、iPhone用、iPad用と別々のプログラムを用意しているわけではありません。また、プログラム内で機種がiPhoneの場合はこうで、機種がiPadminiの場合の鍵盤の横幅はいくつで....などといわゆる処理の分岐設定しているわけでもありません。

オートレイアウトではそもそも機種ごとの画面サイズはまったく考慮しなくても大丈夫なのです。

*というよりも、機種が多くなりすぎて、考慮して設計していくのが大変すぎるために、Appleが用意した機能といえるのかもしれません。

理由は以降で実際に設定してみればわかりますが、ここでは、このように画面サイズが異なるどの機種でも、同じようなレイアウトを再現してくれるのがオートレイアウトと覚えておきましょう。

 

電卓アプリの画面構成を分析する

では、実際に電卓のアプリの画面を真似して作ってみましょう。さっそく作っていきましょう、と言いたいところですが、まずは画面の分析をしてみましょう。

f:id:bettychang:20160115150039p:plain

この画面は、各計算ボタンの正方形がたくさん並んで、電卓画面を作っていますね。

横は正方形が4つ並んでます。縦は、計算ボタン部分が5つで、上部のディスプレイ表示部分が2つ分とっていますね。縦はとりあえず7と考えておきましょう。

 

f:id:bettychang:20160115151139p:plain

 

画面の寸法を考える

 

この画面を再現するために、画面の寸法を考えてみましょう。

オートレイアウトでは、画面全体に対する正方形一つのサイズの占める割合がいくつかを考えると楽で綺麗に設計できます。

まず、左下の0ボタンに焦点をあてて考えてみましょう。

0ボタンの横幅

0ボタンの横幅について考えましょう。画面全体を1と考えたときに、どのくらい0ボタンに割り当てるか、という風に考えます。

f:id:bettychang:20160115161333p:plain

みたところ、0ボタンの横幅は画面全体に対して半分も領域を使っていますね。半分つまり0.5です。

 

0ボタンの縦幅

縦幅は、縦全体1に対して1/7です。

f:id:bettychang:20160115162510p:plain

1 / 7 = 0.14285714です。Xcodeの設定上では小数点第6位までしか入らないので、0.142857としましょう。

*このやり方の懸念点は、レイアウトによっては少数が割り切れなかったり非常に長くなってしまうことですが、数字が小さくなればなるほど誤差の範囲に近くなってくるので、あまり気にしなくても大丈夫です

 

ではこの要領でこの画面のレイアウトを書いてみましょう。

 

紙に寸法を書いてみる

実際にこれから作る画面の寸法を、紙に書いておきましょう。

なんといっても紙に手書きが一番速いです。

f:id:bettychang:20160115163714j:plain

このようなきたない設計図といえるかわからないもので大丈夫です。外枠がiPhone/iPadの画面全体と思ってください。

アプリやエクセルで書くのもよいですが、時間がかかるのでなるべく紙がよいです。このように各数値を忘れないように書いておきましょう。

 

今回はここまでです。次回はこの設計図をもとにXcodeのストーリーボード上でオートレイアウトして電卓アプリ画面を作っていきます。

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

 

swift-bettychang.hatenadiary.jp

 

swift-bettychang.hatenadiary.jp