IOS控件学习之UI ScrollView（7）

喜欢ヅ旅行 2022-07-29 08:48 171阅读 0赞

## 1、语言：swift ##

## 2、实现内容：图片轮播（把之前的总结下） ##

## 3、效果图： ##

![Center][]

## 4、控件列表（见下图）： ##

![Center 1][]

## 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 开始的。

[Center]: /images/20220728/c4a446a506344d28b9abcaf0ea4edef3.png
[Center 1]: /images/20220728/a02872d09c70450eb0b3753978bb9157.png