使用可视化UIScrollView创建轮播图框架的简单步骤

写这篇文章的原因
最近在做项目的时候遇到一个让人很蛋疼的问题,用可视化的方式创建轮播图总是出错,达不到预期的效果,下面简单总结一下如何用可视化的方式创建轮播图框架

1.在 main.storyboard中拖一个 UIScrollView 控件,并设置约束条件,如下图:

屏幕快照 2016-01-08 14.37.32.png

2.按住 control 键将 UIScrollView 拖到它的父视图view 上,在这里我们先选中 EqualHeights (使 UIScrollView 的 height 与当前屏幕等高)

屏幕快照 2016-01-08 14.38.52.png

3.在下图中的约束设置中设置 UIScrollView 的高度为当前屏幕的0.4倍(根据个人喜好自己调节)

屏幕快照 2016-01-08 14.41.01.png

4.此时按住 option 加上 command 加上 = 键 来更新视图

5.接下来将一个 UIView 拖到 UIScrollView 上,并设置约束条件 constraints,如下图:

屏幕快照 2016-01-08 14.48.58.png

6.按住 control 键将 UIView 拖到 UIScrollView 上,设置等高,等宽,

屏幕快照 2016-01-08 14.49.47.png

7.选中 Vertically in Container ,使UIView 与 UIScrollView 垂直对齐.

屏幕快照 2016-01-08 14.52.47.png

8设置 UIView 的宽度为父视图的3倍

屏幕快照 2016-01-08 14.55.11.png

9.正常情况下这样就可以把轮播图的基本框架搭建出来了,但实际上往往我们在试图控制器上添加 UINavigationController 或 UITabBarController,这时如果我们在按以上的步骤就会发现怎么都不是我们想要的效果,这时因为UINavigationController 和 UITabBarController 都默认设置了 translucent半透明 这个属性为真,而UINavigationController 或 UITabBarController本身都有一定的高度.

10.如果我们想要使 轮播图能正常显示,我们需要手动将UINavigationController 或 UITabBarController的translucent半透明 这个属性 设为 假,通过代码的方式我就不演示了,相信大家都们问题,通过可视化的方式如下图所示:

对于UINavigationController:

屏幕快照 2016-01-08 15.06.08.png

对于UITabBarController

屏幕快照 2016-01-08 15.05.44.png

这时大功告成,简单的轮播图框架已搭建好!

屏幕快照 2016-01-08 15.13.33.png