XIB中UIScrollView的自动布局

  • 使用场景 我们在使用XIB或者StoryBoard的时候 经常会使用到UIScrollView ,但是如果想使用XIb 进行UIScrollView自动布局(AutoLayout)复杂 ,因为scrollview本身contentSize、contentInsets等复杂的特性导致
  • 让我们来看下 在XIB中UIScrollView的自动布局的几种方法

效果

  • 这里我们以竖屏为例

** 1 . 第一步 --> ScrollView**

  • 新创建一个项目 ,拖动一个UIScrollView到StoryBoard中 并给ScrollView添加约束
1-拖动一个ScrollView
1-给ScrollView添加相对于SuperView的约束

** 2 . 第二步 -->Contain View**

  1. 在拖动一个View(将其命名为Contain VIew)到ScrollView上,然后添加上下左右的约束
    注意 :这个 ScrollView就是根据这个Contain View 来确定ContentSize的大小的

    2-添加Contain View约束

    特别提醒添加完 Contain View的约束后~Xcode 会报错 暂时先别管

  2. 根据横竖屏 设置Contain View的额外约束

    • 我们需要先确定 我们ScrollView是横屏滚动还是 竖屏滚动
    • 如果 横竖屏都需要滚动的话 就不需要添加下面的约束

    a .横屏滚动

3-根据横竖屏 添加Contain View的额外约束条件

3 . 设置Contain View的高度(如果是横屏的就要设置宽度)

  • 通过设置Contain View的宽度来确定 ScrollView 的高度
  • 如果想动态设置ScrollView的高度,我们可以将这个高度的约束 拉出去~然后该成属性
    然后在修改
4-ContainView的高度约束

4.如果是确定的宽度 可以在updateViewConstraints方法中修改,也可以在别的地方修改

//更新约束
- (void)updateViewConstraints
{
    [super updateViewConstraints];
    //设置ContentSize为3个屏幕的宽度
    self.ViewHeight.constant= CGRectGetHeight([UIScreen mainScreen].bounds)*3;
}

**3.第三步 -->添加Contain View内的UI控件 **

  • 现在就可以 竖直滚动了 只是ScrollView里面没有元素而已 有的就是 一个 Contain View的宽高的 空间
  • 所以我们现在要做的就是 向一个View(Contain View)中添加 内容

3-为需要添加的三个视图 添加约束
  • 然而的上面的约束 并没有 设置 三个View的高度
  • 我们可以 添加通过代码 手动设置 这几个视图的高度
    添加视图高度的约束
  • 通过代码设置 这几个视图的高度
//更新约束
- (void)updateViewConstraints
{
    [super updateViewConstraints];
    //设置ContentSize为3个屏幕的宽度
    self.ViewHeight.constant= CGRectGetHeight([UIScreen mainScreen].bounds)*3;
    //第二个视图top距离SuperView的距离 也就是第一个视图的高度
   self.secondViewTop.constant=CGRectGetHeight([UIScreen mainScreen].bounds);
    //第三个视图top 距离SuperView的距离 也就是第二个视图的高度
    self.threeViewTop.constant=CGRectGetHeight([UIScreen mainScreen].bounds)*2;
    //第三个视图的高度= ContentSize.height(self.ViewHeight.constant)-(self.threeViewTop.constant)
}

参考文章
如何对scrollview进行自动布局
参考Demo: GitHubDemo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容