iOS 9 StackView裏面的ScrollView沒有填充屏幕的寬度

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

你需要在scrollview和它包含的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() 

編輯：修正了第一個片段中的最後一個約束。