質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

1回答

952閲覧

【Swift4】AutoLayoutで左右との距離を0にしたが隙間ができる(View内のViewの制約が反映されない?)

testyoutatsu

総合スコア29

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

1クリップ

投稿2019/01/25 14:13

編集2019/01/25 21:52

前提・実現したいこと

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の水平方向中央」を制約した(つもり)のですが、反映されません。

この制約の仕方がわかれば解決できそうです。

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

もともとやりたいことがうまくレイアウトできない原因は、実際のStoryboardの設定を見せてもらっていないのでよくわかりませんが、「試したこと(追記)」がエラーになる原因は制約の設定が足りないためです。

「アスペクト比を固定」は、縦横の比率を設定しているだけなので、このままでは黄緑のViewのサイズ(幅と高さ)が確定しません。

黄緑のViewに対して「幅」か「高さ」のどちらか一方を設定すれば、アスペクト固定の設定により、もう一方の「幅」または「高さ」も確定してエラーは消えます。
または、「左からの距離」か「右からの距離」のどちらか一方を設定すれば、「左右中央」の制約と合わせることでViewの「幅」が確定するので、それを元に「高さ」も確定し、エラーが消えます。
または、「下からの距離」を設定すれば、「上からの距離」の制約と合わせることでViewの「高さ」が確定するので、それを元に「幅」も確定し、エラーが消えます。

つまり「幅」「高さ」「左からの距離」「右からの距離」「上からの距離」のいずれか1つ制約を追加すれば、黄緑のViewのサイズが確定し、エラーは消えます。

投稿2019/01/26 03:03

TakeOne

総合スコア6299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

testyoutatsu

2019/01/26 04:57

回答ありがとうございます。確かに実際のレイアウトの方は伝わりづらいですよね。。。 追記について...なるほど、理解できました。幅高さの制約ができてませんでした。 追加で質問なのですが、サイズを確定することはできましたが、黄緑のViewをグレーのViewの拡大率(基準はiPhone8)に比例するように調整するにはどのように制約をかけるべきものなのでしょうか?
TakeOne

2019/01/26 07:54

単にグレーのViewの横幅に応じて黄緑のViewの横幅を広げたいという意味であれば、回答に示した中で「左からの距離」の制約を黄緑のViewに設定すれば、グレーのViewの横幅に応じて黄緑のViewも横幅も広がります(グレーのViewの横幅から指定の距離を引いた横幅になります)。黄緑のViewの横幅を正確にグレーのViewの横幅から一定の縮小率で縮めたサイズにしたい場合は、その2つの横幅の比率を設定すればいいです。 (参考) https://hikaruapp.jpn.com/xcode/sample-code/storyboard/post-1111
testyoutatsu

2019/01/26 12:02

参考のリンク先までありがとうございます。記事の手順で2つの横幅の比率を設定することができ、期待したレイアウトになりました。 大変勉強になりました。丁寧な回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問