UIScrollViewコンテナを操作するサブビューを他のすべてのビューに制約するにはどうすればよいですか？

Question

以下のように私はscrollviewを持っており、UIViewControllerのルートビューを追加したいと思います。私はそれが上、右、下、左に制約されているとき、私は赤い色が画面全体を占めることを期待しています。これは明らかに機能しますが、すべての子ビューをラップするスクロールビューにサブビューを追加します。それをどうやってやりますか？

私はビューを追加しましたが、ラッパービューからUIScrollViewの境界に設定されているこの時間以外は同じ制約を設定しています。青の背景色はどこにも表示されません。また、これが悪い考えであると指摘しても気になりませんが、私はちょうど底に拘束することができ、必要に応じてスクロールビューのコンテンツサイズを自動的に延長することができます。これは、私がラッパーなしでスクロールビュー内のすべてのサブビューを持っていて、最後のビューがコンテンツサイズを拡張すると機能すると思われます。

scrollView = UIScrollView(frame: view.bounds) 

    scrollView?.showsVerticalScrollIndicator = true 
    scrollView?.backgroundColor = .red 

    scrollView?.translatesAutoresizingMaskIntoConstraints = false 

    view.addSubview(scrollView!) 

    scrollView?.topAnchor.constraint(equalTo: view.topAnchor).isActive = true 
    scrollView?.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
    scrollView?.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true 
    scrollView?.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true 

    //setup wrapper view 
    let subviewWrapper = UIView() 

    subviewWrapper.translatesAutoresizingMaskIntoConstraints = false 

    scrollView?.addSubview(subviewWrapper) 

    subviewWrapper.backgroundColor = .blue 

    subviewWrapper.topAnchor.constraint(equalTo: (scrollView?.topAnchor)!).isActive = true 
    subviewWrapper.leftAnchor.constraint(equalTo: (scrollView?.leftAnchor)!).isActive = true 
    subviewWrapper.rightAnchor.constraint(equalTo: (scrollView?.rightAnchor)!).isActive = true 
    subviewWrapper.bottomAnchor.constraint(equalTo: (scrollView?.bottomAnchor)!).isActive = true 

Answer 1

実はこれは非常に良いアイデアです。私はいつもこの方法で私のscrollViewsを設定しました。私は通常、ビューcontentViewと呼んでいますが、それは同じ考えです。

あなたはほぼあります。あなたはまだの自動レイアウトには、あなたのサブビューラッパーのサイズを把握するためのものは何もありません。これまでに設定した制約では、サブビューラッパーがのスクロールビューのエッジに縁どりますが、サブビューラッパーのサイズが大きくなると、scrollViewのコンテンツサイズが拡大されます。現在サブビューラッパーは、0の幅と0の高さを持ち、青が表示されません。

以下は、サブビューラッパーのサイズを設定する方法の3つの例です。

注：次の各例は完全に独立しています。それぞれを別々に見てみましょう。前の例で追加した制約を忘れずに削除してください。

---

例1：作るsubviewWrapper×1000 1000：

設定の制約は、あなたのsubviewWrapper1000 x 1000作るために、あなたは青が表示され、それが両方の方向にスクロールします。

subviewWrapper.widthAnchor.constraint(equalToConstant: 1000).isActive = true 
subviewWrapper.heightAnchor.constraint(equalToConstant: 1000).isActive = true 

---

例2：垂直のみscrollViewの高さのコンテンツサイズ2Xでスクロール：

あなたはscrollViewの幅に等しくなるように、あなたのsubviewWrapperの幅を設定した場合これは垂直方向にのみスクロールします。 subviewWrapperの高さをscrollViewの2倍に設定すると、青色の領域はscrollViewの2倍になります。

subviewWrapper.widthAnchor.constraint(equalTo: scrollView!.widthAnchor, multiplier: 1.0).isActive = true 
subviewWrapper.heightAnchor.constraint(equalTo: scrollView!.heightAnchor, multiplier: 2.0).isActive = true 

---

例3：サブビューによって設定されたsubviewWrapperのサイズ：あなたはまた、それにサブビューを追加して、subviewWrapperのサイズを確立することができます

完全にサイズが指定され、 subviewWrapperの上端から下端まで、そして左右にチェーンで接続されています。あなたがこれを行う場合は、自動レイアウトは、この例では、あなたのsubviewWrapper

の大きさを計算するのに十分な情報を持っているだろう、私はsubviewWrapperに黄色の600×600の正方形を追加し、100ポイントを設定しました各エッジから。 subviewWrapperのサイズを明示的に設定せずに、の自動レイアウトは800 x 800であることがわかります。

let yellowSquare = UIView() 

yellowSquare.translatesAutoresizingMaskIntoConstraints = false 
yellowSquare.backgroundColor = .yellow 
subviewWrapper.addSubview(yellowSquare) 

yellowSquare.widthAnchor.constraint(equalToConstant: 600).isActive = true 
yellowSquare.heightAnchor.constraint(equalToConstant: 600).isActive = true 

yellowSquare.topAnchor.constraint(equalTo: subviewWrapper.topAnchor, constant: 100).isActive = true 
yellowSquare.leadingAnchor.constraint(equalTo: subviewWrapper.leadingAnchor, constant: 100).isActive = true 
yellowSquare.trailingAnchor.constraint(equalTo: subviewWrapper.trailingAnchor, constant: -100).isActive = true 
yellowSquare.bottomAnchor.constraint(equalTo: subviewWrapper.bottomAnchor, constant: -100).isActive = true