Swift实现无限轮播效果

从今天开始,我学习的重点开始转向Swift,并且会分享一些自己学习的心得体会,今天给大家带来的的是无限轮播。广告页的无限轮播是非常常见的一个功能,大多数APP都有,大多数程序员也都实现过,今天我们用Swift实现一下。项目地址

图片切换我们可以选择的基本控件有两个UIScrollView 和 UICollectionView,这次我们选择UICollectionView;既然是轮播,就会用到Timer。所以,我们这次主要应用的知识点为UICollectionView 和 Timer;

import UIKit

class CycleScrollView: UIView, UICollectionViewDelegate,UICollectionViewDataSource {

  var bottomView : UICollectionView?
  var width : CGFloat?
  var height : CGFloat?
  var timer : Timer?

  override init(frame: CGRect){

    super.init(frame: frame)
    // 1.设置背景色
    self.backgroundColor = UIColor.clear
    // 2.设置宽高
    width = self.frame.size.width
    height = self.frame.size.height
    // 3.添加bottomView
    setupBottomView()
    // 4.添加定时器
    setupTimer()
  }
  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  func setupBottomView() {

    // 5.设置collectionView的布局
    let flowLayout = UICollectionViewFlowLayout();
    flowLayout.itemSize = self.bounds.size
    flowLayout.minimumLineSpacing = 0;
    flowLayout.minimumInteritemSpacing = 0;
    flowLayout.scrollDirection = UICollectionViewScrollDirection.horizontal;
    bottomView = UICollectionView.init(frame: self.bounds, collectionViewLayout: flowLayout)
    self.addSubview(bottomView!);
    // 6.设置collectionView的尺寸
    bottomView?.contentSize = CGSize(width:width! * CGFloat(4),height:height!)
    // 7.分页
    bottomView?.isPagingEnabled = true
    // 8.去掉滚动条
    bottomView?.showsVerticalScrollIndicator = false
    bottomView?.showsHorizontalScrollIndicator = false
    // 9.设置代理
    bottomView?.delegate = self
    bottomView?.dataSource = self
    // 10.注册cell
    bottomView?.register(UICollectionViewCell().classForCoder, forCellWithReuseIdentifier: "ID");
    if #available(iOS 10.0, *) {
      // 11.预加载
      bottomView?.isPrefetchingEnabled = true
    } else {
      // Fallback on earlier versions
    }
  }
  func setupTimer() {
    // 12.实例化定时器
    timer = Timer.init(timeInterval: 2, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true);
    RunLoop.main.add(timer!, forMode: RunLoopMode.defaultRunLoopMode);

    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 2) {

      self.timer?.fire();
    }
  }
  func timerAction() {

    var contentOffsetX = (self.bottomView?.contentOffset.x)! + self.frame.size.width

    if contentOffsetX > self.frame.size.width * 3 {
      // 当前视图显示的是第三个的时候,设置bottomView的偏移量为0
      self.bottomView?.contentOffset = CGPoint(x:0,y:0)
      contentOffsetX = self.frame.size.width
    }
     self.bottomView?.setContentOffset(CGPoint(x:contentOffsetX,y:0), animated: true)
  }
  // 重写removeFromSuperview方法,用于删除定时器,否则定时器一直存在,浪费内存
  override func removeFromSuperview() {

    timer?.invalidate()
    timer = nil
    super.removeFromSuperview()
  }
  // Mark:UICollectionViewDataSource
  // 设置Itmes
  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    return 4;
  }
  // 设置cell
  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell : UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "ID", for: indexPath)
    for view : UIView in cell.contentView.subviews {

      view.removeFromSuperview()
    }
    let imageView = UIImageView.init(frame: cell.contentView.bounds)
    if indexPath.row < 3 {

      imageView.image = UIImage.init(named: String(indexPath.row))

    } else {
      imageView.image = UIImage.init(named: String(0))
    }
    cell.contentView.addSubview(imageView)

    return cell;
  }
  // Mark:UICollectionViewDelegate
  // 点击方法
  func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

    print("您点击了第 \(indexPath.row == 3 ? 0 : indexPath.row) 个");
  }

}

UICollectionView 和 Timer的用法和OC基本相同。Swift和OC的UI部分应该是一致的,因为底层都是OpenGL。我直接说一下区别:

1.Timer:如果重复,OC是等一个间隔再执行的,Swift是立即执行的,所以我用了GCD延时开启定时器。

2.Swift 没有 CGPointZero。

无限轮播的原理就是在最后面多添加一个和第一个相同的itme。当你滑动到最后一个itme时,把UICollectionView的contentOffset置零,继续向右活动。如果不添加,会给用户一种卡顿的感觉。

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

(0)

相关推荐

  • 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实现无限轮播效果

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

  • android实现banner轮播图无限轮播效果

    本文实例为大家分享了banner轮播图无限轮播效果的具体代码,供大家参考,具体内容如下 效果展示 第一步(权限配置) <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission andr

  • JavaScript实现无限轮播效果

    本文实例为大家分享了JavaScript实现无限轮播效果的具体代码,供大家参考,具体内容如下 效果展示 原理 图片说明原理 轮播顺序:1–>2–>3–>4–>5–>1的副本–>2–>3–>4–>5–>1的副本–>2-一直循环 鼠标进入图片时自动轮播暂停,离开后恢复 资源下载 代码 <!DOCTYPE html> <html lang="en"> <head> <meta char

  • Android仿京东快报无限轮播效果

    我们常用的京东有一个非常好看的效果: 首页的京东快播有一个无限轮播的公告栏,先看效果: 公告内容大概每3s从中间向上滑出,同时下一条内容从底部向上滑动进入.整个过程还伴随有内容的渐变消失,动画效果很流畅. 采用ViewFlipper来实现更为简单. 看看ViewFlipper类官方注释: Simple {@link ViewAnimator} that will animate between two or more views that have been added to it. Only

  • 微信小程序实现文字无限轮播效果

    本文实例为大家分享了微信小程序实现文字无限轮播展示的具体代码,供大家参考,具体内容如下 .JS文件  onLoad中添加下列代码 var self = this; var width = wx.getSystemInfoSync().screenWidth; function carousel_num() { var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 5000, timingFu

  • IOS使用UICollectionView实现无限轮播效果

    一.案例演示 本案例Demo演示的是一个首页轮播的案例,支持手动轮播和自动轮播.知识点主要集中在UICollectionView和NSTimer的使用. 二.知识储备 2.1.UICollectionView横向布局 只需要设置UICollectionViewFlowLayout的scrollDirection为UICollectionViewScrollDirectionHorizontal即可. 2.2.NSTimer的基本使用 NSTimer的初始化: 复制代码 代码如下: + (NSTi

  • Android自定义Banner轮播效果

    本文实例为大家分享了Android自定义Banner轮播效果展示的具体代码,供大家参考,具体内容如下 自定义View布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <andro

  • iOS Swift利用UICollectionView实现无限轮播功能(原理)详解

    前言 作为一个资深(自认为)iOS程序猿,会经常用到轮播图,上一次使用UIScrollView实现无限轮播的效果,这一次在Swift语言中,我使用UICollectionView再为大家讲解一次无限轮播的实现原理. 先上图: UICollectionView-无限轮播.gif 首先需要实现了就是UICollectionView的分页,这个很简单: collectionView.isPagingEnabled = true 接下来就是原理,在UICollectionView的两端需要先添加两张图片

  • Swift实现3D轮播图效果

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

  • JS实现无限轮播无倒退效果

    本文实例为大家分享了JS实现无限轮播无倒退的具体代码,供大家参考,具体内容如下 原理:每次移动前设置transition过渡效果,完成清除过渡效果,然后在到达最后一张图片的时候在清除过渡效果之后translateX(0) 另外需要jq的引用 HTML: <div class="slide-container" view-count="3"> <ul> <li> <img src="images/women/1544

随机推荐