將Stackview添加到UIScrollView

Question

我有UIScrollView。它有一個堆棧視圖。這個堆棧視圖包含12個按鈕。 （水平滾動視圖）

Stackview約束： - 頂部，前置，底部滾動視圖和相等的寬度，以滾動視圖。

我的問題是每次當我運行，堆棧視圖寬度限制滾動視圖寬度和按鍵太小acording堆棧視圖的寬度和我的滾動視圖不滾動的時間。

如何讓這個滾動

Answer 1

的Step-by-步驟在IB /故事板設置此功能...

1. 添加的視圖 - 高度50領先/頂部/尾隨 - 藍色背景

一個滾動視圖添加到該視圖 - 銷領先/頂部/後/底部爲0 - 設置滾動視圖背景顏色爲黃色，所以我們可以看到它是

添加一個按鈕來滾動視圖

重複它，就具有12個按鈕

1. 將它們分組到一個堆棧視圖中，並設置堆棧視圖的約束TS至0領先/頂部/後/底

和設置堆棧視圖的分佈爲 「相等的間隔」

1. 結果在模擬器中運行（根本沒有代碼）：

和按鈕左右滾動...的.contentSize無碼設置...

Answer 2

如果你讓你的Stackview寬度等於滾動視圖寬度，那麼這就是你會得到的，當然也不會滾動。

不要給你的Stackview寬度約束......讓按鈕「補出來」。

---

編輯：下面是一個簡單的例子，你可以在一個遊樂場頁直接運行：

import UIKit 
import PlaygroundSupport 

class TestViewController : UIViewController { 

    let scrollView: UIScrollView = { 
     let v = UIScrollView() 
     v.translatesAutoresizingMaskIntoConstraints = false 
     v.backgroundColor = .cyan 
     return v 
    }() 

    let stackView : UIStackView = { 
     let v = UIStackView() 
     v.translatesAutoresizingMaskIntoConstraints = false 
     v.axis = .horizontal 
     v.distribution = .equalSpacing 
     v.spacing = 10.0 
     return v 
    }() 


    override func viewDidLoad() { 
     super.viewDidLoad() 

     // add the scroll view to self.view 
     self.view.addSubview(scrollView) 

     // constrain the scroll view to 8-pts on each side 
     scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 8.0).isActive = true 
     scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0).isActive = true 
     scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -8.0).isActive = true 
     scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -8.0).isActive = true 


     // add the stack view to the scroll view 
     scrollView.addSubview(stackView) 

     // constrain the stackview view to 8-pts on each side 
     // this *also* controls the .contentSize of the scrollview 
     stackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 8.0).isActive = true 
     stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 8.0).isActive = true 
     stackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -8.0).isActive = true 
     stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -8.0).isActive = true 

     // add ten buttons to the stack view 
     for i in 1...10 { 

      let b = UIButton() 
      b.translatesAutoresizingMaskIntoConstraints = false 
      b.setTitle("Button \(i)", for: .normal) 
      b.backgroundColor = .blue 
      stackView.addArrangedSubview(b) 

     } 

    } 

} 

let vc = TestViewController() 
vc.view.backgroundColor = .yellow 
PlaygroundPage.current.liveView = vc 

Answer 3

所以，你要這樣：

這裏是我做到了在Xcode 8.3.3。

1. 新建項目> iOS> Single View Application。

2. 打開Main.storyboard。

3. 將滾動視圖拖到場景中。

4. 針頂端，導致，和滾動視圖爲0設定高度的尾隨至30

   

5. 將水平堆疊視圖到滾動視圖。

6. 引腳所有四個堆棧視圖的邊緣爲0

   

7. 設置堆棧視圖間距4.

8. 將十二個按鈕進棧圖。

9. 將目標設備設置爲iPhone SE。

10. Build & run。

得到的文檔大綱：