ScrollView使用AutoLayout自动布局

最近正在练习一个小项目,有用到ScrollView,页面也比较简单,所以就用Storyboard了。在Storyboard中布局ScrollView遇到了不少的坑,基本都是content size没有设置。以下是小Demo

可以直接下载Demo自己分析,我也是别人源代码3个小时才研究出来的(比较笨),不想研究的,可以后面的教程。

​* Demo地址*:https://github.com/misaka14/ScrollView-AutoLayout


Snip20151222_3.png
  • 3、添加一个View
    • 1 、重命名wtView
    • 2 、添加约束(0,0,0,0)
      截图:
      Snip20151223_5.png

      gif动画:
      1.gif

4 、添加ScrollView

  • 1 、添加约束 (0,0,0,0)
    截图:

    Snip20151223_6.png

    gif动画
    2.gif

  • 5 、在ScrollView中添加View

    • 1 、添加一个ViewScrollView中,并添加约束(0,0,0,0)
      截图:

      Snip20151223_7.png

    • 2 、contentViewwtView添加Equal WidthsEqual Heights两个约束
      截图:

      Snip20151223_8.png

  • 3 、点击contenetViewEqual Heights约束,并将Multiplier的值改为2
    截图:

    Snip20151223_9.png

    gif动画
    3.gif

  • 6、添加蓝色View、黄色View

    • 1 、添加blueViewyellowView
      截图:
      Snip20151223_10.png
    • 2 、blueViewwtView添加Equal WidthsEqual Heights两个约束
      截图:
  • 3 、blueViewcontentView添加LeadingTop两个约束
    截图:

    Snip20151223_14.png

  • 4、yellowViewblueView添加Vertical SpacingLeadingEqual WithsEqual Heights四个约束
    截图:

    Snip20151223_16.png

  • 5、将yellowViewblueViewVertical SpacingConstant改为0
    截图:

    Snip20151223_17.png

    gif动画:
    4.gif

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容