ios制作引导页和广告栏
说明：开发环境为XCode7 beta5
引导页和广告栏的制作都是基于UIScrollView,因此它们有许多相似的地方,不同的是引导页有跳转到其它页面的功能,而广告栏具有轮播的功能.
引导页部分
-
打开XCode,创建一个新的工程,选择Single View Application,点击Next.
-
填写工程名,Language选择Swift,点击Next.选择一个位置存储工程,点击Create,完成工程的创建.
-
打开storyboard,取消勾选Use Size Classes,在弹出的提示框中,点击Disable Size Classes,这样设计面板会呈现iphone的大小.
-
从控件库中拖出一个ScrollView到设计面板中,让它铺满整个设计面板.
-
选中ScrollView给它增加一些约束,这样做的结果是,在不同尺寸的iphone下,ScrollView都能铺满整个屏幕.
-
调整ScrollView的一些属性：取消勾选滚动条的显示,勾选Paging Enable属性,以及取消勾选Bounces属性.
修改这些属性之后,ScrollView会把水平方向和垂直方向的滚动条隐藏掉,每一次滑动ScrollView的内容偏移量都会是一个屏幕的的宽度,没有弹簧效果,(既是在滑动到尽头之后不能再继续滑,松开手会自动回弹的效果).
-
从控件库拖一个Page Control到设计面板中,这时Page Control成为了ScrollView的子视图,这不是想要的结果.从Document Outline中拖拽Page Control使它和ScrollView在同一层次上,都是View的子视图.
-
对Page Control的属性也做一些调整,改变它的Tint Color和Current Page Color.再对Page Control的尺寸和位置做一些修改.
完成后的效果图如下
-
接着为Page Control添加一些约束,以确定Page Control的位置和大小.
-
打开辅助视图.为ScrollView和Page Control生成相应的outlet.选中ScrollView,按住ctrl键,按住鼠标左键往辅助视图中拖出一条蓝色的箭头,松开鼠标,填写outlet的名字,点击Connect就为控件生成了对应outlet.用同样的方法为Page Control生成outlet.这里生成的outlet分别为guideScrollView和pageControl.
-
打开资源文件夹,导入要用到的图片资源.(其中3张用于引导页,5张用于广告栏,一张用作button的背景图)
- 单击ViewController.swift代码文件,在其中添加代码,实现引导页的功能.
首先在viewDidLoad()函数的上方定义两个常量,用来保存屏幕的宽高
let width = UIScreen.mainScreen().bounds.width
let height = UIScreen.mainScreen().bounds.height
接着在viewDidLoad()函数的下方定义一个函数,用来对guideScrollView做一些配置.
func setGuidePages() {
// a. 设置scrollview的内容大小
guideScrollView.contentSize = CGSizeMake(width * 3.0, height)
// b. 将引导页图片添加到scrollview中
for i in 1...3 {
let imageView = UIImageView(frame: CGRectMake(width * CGFloat(i - 1), 0, width, height))
imageView.image = UIImage(named: "guide\(i)")
guideScrollView.addSubview(imageView)
}
}
这里有3张引导页而且是横向滑动,所以把guideScrollView的内容大小的宽度设置为3倍屏幕的宽度,高度设置为屏幕的高度.然后一个for循环创建3个imageView,将它水平排列,添加到guideScrollView中.
在viewDidLoad()函数中调用setGuidePages().
override func viewDidLoad() {
super.viewDidLoad()
setGuidePages()
}
到这一步为止,代码文件类似于这样.
import UIKit
class ViewController: UIViewController {
// 1. 拖拽生成控件的outlet
@IBOutlet weak var guideScrollView: UIScrollView!
@IBOutlet weak var pageControl: UIPageControl!
// 2. 定义两个常量保存屏幕的宽高
let width = UIScreen.mainScreen().bounds.width
let height = UIScreen.mainScreen().bounds.height
override func viewDidLoad() {
super.viewDidLoad()
setGuidePages()
}
// 3. 配置guideScrollView
func setGuidePages() {
// a. 设置scrollview的内容大小
guideScrollView.contentSize = CGSizeMake(width * 3.0, height)
// b. 将引导页图片添加到scrollview中
for i in 1...3 {
let imageView = UIImageView(frame: CGRectMake(width * CGFloat(i - 1), 0, width, height))
imageView.image = UIImage(named: "guide\(i)")
guideScrollView.addSubview(imageView)
}
}
}
运行一下吧,看下有什么效果.
可以发现页面可以左右滑动,pageControl却没有和当前页面对应起来.为了解决这个问题,需要实现UIScrollView的一个代理方法,以此来获得guideScrollView停止滑动后的水平偏移量.
首先修改类的定义,让ViewController遵循UIScrollViewDelegate协议.
class ViewController: UIViewController, UIScrollViewDelegate
在viewDidLoad()中添加一句代码,添加到调用setGuidePages()函数之前就可以了.这句代码把guideScrollView的代理人为当前ViewController,那么UIScrollView的代理方法将由当前的ViewController来执行.
guideScrollView.delegate = self
接着实现一个代理方法,把它添加到setGuidePages()函数的下方.
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
// a. 获得当前显示的页面
let currentPage = Int(scrollView.contentOffset.x / width)
// b. 设置页面控制器的当前页属性
pageControl.currentPage = currentPage
}
这段代码会在什么时候执行呢??从代理方法的名字可以知道,在scrollView停止减速后会执行这个代理方法.(停止减速,那么scrollView也停止滑动了).
再运行一次,看看效果.
左右滑动几次,可以看到pageControl已经和当前显示的引导页对应起来了.可以说引导页的功能已经完成了一半了.
接下来要在第3个引导页上添加一个button,用来跳转到主应用.
在viewDidLoad()函数的上方定义一个button.
var goButton: UIButton!
编写一个函数,对goButton做一些配置,并把它添加到guideScrollView中.
func addButton() {
// a. 创建一个button,宽度为100,高度为35
goButton = UIButton(frame: CGRectMake(width * 2.0, height - 100.0, 100, 35))
// b. 让button的中心点的横坐标位于第三个页面的中心
goButton.center.x = self.view.center.x + width * 2.0
// c. 设置button的背景图和标题,以及标题在不同状态下的颜色
goButton.setBackgroundImage(UIImage(named: "bg"), forState: UIControlState.Normal)
goButton.setTitle("开始体验", forState: UIControlState.Normal)
goButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
goButton.setTitleColor(UIColor.lightGrayColor(), forState: UIControlState.Highlighted)
// d. 把button添加到guideScrollView中
guideScrollView.addSubview(goButton)
}
ok,接着在viewDidLoad()中调用addButton()
运行一遍,看下效果.
为了让goButton有一个淡出的效果,把scrollViewDidEndDecelerating(scrollView: UIScrollView)做如下修改.
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
// a. 获得当前显示的页面
let currentPage = Int(scrollView.contentOffset.x / width)
if currentPage == 2 {
UIView.animateWithDuration(1.5, animations: { () -> Void in
self.goButton.layer.opacity = 1
})
}
else {
UIView.animateWithDuration(1.5, animations: { () -> Void in
self.goButton.layer.opacity = 0
})
}
// b. 设置页面控制器的当前页属性
pageControl.currentPage = currentPage
}
页面的下标从0开始,if语句的作用判断当前是否滑到了第3个页面,是的话将goButton的透明度设置为1,让它呈现出来,否则把goButton的透明度设置为0,将它隐藏.
为了在点击goButton可以跳转到新的页面,需要另外一个ViewController来承载新的页面.
打开storyboard拖出一个新的ViewController
选中新添加的ViewController,给它设置一个Storyboard ID,通过这个ID,可以用代码的方式获取到这个ViewController.
接着创建一个新的文件,选择Cocoa Touch Class,点击Next
创建一个类,命名为MainPageViewController,继承自UIViewController
然后回到storyboard,选中新添加的ViewController,让它绑定到新创建的类.
ok,现在打开ViewController.swift代码文件,添加相应的代码,实现跳转的功能.
在最后一个花括号的上方,定义一个函数
func goMainPage(button: UIButton) {
let mainPageVC = storyboard!.instantiateViewControllerWithIdentifier("mainPage")
self.presentViewController(mainPageVC, animated: true, completion: nil)
}
这段代码的作用是,通过storyboard初始化刚刚创建的MainPageViewController,然后将它呈现出来.
为了能够执行到这段代码,让goButton和这段代码做一个绑定,当点击goButton时将会把MainPageViewController呈现出来.把下面这句代码添加到addButton()函数中,添加到addSubview之前.
goButton.addTarget(self, action: "goMainPage:", forControlEvents: UIControlEvents.TouchUpInside)
ok,试着运行一遍,滑动到第3个页面,按钮渐渐淡出,点击goButton,可以跳转到新的页面.现在这个页面是空白的,后面一点会为它加上广告栏.
导航页一般是在第一次启动APP时出现,以后启动之后就不会看到引导页了.那么接下来要做的就是判断APP是不是第一次启动,是的话展现引导页,不是的话,直接跳转到主页面.
打开AppDelegate.swift文件,在func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool 函数中添加以下代码.
let firstLuanch = !NSUserDefaults.standardUserDefaults().boolForKey("notFirstLuanch")
if firstLuanch == true {
NSUserDefaults.standardUserDefaults().setBool(true, forKey: "notFirstLuanch")
}
else {
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let mainPageVC = storyboard.instantiateViewControllerWithIdentifier("mainPage")
window?.rootViewController = mainPageVC
}
NSUserDefaults是用来存储一些简单数据的,以键值对的形式保存在程序中.
boolForKey()的作用是通过一个key来获取到与这个key对应的值,而且这个值得类型为Bool类型.
这段代码首先通过"notFirstLuanch"键获取到一个Bool值,因为从来没有给"notFirstLuanch" key赋值过,第一行代码或默认返回false,对它进行取反操作,常量firstLuanch的值就被设置为true了,表明是第一次启动.
接着是一个if语句,第一次启动时将"notFirstLuanch"键对应的值设置为true,那么以后启动时,firstLuanch的值将会是false.
当firstLuanch的值是false时,首先获取到storyboard,再通过storyboard实例化一个MainPageViewController,把它命名为mainPageVC,并让它成为window的根视图控制器(一开始呈现的页面为rootViewController),那么呈现出来的页面将会是后面添加的MainPageViewController.
现在运行下试试,和以前没有什么不同. ok,停掉程序,再次运行,这次可以看到程序直接进入了主界面,跳过了引导页的部分.
把程序从模拟器上删掉,然后重新运行一遍,这次又可以看到引导页了.
引导页部分到现在就完成了,接下来是广告栏部分.
广告栏部分
广告栏在storyboard的配置部分和引导页的部分是类似的,这里就不重复了,下面是配置完的效果图.
MainPageViewController.swift代码文件的内容现在如下所示.
import UIKit
class MainPageViewController: UIViewController, UIScrollViewDelegate {
// 1. 与控件绑定的outlet
@IBOutlet weak var bannerScrollView: UIScrollView!
@IBOutlet weak var pageControl: UIPageControl!
// 2. 指示当前页面变量
var currenrPage = 0
override func viewDidLoad() {
super.viewDidLoad()
configureBanner()
}
// 3. 配置广告栏
func configureBanner() {
let width = self.view.frame.width
let height = width / 32.0 * 13
bannerScrollView.delegate = self
bannerScrollView.contentSize = CGSizeMake(width * 5.0, height)
for i in 1...5 {
let imageView = UIImageView(frame: CGRectMake(width * CGFloat(i - 1), 0, width, height))
imageView.image = UIImage(named: "banner\(i)")
bannerScrollView.addSubview(imageView)
}
}
// 4. 实现UIScrollView的代理方法
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
currenrPage = Int(scrollView.contentOffset.x / self.view.frame.width)
pageControl.currentPage = currenrPage
}
}
前期代码和引导页部分的非常相似,只是多了一个记录当前页面的变量.
接下来要实现的是,广告栏的轮播功能.为此需要一个定时器,来让广告栏以一定的时间间隔播放.
首先在在viewDidLoad()函数的上方定义一个定时器变量
var timer: NSTimer!
在scrollViewDidEndDecelerating代理方法的下方,定义两个函数,一个用来启动定时器,一个用来移除定时器.
func addTimer() {
// 构造一个定时器,每隔3秒调用nextBanner()函数.这个操作会重复执行
timer = NSTimer.scheduledTimerWithTimeInterval(3.0, target: self, selector: "nextBanner", userInfo: nil, repeats: true)
}
func removeTimer() {
// 让定时器不可用
timer.invalidate()
}
接着需要实现播放下一则广告的函数,这个函数会被定时器重复调用.把这个函数添加到最后一个花括号的上方.
func nextBanner() {
if currentPage == 4 {
currentPage = 0
}
else {
currentPage++
}
pageControl.currentPage = currentPage
let offset = CGFloat(currentPage) * self.view.frame.width
bannerScrollView.setContentOffset(CGPoint(x: offset, y: 0), animated: true)
}
ok,在viewDidLoad()函数中调用addTimer()
override func viewDidLoad() {
super.viewDidLoad()
configureBanner()
// 启用定时器
addTimer()
}
运行看下效果吧!!
可以看到广告轮播的效果已经实现了.可是还有一个问题,就是在用户滑动的时候,定时器还在计时,这样可能出现的结果是,当用户滑到上一页时,它又很快的跳到了下一页.因此需要在用户滑动广告栏时,停掉定时器.
再实现UIScrollView的一个代理方法,把这个代理方法添加到scrollViewDidEndDecelerating代理方法的下方.
func scrollViewWillBeginDragging(scrollView: UIScrollView) {
removeTimer()
}
这个代理方法,在用户开始滑动scrollView是被调用,在这个代理方法中让定时器不可用.
那要什么时候恢复定时呢??在用户的手指离开广告栏之后就可以了.接着添加以下代理方法.
func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
addTimer()
}
完整的代码文件如下所示
import UIKit
class MainPageViewController: UIViewController, UIScrollViewDelegate {
// 1. 与控件绑定的outlet
@IBOutlet weak var bannerScrollView: UIScrollView!
@IBOutlet weak var pageControl: UIPageControl!
// 2. 指示当前页面变量
var currentPage = 0
// 5. 定义一个定时器变量
var timer: NSTimer!
override func viewDidLoad() {
super.viewDidLoad()
configureBanner()
addTimer()
}
// 3. 配置广告栏
func configureBanner() {
let width = self.view.frame.width
let height = width / 32.0 * 13
bannerScrollView.delegate = self
bannerScrollView.contentSize = CGSizeMake(width * 5.0, height)
for i in 1...5 {
let imageView = UIImageView(frame: CGRectMake(width * CGFloat(i - 1), 0, width, height))
imageView.image = UIImage(named: "banner\(i)")
bannerScrollView.addSubview(imageView)
}
}
// 4. 实现UIScrollView的代理方法
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
currentPage = Int(scrollView.contentOffset.x / self.view.frame.width)
pageControl.currentPage = currentPage
}
func scrollViewWillBeginDragging(scrollView: UIScrollView) {
removeTimer()
}
func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
addTimer()
}
// 6. 使用定时器实现广告轮播
func addTimer() {
// 构造一个定时器,每隔3秒调用nextBanner()函数.这个操作会重复执行
timer = NSTimer.scheduledTimerWithTimeInterval(3.0, target: self, selector: "nextBanner", userInfo: nil, repeats: true)
}
func removeTimer() {
// 让定时器不可用
timer.invalidate()
}
// 7. 呈现下一个广告
func nextBanner() {
if currentPage == 4 {
currentPage = 0
}
else {
currentPage++
}
pageControl.currentPage = currentPage
let offset = CGFloat(currentPage) * self.view.frame.width
bannerScrollView.setContentOffset(CGPoint(x: offset, y: 0), animated: true)
}
}
