美文网首页
制作轮播图

制作轮播图

作者: Grt婷 | 来源:发表于2016-11-24 08:42 被阅读0次

    1.创建滚动视图(UIScrollView)

    • 声明为全局变量

      var scr :UIScrollView! = nil
      
    • 初始化及其属性设置

      scr = UIScrollView(frame: CGRect(x: 0, y: 100,  width: self.view.frame.size.width, height: 300))
      //设置内容区域大小
      scr.contentSize = CGSize(width:self.view.frame.size.width * 5,height:300)
      //是否整页翻动
      scr.isPagingEnabled=true
      //触壁反弹
      scr.bounces=false
      //添加到主视图
      self.view.addSubview(scr)
      
    • 将图片添加到滚动视图上
      1.百度下载图片,命名为1,2,3,4,5,格式为jpg,拖到工程中
      2.代码实现

          for index in 1...5    {
              //获取图片名字
              let name = "\(index).jpg"
              let image = UIImage(named:name)
              let x = CGFloat(index - 1) *  self.view.frame.size.width
              //初始化UIImageView
              let imageV = UIImageView(frame: CGRect(x:x, y:0, width: self.view.frame.size.width, height: 300.0))
              //为image添加图片
              imageV.image = image
              //添加到滚动视图上
              scr.addSubview(imageV)
              scr.delegate = self // 设置代理
          }
      

    2.创建UIPageControl

    • 声明为全局变量

      var page : UIPageControl! = nil
      
    • 初始化及其属性设置

      //初始化UIPageControl
      page = UIPageControl(frame: CGRect(x: 100, y: 350, width: self.view.frame.size.width-200, height: 30))
         //总共有多少页
         page.numberOfPages = 4
         //当前是多少页
         page.currentPage = 0
         //添加方法
         page.addTarget(self, action: #selector(pageAction(page:)), for: .valueChanged)
         //未选中的滑块颜色
         page.pageIndicatorTintColor=UIColor.white
         //选中的滑块颜色
         page.currentPageIndicatorTintColor=UIColor.black
         //添加到主视图
         self.view.addSubview(page)
      
    • 添加方法

      func pageAction(page:UIPageControl){
           let index = page.currentPage
           let point = CGPoint(x: CGFloat(index) * self.view.frame.size.width, y: 0)
         //修改偏移量
           scr.setContentOffset(point, animated: true)
      }
      

    3.创建Timer

    • 声明为全局变量

      var timer : Timer! = nil
      
    • 初始化

      //每个属性的含义
           //1.间隔时间
           //2.方法的执行对象
           //3.执行的方法
           //4.配置信息,类似备注
           //5.true 循环执行 false 执行一次
      self.timer=Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
      //开启定时器    
      self.timer.fire()
      
    • 添加方法

      func timerAction(){
           //获取到当前的offset
           let offset = self.scr.contentOffset
           let width = self.view.frame.size.width
           //让scrollerView进行滑动
           scr.setContentOffset(CGPoint(x:offset.x + width,y:offset.y) , animated: true)
         //if 到第四个了,跳动到第一个
           if scr.contentOffset.x >= width * 4 {
               let point = CGPoint(x: 0, y: 0)//第一个是0,0
               scr.contentOffset = point
           }
       }
      
      

    4.添加滑动会执行的方法

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
         //获取偏移量
         let x = scr.contentOffset.x
         let width = self.view.frame.size.width
         //根据偏移量定位到第几个点
         if (x >= width * 4){
             self.page.currentPage = 0
         }else{
          page.currentPage = Int(x / width)
         }
    }
    

    5.添加开始拖拽、结束拖拽方法

    //开始拖拽
     func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
         self.timer.invalidate()
         self.timer = nil
     }
     //结束拖拽
     func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
          self.timer=Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
         // 一秒之后再执行
         let time =  DispatchTime.now() + 1.0
         DispatchQueue.main.asyncAfter(deadline:time){
             if let _ = self.timer {
              self.timer.fire()
             }
         }
        
     }
    
    

    6.效果图

    四张图会自动播放


    相关文章

      网友评论

          本文标题:制作轮播图

          本文链接:https://www.haomeiwen.com/subject/ibkbpttx.html