美文网首页我的天空iOS开发iOS Tech
如何使用UIScrollerView在StoryBoard实现上

如何使用UIScrollerView在StoryBoard实现上

作者: minggo | 来源:发表于2015-12-18 17:45 被阅读1938次

    Storyboard、AutoLayout的确用的不顺手,不过有时候也极其体现它的效率。如下就已一个上下滑动的欢迎界面为例说明这一点。

    思路:


    1.在Storyboard的UIViewController中添加一个UIScrollerView。

    2.设置UIScrollerView中的引导页面个图片为等高等宽约束。

    3.第一张图片设置高度约束用来再viewDidLoad中改变成为屏幕高度。

    当然事情并非直接拖拉就完事,其中的细节还是要注意的。


    实现:


    1.添加UIScrollerView到VC中,设置全屏约束。UIScrollerView添加一个唯一的容器UIView,这一点跟Android的ScrollerView一样。

    图1

    接着,XCode直接报错提醒,这个提醒是指没有设定ScrollerView的滑动方向说明,选择快速处理为UIScrollerView添加上下左右滑动限制,去除错误提醒,最后的时候再将左右滑动限制删除即可。快速处理如下图

    图2

    2.设置UIScrollerView滑动分页效果,像Android的ViewPager滑动超过一半就默认转到下一个View。当然也可以在代码中设置

    scrollerview.pageEnable = YES; 这里重点体现点点鼠标就能完成,在IB勾上这一项:

    图3

    3.拖拉5个UIImageView设置登高等宽和边距。如下图:

    图4

    4.设置完之后,图片之间的间距还是要细调一下,为第一个图片设置高度约束,如下图:

    图5

    5.为各个UIImageView设置图片值,拖来第一张图片的高度约束到VC中,重要的事情在于删除UIScrollerView 左右滑动约束。

    图6

    6.终于到了结果的演示时间。

    运行效果

    Demo的代码地址:

    https://github.com/minggo620/iOSWelcomePage.git


    【原创出品 未经授权 禁止转载】

    【欢迎微友分享转发 禁止未经授权的转载】

    微信公众号:minggo_dev

    相关文章

      网友评论

      • jacinzhang:博主,其实这里一行代码都不用写的,Storyboard可以直接全部搞定
        jacinzhang:@minggo Demo在我电脑上,晚上回去我把它放GitHub上哈,然后告诉你哈
        minggo:@xinzhang 你有没有demo我学习下?
        jacinzhang:@xinzhang 另scrollView的居中约束也没什么必要加吧?
      • c37e3f987f84:已收录
      • daf1ae7a6f28:这个很体现storyboard优势,赞
        d696133f00e5:@清风笑一 确实很方便,但storyboard还是显得笨重
      • 6676e1f66293:别忘了去掉scrollview右边的滑杆哦
        minggo:@6676e1f66293 嗯嗯,为了demo动画图展示效果
      • 曾樑::+1::+1:
        minggo: @曾樑 谢谢
      • b9de1534baf7:刚好用上,很简便干净!
        minggo:@平静的青年 呵呵
      • xiakang:我靠,小明果然很努力啊

      本文标题:如何使用UIScrollerView在StoryBoard实现上

      本文链接:https://www.haomeiwen.com/subject/pcfuhttx.html