制作轮播图

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.效果图

四张图会自动播放


制作轮播图_第1张图片
制作轮播图_第2张图片

你可能感兴趣的:(制作轮播图)