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

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

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

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

Xcode

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

Swift

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

解決済

1回答

4087閲覧

UIStackViewの中に複数のカスタムviewを生成したい

dddd12233

総合スコア13

iOS

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

Xcode

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

Swift

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2020/07/05 06:18

実現したいこと

もう少し詳しく言うと、
「スクロールviewの中のStackView内にカスタムviewをコードで生成し、ボタンを押すことでさらにそのカスタムviewを生成する(ボタンを押すことでStackView内にカスタムviewが増えていく)」

これを実現したいです。

現状

・storyboard
・ViewController.swift
・custumViewController.swift

イメージ説明

Swift

1import UIKit 2 3class ViewController: UIViewController { 4 5 @IBOutlet weak var scrollView: UIScrollView! 6 @IBOutlet weak var stackView: UIStackView! 7 @IBOutlet weak var button: UIButton! 8 9 var custumView = custumViewController() 10 11 12 override func viewDidLoad() { 13 super.viewDidLoad() 14 15 custumView.heightAnchor.constraint(equalToConstant: 300).isActive = true 16 custumView.translatesAutoresizingMaskIntoConstraints = false 17 18 //スタックviewの任意の位置にビューを追加 19 stackView.insertArrangedSubview(custumView, at: 2) 20 //0と1が指定できないのはなぜ 21 } 22 23 @IBAction func buttonAction(_ sender: Any) { 24 25 custumView.heightAnchor.constraint(equalToConstant: 300).isActive = true 26 custumView.translatesAutoresizingMaskIntoConstraints = false 27 28 //スタックviewの任意の位置にビューを追加 29 stackView.insertArrangedSubview(custumView, at: 3) 30 31 } 32 33}

Swift

1 2class custumViewController: UIView { 3 4 //コードから生成したときに通る初期化処理 5 override init(frame: CGRect) { 6 super.init(frame: frame) 7 self.commonInit() 8 } 9 10 //InterfaceBulderで配置した場合に通る初期化処理 11 required init?(coder aDecoder: NSCoder) { 12 super.init(coder: aDecoder) 13 self.commonInit() 14 } 15 16 fileprivate func commonInit() { 17 //MyCustomView.xibファイルからViewを生成する。 18 //File's OwnerはMyCustomViewなのでselfとする。 19 guard let view = UINib(nibName: "fukusuuCustumView", bundle: nil).instantiate(withOwner: self, options: nil).first as? UIView else { 20 return 21 } 22 23 //ここでちゃんとあわせておかないと、配置したUIButtonがタッチイベントを拾えなかったりする。 24 view.frame = self.bounds 25 26 //伸縮するように 27 view.autoresizingMask = [.flexibleHeight, .flexibleWidth] 28 29 //addする。viewオブジェクトの2枚重ねになる。 30 self.addSubview(view) 31 } 32}

簡易的なサンプルを用意しました。

【storyboard】
viewの中にスクロールview、その中にstackviewを置いています。stackviewの中には紫色、水色、黄色のviewを3つ置いています。ピンク色のボタンは、押すたびにカスタムviewを増やす用のボタンです。

【ViewController.swift】
viewDidLoad内で、カスタムviewを生成しています。
ビルドするとこのように緑色のカスタムVeiwがスタックviewの上から3番目に出現します(custumView, at: 2)。
イメージ説明

しかしボタンを押すと、下の画像のように、コードで生成したスタックviewが消え、スタックviewの上から4番目にカスタムviewが生成されます。
イメージ説明

最終的な質問

**私はボタンからカスタムviewを生成した時に、コードで生成したカスタムviewを消さず残しておきたいです。(ボタンを押した回数分カスタムviewを増やしたい)
**
これを実現するにはどうしたら良いでしょうか?

また、

Swift

1//スタックviewの任意の位置にビューを追加 2 stackView.insertArrangedSubview(custumView, at: 2)

**スタックviewの0番目や1番目に追加しようとしても追加されませんでした。これは何故でしょうか?
**

**お手数ではございますが分かる方、ご回答よろしくお願いいたします。
**

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/07/05 09:16

要件わからんし、好き嫌いもあると思いますので個人的な意見ですが、tableViewでやろうとか思いませんか? 私がscrollView嫌いなだけかもしれませんが。
guest

回答1

0

ベストアンサー

ScrollViewは使わずに、StackView と View だけのごく簡単なコードで試した結果ですが、
(追記: 念のため後半に ScrollView を使った検証結果も追記しました)

スタックviewの0番目や1番目に追加しようとしても追加されませんでした。これは何故でしょうか?

ScrollView は使っていないので何とも言えませんが、私が試した感じだと任意の場所に追加することができました。

私はボタンからカスタムviewを生成した時に、コードで生成したカスタムviewを消さず残しておきたいです。(ボタンを押した回数分カスタムviewを増やしたい)

CustumViewController のインスタンスを使いまわしていることが原因ではないでしょうか。

つまり、

Swift

1 @IBAction func buttonAction(_ sender: Any) { 2 3 //スタックviewの任意の位置にビューを追加 4 stackView.insertArrangedSubview(custumView, at: 3) 5 6 }

ではなく、

Swift

1 @IBAction func buttonAction(_ sender: Any) { 2 // 新しくインスタンスを作る 3 let custumView2 = custumViewController() 4 //スタックviewの任意の位置にビューを追加 5 stackView.insertArrangedSubview(custumView2, at: 3) 6 7 }

上記のように、ボタンを押すたびに新しいインスタンスを作成し、それを追加するようにすれば、ボタンを押すたびに指定した場所に追加することができました。

以下検証用のコード

Swift

1import UIKit 2 3class ViewController: UIViewController { 4 @IBOutlet weak var stackView: UIStackView! 5 @IBOutlet weak var button: UIButton! 6 7 var customView = UIView() 8 9 override func viewDidLoad() { 10 super.viewDidLoad() 11 12 customView.heightAnchor.constraint(equalToConstant: 300).isActive = true 13 customView.translatesAutoresizingMaskIntoConstraints = false 14 15 //スタックviewの任意の位置にビューを追加 16 stackView.insertArrangedSubview(customView, at: 2) 17 } 18 19 @IBAction func buttonAction(_ sender: Any) { 20 let customView2 = UIView() 21 22 customView2.backgroundColor = .brown 23 24 //スタックviewの任意の位置にビューを追加 25 stackView.insertArrangedSubview(customView2, at: 3) 26 // デバッグ用 27 dump(stackView.arrangedSubviews) 28 } 29 30}

追記

念のため、ScrollView を使って検証してみましたが、やはり任意の場所に view を追加することは可能です。

質問者さんの制約のかけ方を確認しないまま検証したのですが、一応下記の通りとなっています(詳しい制約はスクリーンショットをご確認ください)。ScrollView の DistributionFull Equally に設定したため、上記のコードにある

Swift

1 customView.heightAnchor.constraint(equalToConstant: 300).isActive = true 2 customView.translatesAutoresizingMaskIntoConstraints = false

を使って動的に高さを設定すると、制約の矛盾が生じ実行時に警告が出ますので、実際は削除して実行しています。

ちなみに、ScrollView の制約については、下記の記事を参考にしてあります。

イメージ説明

投稿2020/07/05 08:54

編集2020/07/05 11:47
TsukubaDepot

総合スコア5086

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

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

dddd12233

2020/07/06 01:40

ご回答感謝いたします。 インスタンスを新しく作ることで解決いたしました!!! 本当にありがとうございまし!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問