ScrollView内的iOS 9 StackView无法填充屏幕宽度

Question

我正在尝试使UIScrollView包含一个UIStackView嵌套有多层堆栈视图的。我想使用自动版式，但是我做的事情出了点问题，我的大脑正变得越来越混乱，试图找出答案：

import UIKit

class HomeView: UIView {

    let looks = sampleLooks
    let user = sampleUser
    let streamView: UIStackView = UIStackView(arrangedSubviews: [])
    let scrollView: UIScrollView = UIScrollView()

    func makeButtonWithTitle(title: String, image: UIImage?, selector: String, tag: Int) -> UIButton {
        let button = UIButton(type: .System)
        button.setImage(image, forState: .Normal)
        button.tintColor = UIColor.blackColor()
        switch tag {
        case 0...10:
            button.backgroundColor = UIColor(white: 0.98, alpha: 0.8)
            button.titleLabel?.font = UIFont(name: "HelveticaNeue-Thin", size: 30)
        default:
            button.backgroundColor = UIColor(white: 0.90, alpha: 1.0)
            button.titleLabel?.font = UIFont(name: "HelveticaNeue-Thin", size: 40)
        }
        button.setTitle(title, forState: .Normal)
        button.tag = tag
        return button
    }

    func makeMessageView(senderImage: UIImage, senderHandle: String, text: String) -> UIView {
        let textView = UILabel()
        textView.text = text
        textView.font = UIFont(name: "HelveticaNeue-Thin", size: 20)
        let senderLabel = UILabel()
        senderLabel.text = senderHandle
        textView.font = UIFont(name: "HelveticaNeue-Thin", size: 20)

        let textStackView = UIStackView(arrangedSubviews:[senderLabel, textView])
        textStackView.axis = .Horizontal
        textStackView.alignment = .Fill
        textStackView.distribution = .Fill

        let postView = UIView()
        postView.addSubview(textStackView)
        postView.backgroundColor = UIColor(white: 0.98, alpha: 0.8)

        return postView
    }

    required init?(coder:NSCoder) {
        super.init(coder:coder)

        self.contentMode = .ScaleToFill
        self.backgroundColor = UIColor(patternImage: UIImage(named: "background")!)

        self.streamView.spacing = 20.0
        self.streamView.translatesAutoresizingMaskIntoConstraints = false
        self.streamView.axis = .Vertical
        self.streamView.alignment = .Fill
        self.streamView.distribution = .FillEqually

        for look in self.looks {

            let lookImageView = UIImageView(image: look.photo.photo)
            lookImageView.contentMode = .ScaleAspectFit
            lookImageView.clipsToBounds = true

            let postView = self.makeMessageView(
                look.user.photo.photo, senderHandle: look.user.handle, text: look.post)

            let likeButton = self.makeButtonWithTitle(
                " Like", image: UIImage(named: "like"), selector: "", tag: 0)
            let commentButton = self.makeButtonWithTitle(
                " Comment", image: UIImage(named: "SMS"), selector: "", tag: 1)
            let shareButton = self.makeButtonWithTitle(
                " Share", image: UIImage(named: "upload"), selector: "", tag: 2)
            let buttonsView = UIStackView(arrangedSubviews: [likeButton, commentButton, shareButton])
            buttonsView.distribution = .FillEqually

            let lookView = UIStackView(arrangedSubviews:[lookImageView, postView, buttonsView])
            lookView.axis = .Vertical
            lookView.distribution = .Fill
            lookView.alignment = .Fill
            self.streamView.addArrangedSubview(lookView)

        }

        self.scrollView.addSubview(self.streamView)
        self.scrollView.frame = UIScreen.mainScreen().bounds
        self.scrollView.showsVerticalScrollIndicator = false
        self.scrollView.showsHorizontalScrollIndicator = false
        self.addSubview(self.scrollView)

    }

}

因此，我想要这段代码要做的是给我一个可滚动的嵌套堆栈，该堆栈覆盖屏幕的宽度（如果图像被裁剪，可以，但是我希望它们覆盖屏幕而不会变形）。它实际上给我的是一组可滚动的图像，其中第一个图像的宽度（看似）确定了堆栈的宽度。我实际上不确定这是怎么回事，但是顶层UIStackView没有覆盖屏幕的宽度。

我认为这与UIScrollView没有固有宽度有关，因此它内部的堆栈视图决定了自己的大小。我之所以这样说是因为，如果我将堆栈视图直接放在父视图中，它将覆盖显示内容，但是正如您所期望的那样，没有滚动...

Answer 1

您目前需要在滚动视图和它包含的UIStackView之间设置一些约束。

这三个足以使内部UIStackView的滚动视图大小相同：

• 滚动视图和UIStackView之间的水平约束，它们之间没有空格
• 滚动视图和UIStackView之间的垂直约束，它们之间没有空格，这样您就可以滚动到UIStackView的整个高度
• 滚动视图和UIStackView的宽度相同，这样UIStackView将与滚动视图的宽度匹配

这是代码：

//You already have these two lines:
//scrollView.addSubview(streamView)
//streamView.translatesAutoresizingMaskIntoConstraints = false;
//Add this one too:
scrollView.translatesAutoresizingMaskIntoConstraints = false;

scrollView.addConstraints(
    NSLayoutConstraint.constraintsWithVisualFormat("V:|[innerView]|", 
        options: NSLayoutFormatOptions(rawValue:0),
        metrics: nil,
        views: ["innerView":streamView]))

scrollView.addConstraints(
    NSLayoutConstraint.constraintsWithVisualFormat("H:|[innerView]|", 
        options: NSLayoutFormatOptions(rawValue:0),
        metrics: nil, 
        views: ["innerView":streamView]))

scrollView.addConstraint(
    NSLayoutConstraint(item: scrollView, 
                  attribute: .Width, 
                  relatedBy: .Equal, 
                     toItem: streamView, 
                  attribute: .Width, 
                 multiplier: 1.0, 
                   constant: 0))

另外，您可以使用将视图嵌入滚动视图的方法来扩展UIView：

extension UIView {

    func embedInScrollView()->UIView{
        let cont=UIScrollView()

        self.translatesAutoresizingMaskIntoConstraints = false;
        cont.translatesAutoresizingMaskIntoConstraints = false;
        cont.addSubview(self)
        cont.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[innerView]|", options: NSLayoutFormatOptions(rawValue:0),metrics: nil, views: ["innerView":self]))
        cont.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[innerView]|", options: NSLayoutFormatOptions(rawValue:0),metrics: nil, views: ["innerView":self]))
        cont.addConstraint(NSLayoutConstraint(item: self, attribute: .Width, relatedBy: .Equal, toItem: cont, attribute: .Width, multiplier: 1.0, constant: 0))
        return cont
    }
}

并以这种方式使用它：

let scrollView = streamView.embedInScrollView()

编辑：修复了第一个代码段中的最后一个约束。