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

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

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

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

Swift

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

Q&A

解決済

1回答

1092閲覧

Xibで作ったViewに制約をかけてUIStackViewに追加するとレイアウトがおかしくなる

iosClimer

総合スコア20

Xcode

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

Swift

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

0グッド

0クリップ

投稿2022/04/28 06:21

前提

Xibで定義したView(以下Cellと呼ぶ)をStackViewに追加する処理を書いてます。
追加する前に四隅にスペースを入れるため制約を追加したいと思っています。

実装方法

StackViewに追加する前に空のUIViewにCellを追加し四隅に制約を追加しています。

ソースコード

  • 全体画面
import UIKit class PracticeStackViewController: UIViewController { // 角丸などを付与したカスタムStackView @IBOutlet weak var additionalStackView: InspectableStackView! //コンテンツ private var contents = [ ContentModel(title: "ラーメン", price: 250), ContentModel(title: "牛丼", price: 120), ContentModel(title: "オムライス", price: 120), ContentModel(title: "コース料理", price: 1000), ContentModel(title: "キムチ", price: 150), ContentModel(title: "アイスクリーム", price: 300), ContentModel(title: "たこ焼き", price: 420), ] override func viewDidLoad() { super.viewDidLoad() setup() } private func setup() { for content in contents { let cell = AddisionalStackCellView() cell.titleLabel.text = content.title cell.priceButton.titleLabel?.text = content.price.description + "円" //Cellに四隅の制約を加える let constraintedCell = createConstraintCell(cell) additionalStackView.addArrangedSubview(constraintedCell) } } private func createConstraintCell(_ cell: AddisionalStackCellView) -> UIView { // 空のUIViewにCellを追加 let baseView = UIView() baseView.addSubview(cell) //四隅に制約追加 cell.translatesAutoresizingMaskIntoConstraints = false cell.topAnchor.constraint(equalTo: baseView.topAnchor, constant: 14.0).isActive = true cell.leadingAnchor.constraint(equalTo: baseView.leadingAnchor, constant: 20.0).isActive = true cell.trailingAnchor.constraint(equalTo: baseView.trailingAnchor, constant: 15.0).isActive = true cell.bottomAnchor.constraint(equalTo: baseView.bottomAnchor, constant: 14.0).isActive = true return baseView } }
  • Cell
import UIKit class AddisionalStackCellView: UIView { @IBOutlet var contentView: UIView! @IBOutlet var titleLabel: UILabel! @IBOutlet var priceButton: UIButton! // MARK: - Functions // MARK: Override Functions required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) commonInit() } override init(frame: CGRect) { super.init(frame: frame) commonInit() } // MARK: Public Functions /// Custom Viewのinitに必要なメソッド func commonInit() { Bundle.main.loadNibNamed(String(describing: type(of: self)), owner: self, options: nil) addSubview(contentView) contentView.frame = bounds } }

イメージ説明

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

薄く白みがかったStackViewの中に余白があるCellが綺麗に追加されてるのを期待してましたが、
なぜかStackViewからはみ出してしまいます。。。
イメージ説明

試したこと

BreakPointで止めて、createConstraintCell()を実行中のbaseViewとcellのframeを確認するとどちらも全て0.0でした。
この時点で制約をかけてもうまく描画できてないのかな、と思いますがどう改善すれば良いかわかりません。

補足情報(FW/ツールのバージョンなど)

Xcode13.3
iOS15.4でシュミレート

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

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

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

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

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

hoshi-takanori

2022/04/28 08:16

trailingAnchor と bottomAnchor の constant をマイナスにすると良いかも?
iosClimer

2022/04/28 09:22

できました!! constantの値は余白の大きさだと思っていましたが、制約先のViewとのOffset位置なのですね! 勉強になりました!
guest

回答1

0

自己解決

trailingAnchor と bottomAnchor の constant をマイナスにしたところうまく行きました。
四隅にスペースを入れる際は左と上はマイナスにする、ということを学びました。
イメージ説明

投稿2022/04/28 09:25

iosClimer

総合スコア20

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問