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

からたちねみち

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

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

iPhoneアプリ開発

オートレイアウトで電卓画面を作ってみましょう。その2です。

 

***その1はこちら***

swift-bettychang.hatenadiary.jp

 

前回までは、電卓アプリの画面構成を考え、紙に設計図を描くところまでやりました。今回から実際にオートレイアウトで画面をつくっていきましょう。

「その2」では、左下の0のボタンだけを作ります。

 

では目次です。

 

目次

  • プロジェクトの新規作成
  • ボタンを設置する
  • 0ボタンを作る

 

 

プロジェクトの新規作成

では、プロジェクトを作りましょう。

名前はなんでもいいです。私は「calc」としました。具体的なプロジェクト作成手順はごちらの過去記事をご参照ください。

swift-bettychang.hatenadiary.jp

 

ボタンを設置する

プロジェクトが新規作成できたら、ストーリーボードを選択してください。画面左側のMain.storyboardです。

f:id:bettychang:20160116181915p:plain

選択すると、画面中央にストーリーボードが表示されます。 

 

では、電卓の0を入力するボタンを作るために、ボタンパーツを設置しましょう。

f:id:bettychang:20160116182409p:plain

  • Xcode右下のパーツがたくさんあるエリアから、Buttonを選択
  • 中央の画面枠内にドラッグアンドドロップ

これでボタンが一つ用意できました。

 

 



0ボタンを作る

設置したボタンを左端の「0」のボタンとして使うために加工していきましょう。

まずはボタンに制約を設定します。

制約とは、ボタンの配置場所やサイズを定義するための設定です。いまストーリーボード上にボタンをドラッグして設置しましたが、実のところ、プログラム上はこのボタンを「どこに」「どのくらいの大きさで」描画するかは定まっていないのです。よって、それらを定義してやる必要があります。その定義を制約といいます。

 

ここで必要な定義は下記4つです。

  • 0ボタンを配置する場所X軸(横軸)の定義
  • 0ボタンを配置する場所Y軸(縦軸)の定義
  • 0ボタンのサイズWidth(横幅)の定義
  • 0ボタンのサイズHeight(高さ)の定義

*ボタンはサイズの制約を定義しなくてもエラーにはなりませんが、今回のケースではレイアウト上必要なので定義します

 

ではまず、配置場所を定義します。

 

0ボタンの配置場所を定義

f:id:bettychang:20160116182804p:plain

  • Buttonを選択
  • 画面中央下の|-◻︎-|をクリック
  • Constrain to marginsのチェックを外す

*今日気づいたのですが、左端にパーツを配置するときに、COnstrain to marginsが付いていると、幅を0に設定しても余計なマージン(スペース)が入ってしまい、きっちり端に寄せることができませんでした。このチェックを外すと解消されました。余計な余白が入ってしまう場合はここのチェックを外して再設定しましょう

 

0のボタンは画面左下に定義します。

f:id:bettychang:20160116183915p:plain

  • Add New Constraintsの左に0を設定
  • 下の▼を選択し、対象にViewを選択

 *下の制約を設定するときに、Bottom Layout Guideを選択(デフォルト?)してしまうと余計なマージン(余白)が入ってしまうので、▼を押してViewを明示的に選択しています

 

下も左の位置と同様に、0を設定します。

f:id:bettychang:20160116184521p:plain

  • Add New Constraintsの下側に0を設定
  • Add 2 Constraintsを実行

これで、0ボタンの配置場所が決定しました。設定内容を要約すると下記のとおりです。

  • Viewに対し左に0を設定をしたので、0ボタンのX軸(横軸)の位置は画面上最も左端に配置される
  • Viewに対し下に0を設定をしたので、0ボタンのY軸(縦軸)の位置は画面上最も下に配置される

次にサイズを定義します。

 

0ボタンのサイズ定義

この方法では、まず親のビューと同じサイズとなるよう制約を定義したのち、制約の内容を調整して適正なサイズにします。やってみましょう。

f:id:bettychang:20160116185309p:plain

  • Buttonと親のViewを両方選択して(commandキー使用)
  • |-◻︎-|のアイコンをクリック
  • Equal WidthsとEqual Heightsにチェック
  • Add 2 Constraintsを実行

 

これで、ButtonはViewとサイズが等しくなりました。ではこのサイズを調整します。

0ボタンのサイズを調整

 ボタン単体を選択し直したうえで、Xcode画面の右側のエリアの物差しアイコンのところをチェックしてください。ボタン0に設定した制約が表示されますので、必要な箇所を修正します。

 

f:id:bettychang:20160116190003p:plain

 

Width(横幅)を修正します。ボタン0の横幅は、0.5でしたね(設計図をみてください)。ではそのように設定します。

f:id:bettychang:20160116185722p:plain

  •  Equal Width to のEditをクリック
  • Multiplierに0.5を入力しエンター

これで、ボタン0の横幅はView(画面全体)1に対して0.5になりました。

 

次にHeight(高さ)です。やり方はWidthと同じです。 

f:id:bettychang:20160116190508p:plain

  • Equal Hight to のEditを選択
  • Multiplierに0.142857を入力しエンター

これで、ボタン0の高さはView(画面全体)1に対して0.142857倍、約1/7になりました。

 

ではupdateframeしてみましょう。updateFrameとは、設定した制約をXcode上の中央の画面に反映させる処理です。つまり設定した制約のとおりボタンを配置したらこうなる、というのが確認できるわけです。

UpdateFrameする

f:id:bettychang:20160116191010p:plain

  • 0ボタンを選択して
  • |-△-|をクリック
  • 上の方のUpdateFramesを実行する

 

結果がこちらです。

f:id:bettychang:20160116191211p:plain

 よさそうですが、ボタンが透明なのでわかりずらいですね。ボタンの色をつけてみましょう。

 

f:id:bettychang:20160116191533p:plain

いいですね。ついでに下記も直してみました。

  • Buttonと青で描いてある文字を0にして、色を黒に変更
  • サイズも大きくした
  • 画面中央左のButtonという名称も0に変更した

色や文字のサイズは画面右側の下矢印マークのところからいろいろと変更できますので、いじってみてください。

 

今回はここまでです。次回は他のボタンも全て配置して、電卓画面を完成させましょう。

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

 

swift-bettychang.hatenadiary.jp