Swift - 滚动视图（UIScrollView）的用法和实现页面滚动切换

1，当图片尺寸超过屏幕时，使用UIScrollView可以实现滚动条视图，即手指触摸滚动屏幕方便浏览整个页面。

1 2 3 4 5 6

let scrollView=UIScrollView() scrollView.frame=self.view.bounds let imageView=UIImageView(image:UIImage(named:"bigpic")) scrollView.contentSize=imageView.bounds.size; scrollView.addSubview(imageView); self.view.addSubview(scrollView)

2，获取滚动视图移动的x,y坐标
通过scrollView.contentOffset.x与scrollView.contentOffset.y我们可以取到移动的偏移位置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

import UIKit   class ViewController: UIViewController,UIScrollViewDelegate {           var scrollView:UIScrollView!           override func viewDidLoad() {         super.viewDidLoad()                   scrollView=UIScrollView()         //设置代理         scrollView.delegate = self         scrollView.frame=self.view.bounds         let imageView=UIImageView(image:UIImage(named:"ii"))         scrollView.contentSize=imageView.bounds.size;         scrollView.addSubview(imageView);         self.view.addSubview(scrollView)     }           //视图滚动中一直触发     func scrollViewDidScroll(scrollView: UIScrollView) {         print("x:\(scrollView.contentOffset.x) y:\(scrollView.contentOffset.y)")     }          override func didReceiveMemoryWarning() {         super.didReceiveMemoryWarning()     } }

3，手势放大缩小
要实现放大缩小功能，需要指定UIScrollView的允许缩放最大比例和最小比例（默认都是是1.0）。
同时delegate属性指定一个委托类，委托类要继承UIScrollViewDelegate协议，并在委托类中实现viewForZoomingInScrollView方法。
（注：在模拟器中测试，需要按住option键再拖动内容）

1 2 3 4 5 6 7 8 9 10 11 12

scrollView.minimumZoomScale=0.1 //最小比例 scrollView.maximumZoomScale=3 //最大比例 scrollView.delegate=self   func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {     for subview : AnyObject in scrollView.subviews {         if subview.isKindOfClass(UIImageView) {             return subview as? UIView         }     }     return nil }

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

 

要实现该功能，需要如下操作：

1，将UIScrollView的 pagingEnabled 属性设置成true

2，必须通过 contentSize 属性设置各个页面相加的宽度。比如iphone手机一屏宽度是320，如果有3个页面，则contentSize就需要设置为320*3=960

3，最好将 showsHorizontalScrollIndicator 和 showsVerticalScrollIndicator 设置成 false 隐藏横向和纵向滚动条。

4，如果 scrollsToTop 不需要也设置成false。

--- 主页面 ---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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=CGSizeMake(CGFloat(pageWidth*numOfPages),             CGFloat(pageHeight))         scrollView.pagingEnabled = true         scrollView.showsHorizontalScrollIndicator = false         scrollView.showsVerticalScrollIndicator = false         scrollView.scrollsToTop = false                   //添加子页面         for i in 0..<numOfPages{             let myViewController = MyViewController(number:(i+1))             myViewController.view.frame = CGRectMake(CGFloat(pageWidth*i),                 CGFloat(0), CGFloat(pageWidth), CGFloat(pageHeight))             scrollView.addSubview(myViewController.view)           }         self.view.addSubview(scrollView)     } }

--- 子页面 ---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

import UIKit   class MyViewController: UIViewController{     var number:Int!     let colorMap=[         1:UIColor.blackColor(),         2:UIColor.orangeColor(),         3:UIColor.blueColor()     ]           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:CGRectMake(130,50,50,30))         numberLabel.text = "第\(number)页"         numberLabel.textColor = UIColor.whiteColor()         self.view.addSubview(numberLabel)         self.view.backgroundColor = colorMap[number]     } }