swift 4.2代码实现分屏导航
基于分屏导航是平铺导航模式的主要实现方式,涉及的主要控件有分屏控件(UIPageControl)和屏幕滚动视图(UIScrollView).其中分屏控件是iOS标准控件.
ViewController.swift:
import UIKit
//定义屏幕宽度
let S_WIDTH: CGFloat = UIScreen.main.bounds.size.width
//定义屏幕高度
let S_HEIGHT: CGFloat = UIScreen.main.bounds.size.height
class ViewController: UIViewController ,UIScrollViewDelegate {
var scrollView: UIScrollView!
var pageControl: UIPageControl!
var imageView1: UIImageView!
var imageView2: UIImageView!
var imageView3: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
//UIScrollView屏幕滚动视图
self.scrollView = UIScrollView()
self.view.addSubview(self.scrollView)
self.scrollView.delegate = self
self.scrollView.isPagingEnabled = true //设置屏幕滚动视图每次滑动时翻一屏
self.scrollView.showsHorizontalScrollIndicator = false //设置水平滚动条不显示
self.scrollView.showsVerticalScrollIndicator = false //设置垂直滚动条不显示
self.scrollView.contentSize = CGSize(width: S_WIDTH * 3, height: S_HEIGHT) //设置屏幕滚动视图的contentSize属性,表示屏幕滚动视图中内容视图(Content View)的大小
self.scrollView.frame = self.view.frame //设置屏幕滚动视图的frame属性为当前屏幕大小
//添加图片视图
self.imageView1 = UIImageView(frame: CGRect(x: 0.0, y: 0.0, width: S_WIDTH, height: S_HEIGHT))
self.imageView1.image = UIImage(named: "达芬奇-蒙娜丽莎.png")
self.imageView2 = UIImageView(frame: CGRect(x: S_WIDTH, y: 0.0, width: S_WIDTH, height: S_HEIGHT))
self.imageView2.image = UIImage(named: "罗丹-思想者.png")
self.imageView3 = UIImageView(frame: CGRect(x: 2 * S_WIDTH, y: 0.0, width: S_WIDTH, height: S_HEIGHT))
self.imageView3.image = UIImage(named: "保罗克利-肖像.png")
self.scrollView.addSubview(self.imageView1)
self.scrollView.addSubview(self.imageView2)
self.scrollView.addSubview(self.imageView3)
let pageControlWidth: CGFloat = 300.0
let pageControlHeight: CGFloat = 37.0
//创建分屏控件对象
self.pageControl = UIPageControl(frame: CGRect(x: (S_WIDTH - pageControlWidth)/2, y: S_HEIGHT - pageControlHeight, width: pageControlWidth, height: pageControlHeight))
//设置总屏数
self.pageControl.numberOfPages = 3
self.pageControl.addTarget(self, action: #selector(changePage(_:)), for: .valueChanged)
self.view.addSubview(self.pageControl)
}
// MARK: --实现UIScrollViewDelegate委托协议(屏幕滚动视图的事件处理)
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offset = scrollView.contentOffset
self.pageControl.currentPage = Int(offset.x / S_WIDTH)
}
// MARK: --实现UIPageControl事件处理
//根据分屏控件的当前屏幕属性(currentPage)重新调整了屏幕滚动视图的偏移量.为了使屏幕变化产生动画效果,使用了UIView的静态方法animateWithDuration来重新调整控件的偏移量
@objc func changePage(_ sender: AnyObject) {
UIView.animate(withDuration: 0.3, animations : {
let whichPage = self.pageControl.currentPage
self.scrollView.contentOffset = CGPoint(x: S_WIDTH * CGFloat(whichPage), y: 0)
})
}
}
image.png