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

 

歡迎關注我的公眾號和我交流