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

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

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

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

Swift

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

解決済

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

iosClimer
iosClimer

総合スコア20

Xcode

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

Swift

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

1回答

0評価

0クリップ

149閲覧

投稿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でシュミレート

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori

2022/04/28 08:16

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

2022/04/28 09:22

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Xcode

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

Swift

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