從程式動態加 view 到 stack view

stack view 搭配 scroll view 可以快速做出圖片水平滑動的分頁功能，不過如果圖片是後來才加入，比方從網路抓取的圖片，我們事先不知道圖片數量，這樣做得到嗎 ?

stack view + scroll view 製作分頁 tutorial (懶得寫程式版)

當然沒問題，沒有 iOS 做不到的事 !

我們可以在 storyboard 先加好 scroll view & stack view，然後再從程式將圖片加到 stack view。接下來就讓我們一步步示範說明吧。

加入 scroll view，設定跟 safe area 0 間距的條件

將 scroll view 的 Paging Enabled 打開

在 scroll view 加入horizontal stack view，設定 stack view 跟 content layout guide 0 間距

設定 stack view 的 Distribution Fill Equally

設定 stack view 跟 frame layout guide Equal Heights

此時還是會有紅色錯誤，因為 stack view 沒有內容，因此 scroll view 無法算出它捲動的範圍。此錯誤其實可以忽略，因為待會我們將從程式將圖片加到 stack view。

設定 stack view 的 Intrinsic Size(非必要)

不過如果你覺得紅色錯誤很礙眼的話，也可以將 stack view 的 Intrinsic Size 設為 Placeholder，輸入任何的寬高。它將給 stack view 一個假的大小，讓 scroll view 能推算捲動的範圍。

當 App 執行時，Placeholder 設定的寬高不會有任何作用，所以它只是讓我們比較開心，在 storyboard 不會看到討厭的紅色錯誤。

連結 scroll view & stack view 的 outlet

@IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var stackView: UIStackView!

從程式將 image view 加到 stack view

為了方便測試，我們利用亂數產生隨機數量的圖片加到 stack view。同樣的概念到時可以套用在網路抓取的圖片。

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let count = Int.random(in: 5...10)
        for i in 1...count {
            let number = Int.random(in: 1...6)
            let imageView = UIImageView(image: UIImage(systemName: "die.face.\(number).fill"))
            imageView.contentMode = .scaleAspectFit
            stackView.addArrangedSubview(imageView)
            if i == 1 {
                imageView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor).isActive = true 
            }
        }
}

利用 addArrangedSubview 將圖片加到 stack view。值得注意的，第一個加入的 image view 須設定跟 frameLayoutGuide 等寬的條件，如此搭配 stack view Distribution Fill Equally 的設定，即可讓每張圖的寬度等於 scroll view 的寬度，讓 scroll view 順利算出捲動範圍的寬度。

執行 App

當圖片數量很多的時候

建議改用 collection view 實現，scroll view 比較適合數量少的 case。