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

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

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

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

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

Q&A

解決済

1回答

2099閲覧

stackViewで横並びと縦並びの入れ子をコードで書きたい

syosinsya_swift

総合スコア62

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

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

0グッド

0クリップ

投稿2019/09/20 02:09

stackViewで横並びと縦並びの入れ子をコードで書きたいのですが
入れ子の書き方が分からず、教えてください。

配置の構成イメージとしては以下のようにしたいです
イメージ説明

今段階では、横並びのスタックビューはかけています。

// StackView を作る let stack:UIStackView = UIStackView() stack.backgroundColor = UIColor.purple view.addSubview(stack) stack.translatesAutoresizingMaskIntoConstraints = false // オートレイアウトオフ stack.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true // 横方向の中心は、親ビューの横方向の中心と同じ stack.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true // 縦方向の中心は、親ビューの縦方向の中心と同じ // 画面の大きさを取得 let screenWidth = Int( UIScreen.main.bounds.size.width); let screenHeight = Int(UIScreen.main.bounds.size.height); // 上のラベル let myView = UIView() myView.backgroundColor = UIColor.gray myView.translatesAutoresizingMaskIntoConstraints = false myView.widthAnchor.constraint(equalToConstant: CGFloat(screenWidth/4)).isActive = true myView.heightAnchor.constraint(equalToConstant: 50).isActive = true let myView2 = UIView() myView2.backgroundColor = UIColor.purple myView2.translatesAutoresizingMaskIntoConstraints = false myView2.widthAnchor.constraint(equalToConstant: CGFloat(screenWidth/4)).isActive = true myView2.heightAnchor.constraint(equalToConstant: 50).isActive = true let myView3 = UIView() myView3.backgroundColor = UIColor.red myView3.translatesAutoresizingMaskIntoConstraints = false myView3.widthAnchor.constraint(equalToConstant: CGFloat(screenWidth/4)).isActive = true myView3.heightAnchor.constraint(equalToConstant: 50).isActive = true let myView4 = UIButton() myView4.backgroundColor = UIColor.green myView4.translatesAutoresizingMaskIntoConstraints = false myView4.widthAnchor.constraint(equalToConstant: CGFloat(screenWidth/4)).isActive = true myView4.heightAnchor.constraint(equalToConstant: 50).isActive = true // 画像 let image:UIImage = UIImage(named:"menu")! let imageView = UIImageView(image:image) myView4.addSubview(imageView) imageView.translatesAutoresizingMaskIntoConstraints = false imageView.centerXAnchor.constraint(equalTo: myView4.centerXAnchor).isActive = true imageView.centerYAnchor.constraint(equalTo: myView4.centerYAnchor).isActive = true imageView.contentMode = UIView.ContentMode.scaleAspectFit stack.addArrangedSubview(myView) stack.addArrangedSubview(myView2) stack.addArrangedSubview(myView3) stack.addArrangedSubview(myView4)

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

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

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

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

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

guest

回答1

0

ベストアンサー

作ってみました。
大枠になるStackViewの高さとか幅は適当です。

Swift

1 // 大枠のStackView 2 let verticalStackView = UIStackView() 3 verticalStackView.axis = .vertical 4 verticalStackView.alignment = .fill 5 verticalStackView.distribution = .fillEqually 6 verticalStackView.translatesAutoresizingMaskIntoConstraints = false 7 view.addSubview(verticalStackView) 8 9 // Auto layout 10 NSLayoutConstraint.activate([ 11 verticalStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0), 12 verticalStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0), 13 verticalStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0), 14 verticalStackView.heightAnchor.constraint(equalToConstant: 220) 15 ]) 16 17 let greenView = UIView() 18 greenView.translatesAutoresizingMaskIntoConstraints = false 19 greenView.backgroundColor = .green 20 21 verticalStackView.addArrangedSubview(greenView) 22 23 // 入れ子になるStackView 24 let horizontalStackView = UIStackView() 25 horizontalStackView.axis = .horizontal 26 horizontalStackView.alignment = .fill 27 horizontalStackView.distribution = .fillEqually 28 horizontalStackView.translatesAutoresizingMaskIntoConstraints = false 29 verticalStackView.addArrangedSubview(horizontalStackView) 30 31 let orangeView = UIView() 32 orangeView.translatesAutoresizingMaskIntoConstraints = false 33 orangeView.backgroundColor = .orange 34 35 horizontalStackView.addArrangedSubview(orangeView) 36 37 let redView = UIView() 38 redView.translatesAutoresizingMaskIntoConstraints = false 39 redView.backgroundColor = .red 40 41 horizontalStackView.addArrangedSubview(redView) 42 43 let blueView = UIView() 44 blueView.translatesAutoresizingMaskIntoConstraints = false 45 blueView.backgroundColor = .blue 46 47 horizontalStackView.addArrangedSubview(blueView)

レイアウト結果

投稿2019/09/20 04:18

編集2019/09/20 04:28
hayabusabusash

総合スコア767

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

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

syosinsya_swift

2019/09/20 04:20

ありがとうございます!参考にさせていただきます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問