IOS控件学习之UI ScrollView(7)

1、语言:swift

2、实现内容:图片轮播(把之前的总结下)

3、效果图:

IOS控件学习之UI ScrollView(7)_第1张图片

4、控件列表(见下图):

IOS控件学习之UI ScrollView(7)_第2张图片

5、注意

     pageControl控件不能直接拖到scrollView控件中。从上图左边的结构中可以看出,pageControl控件与scrollView控件是在同一个级下。

     我的方法是:将pageControl控件拖到ScrollView控件同一级下,通过调整其坐标和大小设置到ScrollView控件上。

6、图片轮播源码示例:

import UIKit

class ViewController: UIViewController,UIScrollViewDelegate {
    /// 控件关联
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var pageControl: UIPageControl!
    var imageView:UIImageView!;
    
    /// 定时器
    var timer:NSTimer?;
  
  ///  var flag:Bool! = false;
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
       
        //===========  scrollView属性设置    =============//
        ///创建
        addSubImageViewInScrollView();
        
        /// 设置滚动属性,宽度为 5个图片的总宽度 之和. 高度,我的素材是80X80的,高度= 80
        scrollView.contentSize = CGSizeMake(5 * scrollView.frame.size.width, 80);
        
        /// 设置以页单位滚动
        scrollView.pagingEnabled = true;
        
        /// 隐藏横向滚动条
        scrollView.showsHorizontalScrollIndicator = false;
        
        //===========  pageControl属性设置    =============//
        /// 设置默认显示的是第0页
        pageControl.currentPage = 0;
        
        /// 设置pagecontrol的总页数(这里,我只准备了5张图)
        pageControl.numberOfPages = 5;
        
        
        /// 创建定时器
        createTimer();
    }
    
    /// 创建一个定时器
    func createTimer()
    {
        /// 创建一个定时器,创建好后,自动启动
       timer = NSTimer.scheduledTimerWithTimeInterval(1.0, target: self, selector: "scrollImage", userInfo: nil, repeats: true);
        
    }

    /// timer执行代码,定时器中指定,每秒滚动一次图片
    func scrollImage()
    {
        /// 如何让UIScrollView滚动到下一页
        
        /// 1、获取当前的UIPageControl 的页码
        var curPage = pageControl.currentPage;
        
        /// 2、判断是否到了最后一页? 若到了最后一页,回到第一页,若没有,则在当前页码上+1
        if (pageControl.numberOfPages - 1 == curPage)
        {
            curPage = 0
        }
        else
        {
            curPage++;
        }
//        /// 正向滚动
//        if (false == flag)
//        {
//            if (pageControl.numberOfPages - 1 == curPage)
//            {
//                curPage -= 1;
//               /// print("当前是反向第\(curPage)页")
//                flag = true;
//            }
//            else
//            {
//                curPage += 1;
//              ///  print("当前是正向第\(curPage)页");
//                flag = false;
//            }
//        }
//        if (true == flag)    /// 反向滚动
//        {
//            if (0 == curPage)
//            {
//                curPage += 1;
//               /// print("当前是正向第\(curPage)页")
//                flag = false;
//            }
//            else
//            {
//                curPage -= 1;
//              ///  print("当前是反向第\(curPage)页")
//                flag = true;
//            }
//        }
      

        
        /// 3、每页的宽度 X (页码+1) == 计算出了下一页的contentOffset.X
        let offsetX = CGFloat(curPage) * scrollView.frame.size.width;
        
        /// 4、重新设置 contentOffset的值
        scrollView.setContentOffset(CGPointMake(offsetX, 0), animated: true);
    }
    
    /// 创建5 * imageview
    func addSubImageViewInScrollView()
    {
        for i in 0 ..< 5
        {
            imageView = UIImageView(frame: CGRectMake(CGFloat(i * 80), 0, scrollView.frame.size.width, scrollView.frame.size.height));
            
            /// 我准备的素材的图片名字是从2开始的
            imageView.image = UIImage(named: "\(Int(i + 2)).png");
            
            /// 把imageview添加到scrollview中
            scrollView.addSubview(imageView);
        }
    }
    
    
    /// 即将滚动
    func scrollViewWillBeginDragging(scrollView: UIScrollView)
    {
        timer = nil;
    }
    
    /// 开始滚动,获取当前滚动到哪一页了
    func scrollViewDidScroll(scrollView: UIScrollView)
    {
        /* 计算公式为:x 方向上的偏移除以每张拖片的大小,商就是当前滚动到哪一页了。
        */
        let curPage = scrollView.contentOffset.x / scrollView.frame.size.width;
        
        /// 设置页码给pageControl
        pageControl.currentPage = Int(curPage);
    }
  
    
    /// 滚动结束
    func scrollViewDidEndDecelerating(scrollView: UIScrollView)
    {
        createTimer();
    }
    
    
    
    

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}<span style="font-size:12px;color:#3333ff;">
</span>

7、说明

    A、事先准备好数张图片,大小最好是一样的嘛----美观

    B、我准备的素材名称是从2开始的,所以在代码中才会有:

/// 我准备的素材的图片名字是从2开始的
            imageView.image = UIImage(named: "\(Int(i + 2)).png");
    C、 pageControl. currentPage 默认是从 0 开始的。

你可能感兴趣的:(图片轮播,uiscrollview)