オートレイアウトの設定・使用について

Question

Xcode（Ver 10.1）でiPhone用のアプリを作成して、数か月の初心者です。
現在、iPhone７の画面サイズ上で様々なパーツ（Label、Button、TextField、TableViewなど）を何個かグループ設定して、各グループの基準となるパーツを画面上部と画面左からの位置を決めて、そのグループ内の各パーツを左と上から相対的に間隔を空けて配置しています。
当初から、動作させるiPhone機種によって各パーツの配置が異なるとの事で、画面右下の【|-△-|】の「Add Missing Constraints」を選択してパーツを配置しアプリを作成してきました。
概ねアプリも完成してきたところで、iPhone5sでシュミレーションしてみたところ、iPhone７の右下側が隠れて表示される状態で操作できないパーツがあります。iPhoneXRでは、左上側に寄って表示しているので画面上では操作に問題ない状態です。
作成当初からオートレイアウトを考慮して「Add Missing Constraints」を選択した状態で作成してきたつもりですが、オートレイアウトの機能が効いていないようです。
オートレイアウトについてWeb上で調べていますが、自分の疑問に対する内容が見つかっていません。

そこで、次のような事について、教えてください。
１．オートレイアウト出来るように「Add Missing Constraints」を選択してパーツを配置して作成してきましたが、この方法ではダメだったのでしょうか。ダメなようであれば、どうしたら良かったのでしょうか。
２．現在のiPhone７用に配置してきた状態から、iPhone5sへのオートレイアウト可能な状態に出来るのでしょうか。出来るようであれば、その方法はどうしたら良いのでしょうか。

Answer 1

１．オートレイアウト出来るように「Add Missing Constraints」を選択してパーツを配置して作成してきましたが、この方法ではダメだったのでしょうか。ダメなようであれば、どうしたら良かったのでしょうか。

Add Missing Constraint で自動的に不足している拘束を追加させる方法は間違いでは無いと思いますが、必ずしも意図した拘束が付くとはかぎらないので、逐一確認しておく必要はあるかと思います。

２．現在のiPhone７用に配置してきた状態から、iPhone5sへのオートレイアウト可能な状態に出来るのでしょうか。出来るようであれば、その方法はどうしたら良いのでしょうか。

一度全ての拘束を解き、再度つけ直す必要があるのではないかとおもいます。

mochi-mochi　さんが具体的にどのような拘束をつけられたか分かりませんが、ありがちなパターンは次のような例かと思います。

|-20-|Button(50)|-200-|Button(50)|-|

たとえば、このような横向きの拘束の例を考えたいと思います。

一番左の|は画面の左端、-20-は次の部品までの距離、|Button(50)|は横幅50のボタン、単独の-は距離の設定がない、とお考えください。

この場合

• 一番左のボタンは画面の左から20ポイント目に配置
• 一番左のボタンの幅は50ポイント
• 二番目のボタンは、左端の空白20ポイント、左端のボタン50ポイント、次の空白200ポイントの合計300ポイントの部分に配置
• 二番目のボタンの幅は50ポイント

ということになります。

この場合、たとえば画面の幅が350ポイントあれば、どうにか二番目のボタンまで表示できますが、もし350ポイント以下であれば二番目のボタンが切れてしまいますし、300ポイント以下であれば二番目のボタンすら表示されていません。

この例はX軸方向で考えていますが、Y軸方法で同じような問題が生じているのだと思います。

一方、

|-20-|Button(50)|-|Button(50)|-20-|

次のような拘束にした場合

• 一番左のボタンは画面の左から20ポイント目に配置
• 一番左のボタンの幅は50ポイント
• 二番目のボタンは、右端から20ポイント目に配置
• 二番目のボタンの幅は50ポイント

という意味になります。

注意していただきたいのは、二番目のボタンが「右端」からの設定であり、二つのボタンの間の距離は設定しない、という点です。

このようにすれば、画面の幅は不定でも、両方のボタンを表示することが可能となります。

もちろん、画面のサイズによってボタンのサイズも変えたい（今回のように50固定ではなく、画面幅の1/4 にしたい、など）があるかと思いますが、その場合はボタンの幅の拘束を画面幅を基本に設定したり、あるいはStackViewを使って設定することになるかと思います。

追記

どのような例がいいのかぱっと思いつかなかったので、下記のような例を考えてみました。

Label 1 は左上を基準に top, leading ともに SafeArea に対して0, 幅は親ビューの半分になるように配置しました。

右下の Label 2は左下にドラッグして配置しました。ドラッグした際にガイドに合わせ、bottom, trailing ともに SafeArea に対して0になるように移動しました。ただし、この場合、拘束をかけていないため当然エラーになりますので、Add Missing Constraintsを使って拘束を自動で決めています。

拘束をかけたので、どのような画面サイズであっても同じように表示されるようにおもえますが、iPhone 4Sの場合は Label 2 が欠けてしまっているのが分かるかと思います。

本来であれば、Label 2 の拘束はラベルの右端、下端に対して掛かって欲しいのですが、そうではなく左側に対して絶対値で207（Safe Area.leading + 207）で掛かってしまいました。したがって、画面幅の小さい iPhone 4S ではラベルの右側がはみ出てしまう結果となってしまっています。

「Add Missing Constraint」は自動で不足している拘束をかけてくれることには間違いないかと思うのですが、どのような条件を用いるのかはその時の状態によって変わってきます。

したがって、自動で足りない拘束を足したとしても、それがきちんと作用するのかはご自身で確認する必要があるかと思います。

コメントからの引用ですが、

今更ですがオートレイアウトは、私のように左上・左側を基準に配置した場合、小さい画面で配置したパーツの画面を大きい画面で表示すると左上側に寄って表示される。という事でしょうか。

一応、iPadの画面サイズでシュミレーションしてみるたところ、左上側に表示されました。

全てのパーツを左上基準にすれば、全てのパーツが左上側に寄ってしまいます。

これは、たとえば部屋の模様替えと置き換えて考えてみると分かりやすくなるかも知れません。

北西を基準にし、北側の壁に沿ってソファーをおき、その反対側、たとえは南側の壁に沿ってテレビを置くとします。

この場合、たとえば「ソファーの位置は北側にあるソファーから8メートルの位置」と決めてしまった場合、大きい部屋だと納まりますが、小さい部屋になると当然ソファーは収まりません。

しかし、「ソファーは北側の壁から 0 の場所、テレビは南側の壁から 0 の場所」と決めれば、ソファー、テレビとも壁に沿って適切な距離を置いて配置することが可能になります（この場合、物理的な大きさは無視しています）。

なので、AutoLayout であっても、左上だけを基準にするのではなく、上下左右の位置や部品それぞれの大きさを総合的に判断し、適切な制約をあらかじめ予想しながら付けていく必要があるかと思います。

オートレイアウトとは、大きい画面でも小さい画面でも、それぞれの画面に応じてパーツが配置してくれると思っていましたが、もともと私の思い違いだったのでしょうか。

基本的には「画面に応じて配置」してくれる機能と思って良いかとおもいます。
ただし、パラメータの指定方法は適切に行わないと、画面サイズが変わった場合に予想外の結果を起こしてしまう弊害もあります。

繰り返しになりますが、大きい部屋から小さい部屋に引っ越すがレイアウトは崩したくない場面を想定し、それぞれの家具をどの位置を基準にすればより適切に収まるのかはレイアウトする人間がきちんと考える必要があります。

（そもそも、拘束式は [設定する値] = [倍率] * [基準にする値] + [定数] という単純な式でしか表現されないため、このことを念頭に置く必要もあります）

Comments

[mochi-mochi]

回答いただきありがとうございます。

１項目では「Add Missing Constraints」が設定されていれば、”Costraints”に各パーツの位置情報が意図する内容で登録されている。と思ってよいでしょうか。一部ですが、以下のような状態で登録しています。
　　Button xx.top = Safe Area.top + 380
　　Button xx.leading = Safe Area.leading + 65
　　Button yy.top = Safe Area.top + 380
　　Button yy.leading = Button xx.leading + 10

２項目目については、iPhone７用に配置した情報を画面比率から全て85％縮小した位置・パーツの大きさで再配置している途中です。
途中経過ですが、iPhone７で隠れていた部分をiPhone5sで確認できています。

今更ですがオートレイアウトは、私のように左上・左側を基準に配置した場合、小さい画面で配置したパーツの画面を大きい画面で表示すると左上側に寄って表示される。という事でしょうか。
一応、iPadの画面サイズでシュミレーションしてみるたところ、左上側に表示されました。

オートレイアウトとは、大きい画面でも小さい画面でも、それぞれの画面に応じてパーツが配置してくれると思っていましたが、もともと私の思い違いだったのでしょうか。

[TsukubaDepot]

図入りで説明した方が分かりやすいと思いましたので、回答本文に追記してみました。

[mochi-mochi]

具体的な画面ショット・部屋の模様替えの例による説明でオートレイアウトが理解出来ました。
画面に配置するパーツが少なければ、上下左右・パーツの大きさなどを変更できるパラメーターを設定して作成できそうです。しかし、当方の場合、50個ほどのTextField、10個ほどのLabelを配置しているので無理そうです。

具体的な手法は分かりませんが、表示する機種の画面の大きさを検知して、それぞれのパーツ配置・大きさを比率から設定するようにしないと、機種の区別なく表示できないのではないか。と思いました。
当方は、iPhone７とiPhone5sを想定しており、iPhone5s用に配置すればこれより大きい画面には対応できそうなのでいいかな。と思っています。

最後に本来の質問から離れてしまうかもしれませんが、作成している画面へのパーツの数や配置によるのでしょうが、パーツの多いような場合、どうされているのでしょうか。

[TsukubaDepot]

> 当方の場合、50個ほどのTextField、10個ほどのLabelを配置しているので無理そうです。

たとえば、これらの幅や高さを親View の1/10とかに設定すれば（注1）それほどややこしいことではないかもしれません。

> 具体的な手法は分かりませんが、表示する機種の画面の大きさを検知して、それぞれのパーツ配置・大きさを比率から設定するようにしないと、機種の区別なく表示できないのではないか。と思いました。

AutoLayout というか、InterfaceBuilder で StoryBoard を使う際でも、表示する機種の画面を基準にして、各パーツのサイズを決めることは可能です。前の文の（注1）がまさにそれにあたります。

> 最後に本来の質問から離れてしまうかもしれませんが、作成している画面へのパーツの数や配置によるのでしょうが、パーツの多いような場合、どうされているのでしょうか。

最初は少々作り込んでも最終的な管理が簡単なのは UITableView を使うことかもしれません。

あるいは、ScrollView に StackView を載せる方法もあるかもしれません。

そもそも、行数がすくなければ　StackView を使えば同じデザインの繰り返しを簡単に実現できます。

最終的な実装に行き詰まりそうであれば、具体的なデザインを元に質問されてもいいかもしれません。

[mochi-mochi]

いろいろとご教授いただきありがとうございます。
今回の「オートレイアウトの設定・使用」に対しての疑問は、解決しました。
本当にありがとうございました。