swift实现自动轮播图效果(UIScrollView+UIPageControl+Timer)

本文实例为大家分享了swift实现自动轮播图效果的具体代码,供大家参考,具体内容如下

比较简单,原理就不说了,这里只做记录:

代码如下:

1、准备

var pageControl:UIPageControl?
  var myscrollView:UIScrollView?
  var myTimer:Timer?
  var mycurrentPage:NSInteger?

  var courses = [
    ["name":"first","pic":"1.jpeg"],
    ["name":"second","pic":"2.jpeg"],
    ["name":"third","pic":"3.jpeg"]
  ]

2、内容的添加

 //添加scrollview
    self.addScrollView()
    //添加图片
    self.addImages()
    //添加pagecontrol
    self.addPageControl()

    mycurrentPage = 1

    //添加定时器
    self.setupTimer()

具体方法:

func addScrollView(){
    self.myscrollView = UIScrollView()
    self.myscrollView?.frame = CGRect(x:0,y:0,width:kScreenWidth,height:kScreenHeight/2)
    self.myscrollView?.contentSize = CGSize(width:kScreenWidth*3,height:kScreenHeight/2)
    self.myscrollView?.showsHorizontalScrollIndicator = false
    self.myscrollView?.showsVerticalScrollIndicator = false
    self.myscrollView?.scrollsToTop = false
    self.myscrollView?.delegate = self
    self.myscrollView?.isPagingEnabled = true
    self.view.addSubview(self.myscrollView!)

  }

  func addImages(){
    let size = self.myscrollView?.bounds.size
    for (seq,course) in courses.enumerated() {
      let page = UIView(frame:CGRect(x:0,y:64,width:kScreenWidth,height:kScreenHeight/2))
      let imageView=UIImageView(image:UIImage(named:course["pic"]!))
      imageView.frame = page.frame
      page.addSubview(imageView)
      page.backgroundColor = UIColor.gray
      let lab1 = UILabel(frame:CGRect(x:15,y:kScreenHeight/2-100,width:kScreenWidth-30,height:40))
      lab1.textAlignment = .center
      lab1.backgroundColor = UIColor.red
      lab1.text = course["name"]
      page.addSubview(lab1)

      page.frame = CGRect(x:CGFloat(seq)*(size?.width)!,y:0,width:(size?.width)!,height:(size?.height)!)
      self.myscrollView?.addSubview(page)

    }
  }

  func addPageControl(){
    self.pageControl = UIPageControl(frame:CGRect(x:kScreenWidth/2-50/2,y:kScreenHeight/2-40,width:50,height:35))
    self.pageControl?.backgroundColor = UIColor.blue
    self.pageControl?.numberOfPages = courses.count
    self.view.addSubview(self.pageControl!)
  }

  func setupTimer() {
    self.myTimer = Timer.init(timeInterval: 2.0, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
    RunLoop.main.add(self.myTimer!, forMode: RunLoopMode.defaultRunLoopMode)

//    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 2) {
//      self.myTimer?.fire()
//    }

  }

  func closeTimer(){
    self.myTimer?.invalidate()
    self.myTimer = nil
  }

  func timerAction(){
    self.pageControl?.currentPage += mycurrentPage!

    if self.pageControl?.currentPage == 0 || self.pageControl?.currentPage == 2 {
      mycurrentPage = -mycurrentPage!
    }
    self.myscrollView?.contentOffset = CGPoint(x:CGFloat(kScreenWidth)*CGFloat((pageControl?.currentPage)!),y:0)
  }

3、一些代理方法的实现,手动拖动的时候,销毁定时器,节省内存

internal func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    let page = Int(scrollView.contentOffset.x/scrollView.frame.size.width)
    self.pageControl?.currentPage = page

  }

  func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
    self.closeTimer()
  }

  func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    self.setupTimer()
  }

  func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
    self.pageControl?.currentPage = Int(scrollView.contentOffset.x/kScreenWidth)
  }

效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Swift实现无限轮播效果

    从今天开始,我学习的重点开始转向Swift,并且会分享一些自己学习的心得体会,今天给大家带来的的是无限轮播.广告页的无限轮播是非常常见的一个功能,大多数APP都有,大多数程序员也都实现过,今天我们用Swift实现一下.项目地址 图片切换我们可以选择的基本控件有两个UIScrollView 和 UICollectionView,这次我们选择UICollectionView:既然是轮播,就会用到Timer.所以,我们这次主要应用的知识点为UICollectionView 和 Timer: impor

  • swift实现自动轮播图效果(UIScrollView+UIPageControl+Timer)

    本文实例为大家分享了swift实现自动轮播图效果的具体代码,供大家参考,具体内容如下 比较简单,原理就不说了,这里只做记录: 代码如下: 1.准备 var pageControl:UIPageControl? var myscrollView:UIScrollView? var myTimer:Timer? var mycurrentPage:NSInteger? var courses = [ ["name":"first","pic":&qu

  • Swift实现3D轮播图效果

    本文实例为大家分享了Swift实现3D轮播图效果的具体代码,供大家参考,具体内容如下 整天逛淘宝,偶尔有一天看到其中的展示页有个看起来很炫的效果,闲来无事就试着写一个出来,先来看效果: 简单记一下思路,这里我选择使用UICollectionView控件,先根据其复用和滚动的特性做出无限轮播的效果,关键代码: //数据源数组 let totalCount = 100 var models: [String] = [String]() { didSet { //判断元素个数 if models.co

  • JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

    1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&

  • android常见手动和自动轮播图效果

    本文实例为大家分享了android手动和自动轮播图效果的具体代码,供大家参考,具体内容如下 1.准备好需要的轮播图片,图片标题(初始化,声明). /**轮播图片*/ private int[] imageIds=new int[]{ R.drawable.ic_launcher, R.drawable.simple_player_control_focused_holo, R.drawable.dot_player1_1, R.drawable.jt5, }; /**轮播图片的标题*/ priv

  • 原生JS实现手动轮播图效果实例代码

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一种轮播方式,既能左右翻页,还能通过悬浮按钮,快速预览图片,所以今天就给大家写一个原生js手动轮播图. 一,利用JavaScript制作手动轮播图,首先排版. 引入默认样式表(可以手写): <link rel="stylesheet" href="css/Default st

  • Android实现自动轮播图效果

    本文实例为大家分享了Android实现轮播图效果展示的具体代码,供大家参考,具体内容如下 MainActivity.java public class MainActivity extends AppCompatActivity { private LinearLayout ll_dots; private TextView viewpager_tv; // 将ViewPager定义为全局变量,方便使用. private ViewPager viewpager_vp; // 建立一个ArrayL

  • jquery实现简单自动轮播图效果

    本文实例为大家分享了jquery实现简单自动轮播图的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="author" content="Jxz"> <title></title> <scri

  • iOS实现带有缩放效果的自动轮播图

    本文实例为大家分享了iOS带有缩放效果的自动轮播图,供大家参考,具体内容如下 可直接设置frame然后加载到视图上使用. 效果就是这样的,图片切换的过程中还是有卡顿,不够流畅,后续更新. 直接上代码. .h文件包含: #import <UIKit/UIKit.h> @interface CustomScrollView : UIView @property (strong,nonatomic) NSArray *imageArr; @end .m文件包含: #import "Cust

  • iOS使用UIScrollView实现无限循环轮播图效果

    本文实例为大家分享了iOS使用UIScrollView实现无限循环轮播图的具体代码,供大家参考,具体内容如下 代码: // // ViewController.m // 无限轮播 // // Created by limin on 17/8/23. // Copyright © 2017年 none. All rights reserved. // #import "ViewController.h" @interface ViewController ()<UIScrollVi

  • iOS简单实现轮播图效果

    本文实例为大家分享了iOS简单实现轮播图效果的具体代码,供大家参考,具体内容如下 平常在开发过程中,首页的轮播图总是少不了,轮播图我们都知道肯定是要使用 UIScrollView ,难点就在最后一张图片被滑动时,如何回到第一张图片以及第一张滑动到最后一张.我们可以使用如下方式实现轮播图,在划到3后面的1后,设置 contentOffset 回到最先的1,并设置 pageControl ,即可达到效果 (从1划到3也同理) 看一下效果: 完成这种轮播图,我们的 View 需要如下的属性和方法 @i

随机推荐