IOS開發之UIScrollView限制布局

概要

在iOS開發學習中，UIScrollView是繞不過去的一個重要控件。

但是相對于Android的ScrollView，iOS的這個滾動控件的用法簡直是複雜一萬倍。。。

最主要是目前能找到的大部分的視訊教程看到的關于UIScrollView的教程，都是使用Frame布局。沒有找到使用AutoLayout布局的教程。。隻有看文字教程學習，然後自己總結一下。

StoryBoard操作布局

在storyboard中，拖入一個UIScrollView,然後打開右側的show the size inspector，去掉勾選content layout guides，然後設定UIScrollView的上下左右限制為0,然後重新勾選content layout guides

到這裡發現Xcode提示限制有錯誤，原因是是因為UIScrollView的需要有一個ContentView來确定自己的滾動區域。

于是再拖一個UIView到UIScrollView上，然後改名這個UIView為ContentView，滑鼠右鍵拖動這個UIView到UIScrollView的content layout guides上，按住shift勾選前四個限制，讓UIScrollView和ContentView四個邊建立限制。

然後調整ContentView的限制的constant的值，Xcode預設建立的限制好像不太完美，預設給你自動計算了ContentView的初始大小。

把這個幾個調整為0

最後這個幾個設定後，發現限制錯誤的紅點依然沒有消失。。。點開一看。

說明UIScrollView無法根據寬高确定滾動方向。需要設定一下寬高。因為是移動裝置。預設應該是Y軸滾動。

那就設定一下寬等于UIScrollView的寬度。高度設為一個高一點的的值，即可滾動

滑鼠右鍵拖動ContentView到Frame Layout Guides上，然後限制ContentView和Frame Layout Guides寬度一樣。

然後單獨設定ContentView的高度為1000，就發現限制錯誤的紅點沒了，運作程式，白色背景出現滾動條，可以上下滑動滾動了。

使用純代碼布局

思路和使用StoryBoard一樣。隻是用代碼描述出來而已

let sv = UIScrollView();
        sv.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(sv)
        sv.backgroundColor = UIColor.systemGray;
        sv.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
        sv.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        sv.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
        sv.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true

        let contentView = UIView()
        contentView.translatesAutoresizingMaskIntoConstraints = false
        sv.addSubview(contentView)
        contentView.layer.name = "contentView"
        contentView.backgroundColor = UIColor.white
        contentView.leadingAnchor.constraint(equalTo: sv.contentLayoutGuide.leadingAnchor).isActive = true
        contentView.topAnchor.constraint(equalTo: sv.contentLayoutGuide.topAnchor).isActive = true
        contentView.trailingAnchor.constraint(equalTo: sv.contentLayoutGuide.trailingAnchor).isActive = true
        contentView.bottomAnchor.constraint(equalTo: sv.bottomAnchor).isActive = true
        contentView.widthAnchor.constraint(equalTo: sv.frameLayoutGuide.widthAnchor).isActive = true
        contentView.heightAnchor.constraint(equalToConstant: 1000).isActive = true