iOS_Swift UIScrollView之App导航页的制作

源码地址:github地址下载,欢迎star~

1、App应用程序在第一次打开的时候,都会出现一个可以滚动的导航页。这些导航页面一般是关于App版本的一些新特性新功能的介绍,是每个App应用程序必不可少的一个部分。

而这种导航页就是通过控件UIScrollView来实现的,下面通过一个Demo(参考了Swiftv课堂视频)让我们熟悉如何使用UIScrollView做一个App的导航页面。


2、步骤如下:

1)加载scrollView视图,同时进行基本的属性设置(详细信息见代码注释)

    func loadScrollView() {
        self.scrollView = UIScrollView(frame: CGRectMake(0,0,self.width,self.height))
        self.scrollView.contentSize = CGSize(width: CGFloat(4) * self.width, height: self.height)
        self.scrollView.pagingEnabled = true
        //bounces默认为true,如果为true在第一页和最后一页还是可以滑动的
        self.scrollView.bounces = false
        //scrollView的水平显示器
        self.scrollView.showsHorizontalScrollIndicator = false
        //设置代理
        self.scrollView.delegate = self
        
        self.view.addSubview(self.scrollView)
        
        for i in 1...4{
            let imageView = UIImageView(image: UIImage(named: "\(i + 1).png"))
            //图片的起点从原点(0,0)开始
            imageView.frame = CGRectMake(CGFloat(i - 1)*self.width, 0, self.width, self.height)
            
            self.scrollView.addSubview(imageView)
        }
        
    }


2)增加pageControl小圆点,配合scrollView滚动视图移动

    func loadPageControl(){
        self.pageControl.center = CGPoint(x: self.width / 2, y: self.height - 30)
        self.pageControl.numberOfPages = 4
        self.pageControl.currentPageIndicatorTintColor = UIColor.redColor()
        self.pageControl.pageIndicatorTintColor = UIColor.yellowColor()
        self.view.addSubview(self.pageControl)
    }


3)最后一个动态button,点击进入主页面

    //#MARK: --UIScrollViewDelegate的代理方法
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        let index = Int(scrollView.contentOffset.x / self.width)
        self.pageControl.currentPage = index
        
        if index == 3{
            self.button.frame = CGRectMake(CGFloat(3) * self.width, self.height, self.width, 50)
            self.button.setTitle("走进Swift", forState: UIControlState.Normal)
            self.button.backgroundColor = UIColor.orangeColor()
            //不显示
            self.button.alpha = 0
            
            self.scrollView.addSubview(self.button)
            //UIView的动画效果
            UIView.animateWithDuration(1.5, delay: 0.5, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
                self.button.alpha = 1
                self.button.frame = CGRectMake(CGFloat(3) * self.width, self.height - 100, self.width, 50)
                }, completion: nil)
            
            self.button.addTarget(self, action: "toMainViewController", forControlEvents: UIControlEvents.TouchUpInside)
        }
    }


4)判断是不是第一次登陆,如果是则出现导航页。否则,直接进入主页面。

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
        if !NSUserDefaults.standardUserDefaults().boolForKey("firstLaunch"){
            NSUserDefaults.standardUserDefaults().setBool(true, forKey: "firstLaunch")
            NSUserDefaults.standardUserDefaults().synchronize()
            self.window?.rootViewController = LeadingViewController()
        }else{
            self.window?.rootViewController = MainViewController()
        }
        self.window?.backgroundColor = UIColor.whiteColor()
        self.window?.makeKeyAndVisible()
        return true
    }


3、最终效果如下:


你可能感兴趣的:(iOS_Swift UIScrollView之App导航页的制作)