🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Swift

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

Q&A

解決済

1回答

1719閲覧

UIStackViewを使ってトルツメした際にStackViewの中身のViewを再度等間隔に並べたい

sgyeta

総合スコア23

Swift

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

0グッド

0クリップ

投稿2019/11/27 13:54

前提・実現したいこと

StackViewを入れ子にした際に、期待している動作に辿り着けなかったのでご教示頂きたいです。

UIStackViewを入れ子にして、以下のレイアウトを組んでおります。
黄色いベースのビューの上に、Spacing10のStackViewが乗っています。
更に黄色いベースのビューと緑のベースのビューをStackViewでまとめています。

期待している動作としては、このレイアウトで、緑のベースのビューがHiddenになった際に
黄色いベースのビューが、緑のベースのビューのボトムの位置まで広がり
黄色いベースのビュー内の、Spacing10で並んでいる青いビュー達が等間隔で並ぶようにしたいです。

少々伝わりにくいかもしれませんが、ご教示頂けると幸いです。

イメージ説明

イメージ説明

発生している問題・エラーメッセージ

現状の動作としては、緑のビューがHiddenになった際、以下のように
緑のビューが存在していた部分まで、黄色のビューがトルツメされるようになってしまいます。

イメージ説明

試したこと

StackViewのDistributionを色々変更してみました。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/11/27 14:36 編集

外側のStackViewのTopの制約はありますか? ちなみに、 黄色の領域が拡大した分のスペースは、青のラベルの高さを大きくするのでしょうか? それともスペースをひろげるのでしょうか? Xcodeは11以上をお使いですよね
sgyeta

2019/11/27 14:37

ご質問ありがとうございます。 XcodeのバージョンはVersion 11.0 (11A420a)になります。こちらは追記しておきます。 青のビュー間の間隔を広げたいです。
guest

回答1

0

ベストアンサー

--訂正--

あ〜、黄色のViewを噛ませてあるので、黄色のViewの制約を外側のStackViewにあわせて伸縮するようにしてあげてください。
外側のStackViewの中で黄色のViewが伸縮せず、高さ固定で上下に動いてるように見えます

----打ち消し線
表示
非表示

外側のStackViewのTopとBottomが固定してあれば中身が伸縮します。
あとは色々いじってあげればイケルと思いますよ。

投稿2019/11/27 14:47

編集2019/11/27 15:02
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

sgyeta

2019/11/27 14:57

回答ありがとうございます。 手元で試して頂いて大変恐縮です。 回答漏れてましたが、外側のStackViewのTopの制約付いてなかったです・・・。 1点確認させて頂きたいのですが、innerStackViewのDistributionはFillではなく Equal Centeringにされてるのは、意図的にされてるのでしょうか?
退会済みユーザー

退会済みユーザー

2019/11/27 15:00

青のラベルの高さ決め打ちだから、まあ、Equalか〜…すんません適当です。 そのへんは、まあ、適切にいじってあげてください。
sgyeta

2019/11/27 15:06

手元で試したら取り敢えず想定通りの動作になりました! ただちょっとまだDistributionによる差異とか飲み込めてないのでもう少し調べてみます。 この度はありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問