Storyboard中的UIScrollView使用自动布局,使其能够滚动

Easter79
• 阅读 795

在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂。根据实践,我说一下我的理解,在故事板或xib中,ScrollView是根据其下面的一个View的大小来确定ContentSize的大小。

看一下效果

Storyboard中的UIScrollView使用自动布局,使其能够滚动

1. 创建一个项目,拖拽一个ScrollView到故事板中,如下图

Storyboard中的UIScrollView使用自动布局,使其能够滚动

2. 选中ScrollView,添加约束。

Storyboard中的UIScrollView使用自动布局,使其能够滚动

3. 拖拽一个View到ScrollView上, 然后添加上下左右四周约束。

Storyboard中的UIScrollView使用自动布局,使其能够滚动

4.添加完之后, 可能会报一个错, 如下图, 这个暂时别去管。

Storyboard中的UIScrollView使用自动布局,使其能够滚动

5. 我们先确定一下, 我们是需要水平方向的滚动还是竖直方向的滚动,或者水平方向和竖直方向都需要滚动。

a.水平方向和竖直方向都需要滚动的话, 不用添加

b.水平方向滚动需要添加下面一个约束

Storyboard中的UIScrollView使用自动布局,使其能够滚动

c.竖直方向需要添加下面一个约束

Storyboard中的UIScrollView使用自动布局,使其能够滚动

6.我们以水平方向滚动为例,  我们需要确定我们想要的宽度, 添加一个固定的宽度的约束。

Storyboard中的UIScrollView使用自动布局,使其能够滚动

7.选中View, 更新一下Frame

Storyboard中的UIScrollView使用自动布局,使其能够滚动

8.如果是想要动态设置ScrollView的宽度,也就是设置View的宽度约束的值, 我们将其拉成属性, 然后修改其值。

Storyboard中的UIScrollView使用自动布局,使其能够滚动

9. 如果是确定的宽度, 可以在- (void)updateViewConstraints这个方法中修改,也可以在别处修改。

Storyboard中的UIScrollView使用自动布局,使其能够滚动

10.现在运行,就可以水平滚动了。 竖直方向的滚动和水平方向滚动的设置差不多。 我们来添加两个View, 先拖拽一个View(我设为灰色)到视图上, 然后添加约束, 如下图

Storyboard中的UIScrollView使用自动布局,使其能够滚动

11.再拖拽一个View, 背景颜色设为红色,设置好之后, 将frame设置到我们需要的, 我这边将X设置到600。

Storyboard中的UIScrollView使用自动布局,使其能够滚动

12.我们给第二个View添加约束,如下图

Storyboard中的UIScrollView使用自动布局,使其能够滚动

13.我们还需要设置一个约束, 就是第二个View距离SuperView的距离,就是第二个View的Leading约束

Storyboard中的UIScrollView使用自动布局,使其能够滚动

14.然后将这个约束Leading拉成属性,在- (void)updateViewConstraints设置他的值

Storyboard中的UIScrollView使用自动布局,使其能够滚动

如下图

Storyboard中的UIScrollView使用自动布局,使其能够滚动

这样子就OK了。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k