返回 导航

Swift

hangge.com

Swift - 使用UIScrollView实现页面滚动切换

作者：hangge | 2015-01-19 11:23
（本文代码已升级至Swift3）

UIScrollView提供了以页面为单位滚动显示各个子页面内容的功能，每次手指滑动后会滚动一屏的内容。
 
         

要实现该功能，需要如下操作：
1，将UIScrollView的 isPagingEnabled 属性设置成true
2，必须通过 contentSize 属性设置各个页面相加的宽度。比如iphone手机一屏宽度是320，如果有3个页面，则contentSize就需要设置为320*3=960
3，最好将 showsHorizontalScrollIndicator 和 showsVerticalScrollIndicator 设置成 false 隐藏横向和纵向滚动条。
4，如果 scrollsToTop 不需要也设置成false。

--- 主页面 --- 
import UIKit

class ViewController: UIViewController{
    let numOfPages = 3
    let pageWidth = 320
    let pageHeight = 360
    
    override func viewDidLoad(){
        super.viewDidLoad()
        
        //scrollView的初始化
        let scrollView = UIScrollView()
        scrollView.frame = self.view.bounds
        //为了让内容横向滚动，设置横向内容宽度为3个页面的宽度总和
        scrollView.contentSize = CGSize(width: pageWidth * numOfPages,
                                        height: pageHeight)
        scrollView.isPagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.showsVerticalScrollIndicator = false
        scrollView.scrollsToTop = false
        
        //添加子页面
        for i in 0..<numOfPages{
            let myViewController = MyViewController(number:(i+1))
            myViewController.view.frame = CGRect(x:pageWidth*i, y:0,
                                                 width:pageWidth, height:pageHeight)
            scrollView.addSubview(myViewController.view)
        }
        self.view.addSubview(scrollView)
    }
}

--- 子页面 --- 
import UIKit

class MyViewController: UIViewController{
    var number:Int!
    let colorMap=[
        1:UIColor.black,
        2:UIColor.orange,
        3:UIColor.blue
    ]
    
    init(number initNumber:Int){
        self.number = initNumber
        super.init(nibName:nil, bundle:nil)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad(){
        let numberLabel = UILabel(frame:CGRect(x:130, y:50, width:50, height:30))
        numberLabel.text = "第\(number!)页"
        numberLabel.textColor = UIColor.white
        self.view.addSubview(numberLabel)
        self.view.backgroundColor = colorMap[number]
    }
}
评论

全部评论（6）

回到顶部