ios制作引导页和广告栏

作者: EgeTart | 来源:发表于2015-08-22 16:29 被阅读4459次

说明：开发环境为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)
      }
}

可以在这里找到demo

网友评论

angelancl:谢谢很详细，希望可以做一个视频的引导页演示
七月喝雪碧:请问下像淘宝头条那样如何实现呢？
EgeTart:@麽布一漾为什么不用UIView来包含头条的内容呢，用两个UIView，设置要显示的内容，用动画把当前的内容和将要出现的内容同时往上移。
七月喝雪碧:我想你可能没懂我说的部分，我指的是自动上下滚动的部分，有点像安卓里走马灯的形式，我理解了你这个demo的原理，但是竖直方向的滚动，我依葫芦画瓢，但图片不显示，
vertialScrollView.contentSize = CGSizeMake(width, height * 3.0)（其中width为scroll的宽度，width＝self.view.frame.width - bannerText.frame.width，height为scroll的高）
然后循环把imageView添加到scroll中
let imageView = UIImageView(frame: CGRectMake(width, height * CGFloat(index-1) + positionY, width, height)) （positionY为scroll离屏幕的数值高度）
感觉是我哪个部分写错了，求指教
EgeTart:@麽布一漾当前头条的下标应该是循环改变的，比如5之后是0，再根据是往左还是往右滑动，下标0可以变为5或者1.
9d135f17e846:很详细,图挂了,能否重新上下图仔细学习一下,谢谢
EgeTart:@swift幼儿园刷新一下，应该有的。
杏仁丶:我的是Xcode6.3，然后编译的时候会出现三个错误，是因为Xcode版本太低了吗
杏仁丶:@EgeTart 好的，谢谢啦
EgeTart:@杏仁丶应该是,你可以试着修改一下代码
杏仁丶:感谢分享！！
codeGlider:不错，写的很细致
EgeTart:@codeGlider 谢谢,=^_^=
十一岁的加重:真详细，话说xCode7用起来还不错
EgeTart:@十一岁的加重嗯嗯,我也是一边学一边记下来。