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 guideFrame Layout Guide。我们拖动一个UIScrollView到Xib中,默认就会有Content Layout guideFrame 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相关推荐

  1. 怎样使用AutoLayOut为UIScrollView添加约束

    1.在ViewController中拖入1个UIScrollView,并为其添加约束 约束为上下左右四边与superview对齐 2.在scrollview中,拖入1个UIView,为了便于区分将其设 ...

  2. 史上最简单的UIScrollView+Autolayout出坑指南

    ##背景 网上有很多使用Storyboard完成UIScrollview的例子,但是纯代码的例子却不多.有限的一些例子大多也是外国开发者用VFL写的.而这篇文章基于swift语言和SnapKit分析了 ...

  3. UIScrollView

    UIScrollView(包括它的子类 UITableView 和 UICollectionView)是 iOS 开发中最常用也是最有意思的 UI 组件,大部分 App 的核心界面都是基于三者之一或三 ...

  4. 在Scrollview中使用AutoLayout

    AutoLayout 与 UIScrollView的相遇是一个不可避免的场景,像UITableView.UIWebView这些都是继承于UIScrollView的,关于它们的autolayout布局大 ...

  5. iOS开发——OC篇常用问题解答(一)

    常用问题解答 1.设置 ImagePicker 的大小 ImagePicker 在 Popover Controller 总是以默认大小显示,设置 popoverContentSize 属性似乎无用. ...

  6. IOS一些显示效果和动画效果资料

    2019独角兽企业重金招聘Python工程师标准>>> 1.基于AutoLayout的UIScrollView悬停Tab 转载于:https://my.oschina.net/zhu ...

  7. 模仿网易新闻客户端的滚动菜单

    模仿网易新闻客户端的滚动菜单,点击菜单的时候有放大标题的动画效果.demo地址:https://github.com/BigHub/ScrollMenuViewTest 需要用到facebook的开源 ...

  8. ScrollView详解

    创建方式 1:StoryBoard/Xib 这里StoarBoard就不多说,直接拖就可以,说太多没意思,如果连这个都不会我只能先给你跪了! 2:代码: CGRect bounds = [ [ UIS ...

  9. UIScrollView autolayout

    给UIScrollView的subview加autolayout约束时,UIScrollView会根据子view的约束来重新计算自己的contentSize.前提是子view的四个方向都设了相对于UI ...

  10. 如何在 AutoLayout 中使用 UIScrollView (多个ContentView)

    http://codehappily.wordpress.com/2013/11/14/iOS-how-to-use-uiscrollview-with-autolayout-pure-autolay ...

最新文章

  1. AI芯片下一步怎么走?“从软件中来,到软件中去”
  2. Python3猜数字小游戏
  3. Redis高级客户端Lettuce详解
  4. DayDayUp:三观一致必将取代血缘关系,成为新的人际纽带(博主推荐文章)
  5. 启用SAP GUI FOR HTML
  6. linux卸载vs codeblocks,哪个适合linux? GNU make vs cmake vs codeblocks vs qmake
  7. 自己在windows下第一次安装pygame成功的经历
  8. 银河证券王锦炎:大数据在金融领域应用
  9. 数据库 创建 / 查看/ 删除
  10. 7-35 城市间紧急救援 (25 分)(思路加详解)
  11. Windows 10 IoT Core 17101 for Insider 版本更新
  12. django-模板语言dtl-render
  13. Mutable and Immutable Variables in Python
  14. mysql三张表关联查询成绩表_mysql三张表关联查询
  15. ARM嵌入式系统开发之接收函数的实现
  16. 同义词转换不再有效_中考英语丨初中英语句型转换大全
  17. 洛谷 P1007 独木桥 题解 C语言,C++
  18. 小程序1rpx,边框不完整或线条太粗
  19. 四柱笔记(一):基本阴阳理论
  20. 36 选 7 彩票机选程序

热门文章

  1. 基于stc15f2k60s2芯片单片机编程(呼吸灯)
  2. 拍的视频怎么把录音去掉?
  3. 测试用例管理工具-TestLink
  4. adb提示已停止工作问题的解决方案
  5. finereport9.0破解版|finereport10.0破解并发数|finereport授权注册|FineBI5.0破解lic
  6. Windows电脑生成iOS证书p12及mobileprovision文件文档
  7. Oracle 数据库实例介绍
  8. Oracle数据库的安装及使用教程
  9. 高德地图:No implementation found for void com.autonavi.base.ae.gmap.GLMapEngine.nativeInitParam
  10. VBoxGuestAdditions.iso下载