新人奮闘記8

iOS入門

今回は電卓の画面をオートレイアウトで作成してみました。

各iOS端末に合わせて表示されるよう、サイズの指定を全て比率で設定しました。

ターゲット端末の画面サイズは3.5~5.5inchのiPhoneと9.7inchのiPadを想定しています。
Storybordにて画面を作成する際、Simuｌated Metricsのsizeを任意の端末サイズに設定して
UIを配置していく方法ではなく、今回は、StoryBordのデフォルトサイズで作っていきました。

[完成図]

この方法だと従来通りpxで固定値のオブジェクトを配置していこうとすると、大きな画面サイズでうまく対応できませんので固定値で作ろうという考えがなくなります。

固定値だと対応できないので、今回は画面の設計を％で考え直し、前回作成した画面を全て、割合で設計しました。

各オブジェクトのwidth,heightを%で考えて作成していくと、端末サイズに合わせて表示されるようになるので、端末毎に作る必要もなくなります。

つまづいたポイントとして、たくさんのボタンをどのように配置していくかですが、元からあるView
の上にViewを重ねて、区切っていくとオブジェクトを簡単に配置できる事を学びました。

例えば、画面の上下で半分に分ける場合は、二つのViewをドロップすれば、画面上部と画面下部を分けて作成する事ができるので、片方で付与した制約やマージンの影響はもう片方に及ぶリスクは減り、開発がしやすくなります。

今回のViewの配置

図の通り、Viewの上にBaseViewとして一枚Viewを挟みその上に大きく二つに分割しています。BaseViewのマージンを上下左右0で制約をつける事で、ステータスバーが考慮された状態で作成していくことができるメリットがあります。

・よって複数のパーツを配置する時は、Viewを重ねて分割する。

・オブジェクトを配置する前に、BaseになるViewを一枚敷き、上下左右のマージンを0にして画面いっぱいに広げる。

[Constrain]

High、Low二つのViewを均等に分割する制約はそれぞれのheightを50%としました、この時、HighView,LowViewは何に対して50%なのかがViewを分割して作成していく際とても重要な事で、複数のViewが重なってくると、間にあるBaseViewに対して50%、もしくは最上位のViewに対して50%なのかで、2つのサイズが異なってきます。今回の場合はBaseViewを基準とするので前者としました。

この時、LowView、HighViewの縦、横幅の制約の付け方で、二通りある事に気づきました。

1.ViewController SceanにてLowまたはHightView と親のBaseViewを選択した状態でPinから EqualWidth、EqualHeightを指定した制約の付け方

2.エディタエリアのViewControllerにてドラッグで直接オブジェクトを選択する方法

後者は、選択するオブジェクトや方向によって、制約の項目が違っている事に気づきました。
付与が可能な制約項目がウィンドウにて表示されるため、迷う事はありません。
その点で便利なのは後者ですが、確実に制約を設定したい場合は1の方法で設定するほうが基本的で良いと感じました。

[マージン比率]

UIButtonの配置にて、均等にボタンの間隔を保つ時に苦戦を強いられました。
今まで、各オブジェクトに対してsizeInspecterにてMultiplierでサイズを決めていましたが、
マージンもMultiplierで指定する事が出来なかったので、別の手段として、マージンの代わりにオブジェクトを配置する方法を取りました。一番シンプルなViewオブジェクトを今回はSpeacerとして配置しました。これにより今まで通りMultiplierにて、割合でサイズの設定が可能となります。

まとめ

・複数のオブジェクトを配置する時はViewを重ねて分割する

・下地となるViewをもとからあるViewの上に一枚載せる

・各オブジェクトは基準としたいオブジェクトに対して、サイズが何%なのかを意識する。

・マージンサイズをMultiplierで指定するのではなく、Viewをマージンの代わりに配置する

・たくさんのViewを配置すれば、それだけ多くの負荷がかかるため、今後、別の対策を考えていきたいと思います。

・完成後に不要なオブジェクトの色を透明にする。

Tweet