当前位置: > > > Swift - 使用UIScrollView实现页面滚动切换

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

(本文代码已升级至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
  • 6楼
    2017-10-31 10:16
    andy

    楼主你好,如过想做一个类似网易新网类app,即导航栏为uiscrollview中多个UIbutton, 内容区为uicollectionview,如何做到点击导航栏类别button时,切换uicollectionview对应的不同栏目类容?谢谢!

    站长回复

    可以试试PagingMenuController这个第三方组件,方便快捷, 具体用法可以参考我的这篇文章:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

  • 5楼
    2017-03-25 10:14
    yoyo

    如果 MyViewController 上面有几个按钮点击,怎么获取修改点击的button的背景颜色

    站长回复

    先通过点击事件获取到点击的button,再通过button.backgroundColor就可以修改该按钮的背景色。

  • 4楼
    2016-04-15 14:39
    brzhang

    谢谢航哥

    站长回复

    不客气

  • 3楼
    2016-02-02 17:42
    初生、小白

    如果是循环创建3个话,for in 应该是 0..< numOfPages 吧,不包含上界

    站长回复

    这里写的确实有问题,多谢提醒,现已修复。

  • 2楼
    2016-01-24 12:24
    只是一只蝴蝶

    你好像打少了字
    scrollView.contenSize=CGSizeMake(CGFloat(pageWidth*numOfPages), CGFloat(pageHeight))
    contenSize==>contentSzie
    initNumer==>initNumber

    站长回复

    确实有误,多谢你的提醒,现已修正。

  • 1楼
    2015-11-04 15:32
    Jack

    好,加我好友吧 不懂的我咨询你,行吗?新手上路

    站长回复

    QQ一直都只加家里人和身边朋友。如果有疑问可以在网站留言,我如果知道的都会回复的。