Swift：私のUIScrollViewで自動レイアウト制約が機能しない

Question

ビューが画面上にあまりにも多く画面に収まらない場合、垂直方向にスクロールしなければならない単純なレイアウトを作ろうとしています。

だから、これは私がこれまで持っているものです。

私はscrollviewを作成し、その

let mainScrollView: UIScrollView = { 

    let scrollView = UIScrollView() 

    scrollView.isUserInteractionEnabled = true 
    scrollView.translatesAutoresizingMaskIntoConstraints = false 

    return scrollView 
}() 

let containerView: UIView = { 

    let view = UIView() 

    view.backgroundColor = .lightGray 
    view.translatesAutoresizingMaskIntoConstraints = false 

    return view 
}() 

のようなコンテナビューは、その後、私はコンテナビューを追加し、メインビューにscrollviewを追加しましたスクロールビューとコンテナビューに表示されるラベルのペア

view.addSubview(mainScrollView) 
mainScrollView.addSubview(containerView) 

containerView.addSubview(firstLabel) 
containerView.addSubview(secondLabel) 

スクロールビューをメインビューに、コンテナビューをスクロールビューに固定しました。その後、私はこの問題は、何らかの理由でscrollviewが、それは高さだし、それが垂直方向にスクロールしない計算することができないということである。この

mainScrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true 
mainScrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true 
mainScrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true 
mainScrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true 

containerView.topAnchor.constraint(equalTo: mainScrollView.layoutMarginsGuide.topAnchor).isActive = true 
containerView.bottomAnchor.constraint(equalTo: mainScrollView.layoutMarginsGuide.bottomAnchor).isActive = true 
containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true 
containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true 

firstLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true 
firstLabel.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 30).isActive = true 
firstLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true 
firstLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true 

secondLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true 
secondLabel.topAnchor.constraint(equalTo: firstLabel.bottomAnchor, constant: 750).isActive = true 
secondLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true 
secondLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true 

のようなコンテナビュー内のラベルを追加し始めました。 2番目のラベルは、画面上で「低」すぎるため、目に見えません。

コンテナビューの下部の制約を2番目のラベルの下部に設定しようとしましたが、正直なところどこにも行きません。

私には何が欠けていますか？コンテナビューの特定の高さを設定せずに、スクロールビューを自動レイアウトでスクロールさせるための制約を設定するにはどうすればよいですか？

Answer 1

いずれかの方向にスクロールします。そのため、Scrollviewにコンテンツサイズを計算させるために追加されたビューには、いくつかの追加の制約が必要です。

コンテナビューをスクロール表示に固定しました。テーブルビューのような垂直方向にスクロールするビューを見る場合は、スクロールの幅をコンテナビューに設定して、幅を計算できるようにする必要があります。

次に、コンテナビューに追加されたUI要素に基づいて高さが自動的に計算されます。すべてのラベルが先頭に付いていることを確認し、コンテナの後ろに、上下の間隔をおいてコンテナの上に表示します。これにより、スクロールビューに必要な高さが分かります。

self.scrollView.translatesAutoresizingMaskIntoConstraints = false 
    self.contentView.translatesAutoresizingMaskIntoConstraints = false 
    self.label1.translatesAutoresizingMaskIntoConstraints = false 
    self.label2.translatesAutoresizingMaskIntoConstraints = false 
    self.label3.translatesAutoresizingMaskIntoConstraints = false 

    self.contentView.addSubview(self.label1) 
    self.contentView.addSubview(self.label2) 
    self.contentView.addSubview(self.label3) 

    self.scrollView.addSubview(self.contentView) 
    self.view.addSubview(self.scrollView) 

    NSLayoutConstraint.activate([ 
     self.scrollView.topAnchor.constraint(equalTo: self.view.topAnchor), 
     self.scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor), 
     self.scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor), 
     self.scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor) 
    ]) 

    NSLayoutConstraint.activate([ 
     self.contentView.topAnchor.constraint(equalTo: self.scrollView.topAnchor), 
     self.contentView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor), 
     self.contentView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor), 
     self.contentView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor), 
     self.contentView.widthAnchor.constraint(equalTo: self.scrollView.widthAnchor) 
    ]) 

    NSLayoutConstraint.activate([ 
     self.label1.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor), 
     self.label2.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor), 
     self.label3.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor), 
     self.label1.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor), 
     self.label2.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor), 
     self.label3.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor) 
    ]) 

    NSLayoutConstraint.activate([ 
     self.label1.topAnchor.constraint(equalTo: self.contentView.topAnchor), 
     self.label2.topAnchor.constraint(equalTo: self.label1.bottomAnchor), 
     self.label3.topAnchor.constraint(equalTo: self.label2.bottomAnchor), 
     self.label3.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor) 
    ]) 

実行すると、制約の問題についても不平を言うことはありません。水平スクロールでも同じことができます。

Answer 2

あなたは正しい方向に私を指摘し、GoodSp33d @ありがとうございました。

あなたがそのように言ったように私は幅の制約を追加しました：

containerView.widthAnchor.constraint(equalTo: mainScrollView.widthAnchor).isActive = true

そして、重要な点は、すべての後に下の制約を更新することでした。ここでは

containerView.bottomAnchor.constraint(equalTo: secondLabel.bottomAnchor).isActive = true

がいっぱいです作業コード：

mainScrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true 
mainScrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true 
mainScrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true 
mainScrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true 

containerView.topAnchor.constraint(equalTo: mainScrollView.topAnchor).isActive = true 
containerView.trailingAnchor.constraint(equalTo: mainScrollView.trailingAnchor).isActive = true 
containerView.bottomAnchor.constraint(equalTo: mainScrollView.bottomAnchor).isActive = true 
containerView.leadingAnchor.constraint(equalTo: mainScrollView.leadingAnchor).isActive = true 
containerView.widthAnchor.constraint(equalTo: mainScrollView.widthAnchor).isActive = true 

firstLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true 
firstLabel.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 30).isActive = true 
firstLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true 
firstLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true 

secondLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true 
secondLabel.topAnchor.constraint(equalTo: firstLabel.bottomAnchor, constant: 550).isActive = true 
secondLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true 
secondLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true 

containerView.bottomAnchor.constraint(equalTo: secondLabel.bottomAnchor).isActive = true 

助けてくれてありがとう。