15、AutoLayout使用UIScrollView

• 1、Xcode12 在Xib中進行UIScrollView布局
• • 1.1 概要
  • 1.2 布局方式
  • • 一、在視圖控制器中拖入一個UIScrollView并設置約束
    • 二、拖入一個UIView到UIScrollView中，并設置它的約束
    • 三、設置內容滾動范圍
• 2、SnapKit使用scrollView

1、Xcode12 在Xib中進行UIScrollView布局

1.1 概要

在Xcode11中對UIScrollView在Xib中的布局，蘋果引入了Content Layout guide和Frame Layout Guide。我們拖動一個UIScrollView到Xib中，默認就會有Content Layout guide和Frame Layout Guide兩個選項嵌入。如下圖：

1.2 布局方式

一、在視圖控制器中拖入一個UIScrollView并設置約束

拖入一個UIScrollView到ViewController中，并分別設置它相對于父視圖的約束為0，如下圖：

二、拖入一個UIView到UIScrollView中，并設置它的約束

拖入一個UIView到UIScrollView中,作為內容顯示視圖，Autolayout將使用這個View的寬高來計算UIScrollView的滾動范圍，并分別設置它相對于Content Layout guide的約束為0，具體步驟為：左鍵選中View，右鍵拖動它到Content Layout guide上，按住shift鍵，將上下左右都給選中，如果xcode默認了當前的相對數據，在右邊將它手動改為0，操作如下圖

注意上圖中右邊紅框區域，默認的一般不是0，要將它手動修改為0。
接下來，我們將View改名為ContentView，方便標識。

三、設置內容滾動范圍

上面的步驟設置之后，我們會發現紅線仍然存在，這是因為AutoLayout仍然不知道內容的滾動范圍是多大，我們接下來設置滾動范圍，具體步驟為，左鍵選中ContentView，右鍵拖動到Frame Layout Guide

在Xcode12中,出現了寬度只有一半的情況。

這是因為在Xcode12中，設置contentView的寬度和Frame Layout Guide的寬度equal Widths時，默認給設置為一個0.5左右的小數，我們把它更改為1即可以達到效果。

2、SnapKit使用scrollView

let scrollView = UIScrollView()let contentView = UIView()contentView.backgroundColor = UIColor.greenColor()let view1 = UIView()view1.backgroundColor = UIColor.redColor()let view2 = UIView()view2.backgroundColor = UIColor.blueColor()view.addSubview(scrollView)scrollView.addSubview(contentView)contentView.addSubview(view1)contentView.addSubview(view2)scrollView.snp_makeConstraints { (make) inmake.edges.equalTo(view)}contentView.snp_makeConstraints { (make) inmake.edges.equalTo(scrollView)make.width.equalTo(view)}view1.snp_makeConstraints { (make) inmake.top.equalTo(contentView)make.leading.trailing.equalTo(contentView)make.width.equalTo(contentView)make.height.equalTo(500)}view2.snp_makeConstraints { (make) inmake.top.equalTo(view1.snp_bottom)make.bottom.equalTo(contentView.snp_bottom)make.leading.trailing.equalTo(contentView)make.width.equalTo(contentView)make.height.equalTo(500)}

注意點:

• 1、contentView的寬度要相對與view，不是scrollView
• 2、contentView內的控件要相對于contentView自上而下布局
• 3、contentView內最后一個控件的bottom要相對于contentView的bottom

總結

以上是生活随笔為你收集整理的15、AutoLayout使用UIScrollView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。