どうもこんばんは。
肉球 (@nikuq299com) です。
先日の記事に続き、今回は実機で動かせるアプリの作成を行ってみます。
今回の記事は5です。
- iOSアプリ開発の前準備
- Xcodeを使って簡単なプログラムを動かしてみる
- iOSアプリの基礎
- 地図を表示してみる
- 部品の使い方 (← 今回ココ)
- SNS機能を呼び出してみる
- カメラを使って写真を保存してみる
はじめに
部品の使い方 も、iOSアプリ開発の基礎です！
部品の使い方 における大事なポイントは、レイアウトです。
開発者は、なぜレイアウトを意識しなければならないのかをこの記事で説明します。
部品の使い方
大事なのはレイアウトをSwiftに任せること！
レイアウトを意識する理由
レイアウトを意識する必要がある理由は、iPhone、iPadなどの複数機器に対してマルチデバイス対応するためです。
皆さんも御存知だと思いますが、iPhoneとiPadは画面の解像度が全く違います。
それどころか、iPhone、iPadなどの同一機器でも、リリースの世代に寄って解像度が違います。
iOS、Mac、Windowsで使われる、マウスでカチカチ操作するGUIアプリは、部品の配置を座標指定で行います。
iOSは、iPad、iPhoneなど、多くの画面サイズが存在するため、部品の座標を絶対値で決めてしまうと、利用するデバイスによって部品の配置が画面設計と異なってしまいます。
下記の通りにテキストラベルを画面中央上部に設定したとしても、レイアウトを意識しないと、iPhoneとiPadでは下記の通り、表示結果が異なってしまいます。
図1. Xcodeで部品の配置を中央上部に設計する
図2. 図1で設計した画面をiPhoneとiPadで表示する
オートレイアウトを設定した場合の違い
このような表示結果になった原因は、レイアウトを意識した画面設計を行わなかったからです。
オートレイアウトを設定しない場合、部品は画面左上を原点とした絶対座標で部品を配置しますが、オートレイアウトを設定した場合は、相対座標を設定することができます。
今回の例だと、テキスト中央部におけるX軸は最大値の1/2、Y軸は絶対値となるように設定しています。
レイアウトを設定する方法
レイアウトを設定する方法は簡単です。
「Resolve Auto Layout Issues」から、「Add Missing Constraints」を選択するだけです。
オートレイアウトを設定すると、ドキュメントアウトライン上にConstraintsというグループができており、これがオートレイアウトにおける部品レイアウトの情報を格納しています。
Constraintsにぶら下がる2つの要素は、上の縦線が入っているアイコンの要素をクリックするとX座標、横線が入っているアイコンの要素をクリックするとY座標に関するオートレイアウト情報を設定でき、メイン画面右上に入力欄を表示します。
設定値によって、どんな画面サイズでも、設計者の意図した場所に部品を配置することができるので、興味がある場合はリファレンスで設定可能な情報を調べてみてください。
まとめ
部品の使い方も、Swiftへ任せることが大事！
レイアウトを意識して画面を設計すれば、iPhoneとiPadのマルチデバイス対応ができますし、新型のiPhoneやiPadをリリースしても、アプリに大きな影響は与えません。
iPhoneXやホームボタンの廃止が噂されているiPadは、画面上部のノッチについて、Appleからデザインルールが出ていますが、大きな影響は出ないでしょう。
Swiftのアプリ開発環境は至れり尽くせりなので、初心者と共に、C++やJavaなど、旧言語でGUI開発経験のある方は、習得しやすいと思いますので、ぜひ挑戦してみてください。
もし、本格的にプログラミング食でべていきたい場合は、TEACH ACADEMYの iPhoneアプリコース などのオンライン学習プログラムを使うことも、費用対効果的に検討対象に入れることをおすすめします。
それでは。ごきげんよう。
コメントを残す