ScrollView是应用非常广泛的控件,当有内容整块屏幕显示不完的时候,就是scrollView使用的场合了。比如网页,大尺寸图片浏览。
下面我们来实现这样的页面效果
先定义内容的宽高,页数,颜色⬇️
let pageWidth:CGFloat = CGRectGetWidth(UIScreen.mainScreen().bounds) let pageHeight:CGFloat = CGRectGetHeight(UIScreen.mainScreen().bounds) let pageNum = 3 let colorMap = [UIColor.redColor(),UIColor.yellowColor(),UIColor.blueColor()]
然后开始设置scrollView
//初始化scrollView let scrollView = UIScrollView() scrollView.frame = self.view.bounds scrollView.showsHorizontalScrollIndicator = true scrollView.showsVerticalScrollIndicator = false scrollView.pagingEnabled = true //定义scrollView的内容尺寸 scrollView.contentSize = CGSizeMake(pageWidth*CGFloat(pageNum), pageHeight) //添加子view for page in 0..<pageNum { let contentPage = UIView() contentPage.frame = CGRectMake(CGFloat(page)*pageWidth, 0, pageWidth, pageHeight) contentPage.backgroundColor = colorMap[page] scrollView.addSubview(contentPage) } self.view.addSubview(scrollView)
tip1:其中添加子view的环节,如果contentPage定义在外面(变成全局变量),循环出来只会出现最后的页面。
tip2:scrollView的contentSize不要忘了。
tip3:scrollView的frame是scrollView这个控件的大小,不是contentSize!!!
tip4:pagingEnabled属性如果是false可以滑出这种效果⬇️
这是横向滚动的实现,竖向也是一样的,下面我们来模仿大尺寸图片浏览~!
只需更改一点点代码即可~
let pageNum = 4 let colorMap = [UIColor.redColor(),UIColor.yellowColor(),UIColor.blueColor(),UIColor.blackColor()]
//定义scrollView的内容尺寸 scrollView.contentSize = CGSizeMake(pageWidth*2, pageHeight*2)
注意添加子view的逻辑
//添加子view for page in 0..<pageNum { let contentPage = UIView() var originY:CGFloat = 0 var originX:CGFloat = pageWidth*CGFloat(page) if page > 1 { originY = pageHeight originX = pageWidth*CGFloat(page-2) } contentPage.frame = CGRectMake(originX, originY, pageWidth, pageHeight) contentPage.backgroundColor = colorMap[page] scrollView.addSubview(contentPage) }