15、AutoLayout使用UIScrollView

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

1、Xcode12 在Xib中進(jìn)行UIScrollView布局

1.1 概要

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

1.2 布局方式

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

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

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

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

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

三、設(shè)置內(nèi)容滾動范圍

上面的步驟設(shè)置之后，我們會發(fā)現(xiàn)紅線仍然存在，這是因?yàn)锳utoLayout仍然不知道內(nèi)容的滾動范圍是多大，我們接下來設(shè)置滾動范圍，具體步驟為，左鍵選中ContentView，右鍵拖動到Frame Layout Guide

在Xcode12中,出現(xiàn)了寬度只有一半的情況。

這是因?yàn)樵赬code12中，設(shè)置contentView的寬度和Frame Layout Guide的寬度equal Widths時，默認(rèn)給設(shè)置為一個0.5左右的小數(shù)，我們把它更改為1即可以達(dá)到效果。

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)}

注意點(diǎn):

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。