[Swift]iOS开发之ScrollView

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)
            
        }