回答編集履歴

1

追記

2020/07/25 09:20

投稿

TsukubaDepot
TsukubaDepot

スコア5086

test CHANGED
@@ -89,3 +89,93 @@
89
89
 
90
90
 
91
91
  もちろん、画面のサイズによってボタンのサイズも変えたい(今回のように50固定ではなく、画面幅の1/4 にしたい、など)があるかと思いますが、その場合はボタンの幅の拘束を画面幅を基本に設定したり、あるいはStackViewを使って設定することになるかと思います。
92
+
93
+
94
+
95
+ # 追記
96
+
97
+
98
+
99
+
100
+
101
+ どのような例がいいのかぱっと思いつかなかったので、下記のような例を考えてみました。
102
+
103
+
104
+
105
+ ![イメージ説明](02b07a42e4970dfe4e585615c904d9e3.png)
106
+
107
+
108
+
109
+ `Label 1` は左上を基準に `top`, `leading` ともに SafeArea に対して`0`, 幅は親ビューの半分になるように配置しました。
110
+
111
+
112
+
113
+ 右下の `Label 2`は左下にドラッグして配置しました。ドラッグした際にガイドに合わせ、`bottom`, `trailing` ともに SafeArea に対して`0`になるように移動しました。ただし、この場合、拘束をかけていないため当然エラーになりますので、`Add Missing Constraints`を使って拘束を自動で決めています。
114
+
115
+
116
+
117
+ 拘束をかけたので、どのような画面サイズであっても同じように表示されるようにおもえますが、iPhone 4Sの場合は `Label 2` が欠けてしまっているのが分かるかと思います。
118
+
119
+
120
+
121
+ 本来であれば、`Label 2` の拘束はラベルの右端、下端に対して掛かって欲しいのですが、そうではなく左側に対して絶対値で207(`Safe Area.leading + 207`)で掛かってしまいました。したがって、画面幅の小さい iPhone 4S ではラベルの右側がはみ出てしまう結果となってしまっています。
122
+
123
+
124
+
125
+ 「Add Missing Constraint」は自動で不足している拘束をかけてくれることには間違いないかと思うのですが、どのような条件を用いるのかはその時の状態によって変わってきます。
126
+
127
+
128
+
129
+ したがって、自動で足りない拘束を足したとしても、それがきちんと作用するのかはご自身で確認する必要があるかと思います。
130
+
131
+
132
+
133
+ コメントからの引用ですが、
134
+
135
+
136
+
137
+ > 今更ですがオートレイアウトは、私のように左上・左側を基準に配置した場合、小さい画面で配置したパーツの画面を大きい画面で表示すると左上側に寄って表示される。という事でしょうか。
138
+
139
+ 一応、iPadの画面サイズでシュミレーションしてみるたところ、左上側に表示されました。
140
+
141
+
142
+
143
+ 全てのパーツを左上基準にすれば、全てのパーツが左上側に寄ってしまいます。
144
+
145
+
146
+
147
+ これは、たとえば部屋の模様替えと置き換えて考えてみると分かりやすくなるかも知れません。
148
+
149
+
150
+
151
+ 北西を基準にし、北側の壁に沿ってソファーをおき、その反対側、たとえは南側の壁に沿ってテレビを置くとします。
152
+
153
+
154
+
155
+ この場合、たとえば「ソファーの位置は北側にあるソファーから8メートルの位置」と決めてしまった場合、大きい部屋だと納まりますが、小さい部屋になると当然ソファーは収まりません。
156
+
157
+
158
+
159
+ しかし、「ソファーは北側の壁から 0 の場所、テレビは南側の壁から 0 の場所」と決めれば、ソファー、テレビとも壁に沿って適切な距離を置いて配置することが可能になります(この場合、物理的な大きさは無視しています)。
160
+
161
+
162
+
163
+ なので、AutoLayout であっても、**左上だけを基準にするのではなく、上下左右の位置や部品それぞれの大きさを総合的に判断し、適切な制約をあらかじめ予想しながら付けていく必要がある**かと思います。
164
+
165
+
166
+
167
+ > オートレイアウトとは、大きい画面でも小さい画面でも、それぞれの画面に応じてパーツが配置してくれると思っていましたが、もともと私の思い違いだったのでしょうか。
168
+
169
+
170
+
171
+ 基本的には「画面に応じて配置」してくれる機能と思って良いかとおもいます。
172
+
173
+ ただし、パラメータの指定方法は適切に行わないと、画面サイズが変わった場合に予想外の結果を起こしてしまう弊害もあります。
174
+
175
+
176
+
177
+ 繰り返しになりますが、大きい部屋から小さい部屋に引っ越すがレイアウトは崩したくない場面を想定し、それぞれの家具をどの位置を基準にすればより適切に収まるのかはレイアウトする人間がきちんと考える必要があります。
178
+
179
+
180
+
181
+ (そもそも、拘束式は `[設定する値] = [倍率] * [基準にする値] + [定数]` という単純な式でしか表現されないため、このことを念頭に置く必要もあります)