【Swift4】AutoLayoutで左右との距離を0にしたが隙間ができる(View内のViewの制約が反映されない？)
- 評価
- クリップ 1
- VIEW 1,078
前提・実現したいこと
AutoLayoutでレイアウトを調整しているのですが、一つだけどうしても言うことを聞いてくれないものがあるのでアドバイスいただけると嬉しいです。
画像がざっくりとしたレイアウトです。
縮尺が違いますが、左側がiPhone8、右側がiPad Proで表示される画面です。
赤枠のアスペクト比は1:1であるものとします。
StackViewAで「青・真ん中(赤枠)・青」を縦に並べています。
ー真ん中(赤枠)の中ではさらにStackViewBで「黄緑・水色」を縦に並べています。
ーー黄緑のView中には「ImageViewの上にLabelを重ね、それをViewの中に格納したもの」が3つ入っています。
ーー水色はStackViewCでラベルを横に3つ等間隔、等幅で並べています。
黄緑のViewでStackViewを使っていないのは、ImageViewとLabelの重なりがあるからです。
StackViewA、StackViewCには親Viewの横幅いっぱいになるように制約をかけています。
StackViewBには上下の青Viewに接するかつアスペクト比を1:1かつ水平方向中央の制約をかけました。
黄緑のViewには親ViewであるStackViewBにアスペクト比を保ったまま上、左、右の隙間が0になるように制約をかけました。
しかし、画像右側(iPadPro)のように画面サイズに左上に小さく表示されてしまいます。
仮に親View(StackView2)に対して水平(垂直)方向中央の制約をかけてみましたが全く反映されません。
.
手順としては黄緑のViewに制約をかけられているのですが、なぜ反映されないのでしょうか？
Viewに対して制約をかけるときには他のUI部品やStackViewと違って何か制限があるのでしょうか？
よろしくお願いします。
(StoryBoradを考えていますがコードでも問題ないです)
.
試したこと(追記)
黄緑の中の部品がうまく制約できていないのが原因と思われます。
試しに別のViewControllerにて、View(グレー)の中にView(黄緑)を配置しました。
黄緑Viewの制約は画面右の通りです。
実際にやりたいことと同じように「グレーViewのトップに接する」「アスペクト比を固定」「グレーViewの水平方向中央」を制約した(つもり)のですが、反映されません。
この制約の仕方がわかれば解決できそうです。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
もともとやりたいことがうまくレイアウトできない原因は、実際のStoryboardの設定を見せてもらっていないのでよくわかりませんが、「試したこと(追記)」がエラーになる原因は制約の設定が足りないためです。
「アスペクト比を固定」は、縦横の比率を設定しているだけなので、このままでは黄緑のViewのサイズ(幅と高さ)が確定しません。
黄緑のViewに対して「幅」か「高さ」のどちらか一方を設定すれば、アスペクト固定の設定により、もう一方の「幅」または「高さ」も確定してエラーは消えます。
または、「左からの距離」か「右からの距離」のどちらか一方を設定すれば、「左右中央」の制約と合わせることでViewの「幅」が確定するので、それを元に「高さ」も確定し、エラーが消えます。
または、「下からの距離」を設定すれば、「上からの距離」の制約と合わせることでViewの「高さ」が確定するので、それを元に「幅」も確定し、エラーが消えます。
つまり「幅」「高さ」「左からの距離」「右からの距離」「上からの距離」のいずれか1つ制約を追加すれば、黄緑のViewのサイズが確定し、エラーは消えます。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2019/01/26 13:57
追記について...なるほど、理解できました。幅高さの制約ができてませんでした。
追加で質問なのですが、サイズを確定することはできましたが、黄緑のViewをグレーのViewの拡大率(基準はiPhone8)に比例するように調整するにはどのように制約をかけるべきものなのでしょうか？
2019/01/26 16:54
(参考) https://hikaruapp.jpn.com/xcode/sample-code/storyboard/post-1111
2019/01/26 21:02
大変勉強になりました。丁寧な回答ありがとうございました。