图片轮播器(swift)

简介: 如何实现一个无限循环,无缝衔接的图片轮播器 自己实现一次以后就不用使用轮播器的框架了能用代码解决的问题就不在这里瞎BB了  O(∩_∩)O首先先在Carousel文件件夹创建以下几个文件CarouselFlowLayout.

如何实现一个无限循环,无缝衔接的图片轮播器 自己实现一次以后就不用使用轮播器的框架了

能用代码解决的问题就不在这里瞎BB了  O(∩_∩)O

首先先在Carousel文件件夹创建以下几个文件

CarouselFlowLayout.swift

CarouselView.swift

CarouselView.xib

CarsouselCell.swift

CarsouselCell.xib

Extension.swift

//CarouselFlowLayout.swift

import UIKit

class CarouselFlowLayout: UICollectionViewFlowLayout {

override func prepare() {

super.prepare()

itemSize = collectionView?.bounds.size ?? CGSize.zero

scrollDirection = .horizontal

minimumLineSpacing = 0

minimumInteritemSpacing = 0

collectionView?.isPagingEnabled = true

collectionView?.showsVerticalScrollIndicator = false

collectionView?.showsHorizontalScrollIndicator = false

}

}

//  CarouselView.swift

//CarouselView.xib


img_67085e78dd18c08fe664d0aaf1243dd2.png

import UIKit

private let kCellID = "CarsouselCellID"

private let kMultiple = 10000

/// 图片轮播器

public class CarouselView: UIView {

/// collectionView

@IBOutlet var collectionView: UICollectionView!

/// 页码指示器

@IBOutlet var pageControl: UIPageControl!

/// 图片地址集合

public var imageURLList: [String]? {

didSet {

collectionView.reloadData()

pageControl.numberOfPages = imageURLList?.count ?? 0

}

}

/// 定时器

var timer: Timer?

public override func awakeFromNib() {

super.awakeFromNib()

// 注册Cell

collectionView.register(UINib(nibName: "CarsouselCell", bundle: Bundle(for: CarsouselCell.self)), forCellWithReuseIdentifier: kCellID)

// 设置数据源

collectionView.dataSource = self

// 设置代理

collectionView.delegate = self

pageControl.hidesForSinglePage = true

}

public override func layoutSubviews() {

super.layoutSubviews()

collectionView.scrollToItem(at: IndexPath(item: (imageURLList?.count ?? 0) * Int(Float(kMultiple) * 0.5), section: 0), at: .left, animated: false)

}

}

// MARK: - 公共方法

extension CarouselView {

/// 获取图片轮播器

///

/// - returns: 图片轮播器对象

public static func carouselView() -> CarouselView{

return Bundle(for: CarouselView.self).loadNibNamed("CarouselView", owner: nil, options: nil)?.first as! CarouselView

}

/// 开始自动滚动

public func start() {

end()

timer = Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(doTask), userInfo: nil, repeats: true)

RunLoop.main.add(timer!, forMode: .commonModes)

}

/// 停止自动滚动

public func end() {

timer?.invalidate()

timer = nil

}

@objc private func doTask() {

var contentOffset = collectionView.contentOffset

contentOffset.x += collectionView.frame.width

collectionView.setContentOffset(contentOffset, animated: true)

}

}

// MARK: - UICollectionViewDataSource

extension CarouselView: UICollectionViewDataSource {

public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

return (imageURLList?.count ?? 0) * kMultiple

}

public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kCellID, for: indexPath) as! CarsouselCell

cell.imageURL = imageURLList?[indexPath.item % (imageURLList?.count ?? 1)]

return cell

}

}

// MARK: - UICollectionViewDelegate

extension CarouselView: UICollectionViewDelegate {

public func scrollViewDidScroll(_ scrollView: UIScrollView) {

let offsetPage = scrollView.contentOffset.x / scrollView.bounds.width

let currentIndex = Int(round(offsetPage))

pageControl.currentPage = currentIndex % (imageURLList?.count ?? 1)

}

public func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {

end()

}

public func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {

start()

}

}

//  CarsouselCell.swift

//CarsouselCell.xib


img_bbb9ebefddbf934d8d563afa0bc597b7.png

import UIKit

class CarsouselCell: UICollectionViewCell {

/// 图片区域

@IBOutlet var imageView: UIImageView!

var imageURL: String? {

didSet{

imageView.sd_setImage(path: imageURL)

}

}

}

//  Extension.swift


import UIKit

import SDWebImage

extension UIImageView {

public func sd_setImage(path: String?) {

guard let noNullPath = path as? NSString else { return }

guard let newPath = noNullPath.addingPercentEncoding(withAllowedCharacters: .urlFragmentAllowed) else { return }

self.sd_setImage(with: URL(string: newPath))

}

}

到此图片轮播器的代码已经over了

在项目中如何使用呢?

//  ViewController.swift

//  Carousel


import UIKit

import Carousel

class ViewController: UIViewController {

lazy var cv: CarouselView = CarouselView.carouselView()

override func viewDidLoad() {

super.viewDidLoad()

cv.frame = CGRect(x: 0, y: 100, width: UIScreen.main.bounds.width, height: 150)

cv.imageURLList = ["http://www.17sucai.com/preview/569922/2016-06-30/轮播/images/3.jpg", "http://www.17sucai.com/preview/569922/2016-06-30/轮播/images/1.jpg"]

view.addSubview(cv)

}

override func viewWillAppear(_ animated: Bool) {

super.viewWillAppear(animated)

cv.start()

}    

}


目录
相关文章
|
Swift
swift之图片浏览器
swift之图片浏览器
405 0
swift之图片浏览器
|
存储 Swift
Swift - Cell自适应+代码约束(SnapKit)横竖屏支持平铺+根据URL获取图片size
Swift - Cell自适应+代码约束(SnapKit)横竖屏支持平铺+根据URL获取图片size
226 0
|
Swift
Swift - 根据图片URL获取图片的大小
Swift - 根据图片URL获取图片的大小
564 0
|
缓存 Swift iOS开发
iOS开发swift版异步加载网络图片(带缓存和缺省图片)
iOS开发swift版异步加载网络图片(带缓存和缺省图片)
491 0
|
iOS开发 Swift
Swift学习笔记(4)使用UIImagePickerController实现从设备图片库和照相机获取图片
Swift学习笔记(4)使用UIImagePickerController实现从设备图片库和照相机获取图片 设备图片库和照相机是图像的两个重要来源,使用UIKit中提供的图像选择器UIImagePickerController可以轻易地实现从设备图片库和照相机获取图片。 目录 Swift学习笔记4使用UIImagePickerController实现从设备
4310 0
|
索引
SWIFT用ScrollView加图片制作Banner
网上参考OBJC写的用ScrollView图片轮播效果,照着画了个,先上效果图: 附上代码: 1 @IBOutlet weak var pc: UIPageControl! 2 @IBOutlet weak var sv:UIScrollView! 3 4...
798 0
|
Swift
swift UIImage加载远程图片和圆角矩形
  原文地址:http://www.cnblogs.com/sxlfybb/p/3791973.html UIImage这个对象是swift中的图像类,可以使用UIImageView加载显示到View上。
1371 0
|
存储 Swift
Swift Core Data 图片存储与读取Demo
实体的模型定义: 实体的class定义: @objc(ImageEntity) class ImageEntity: NSManagedObject { @NSManaged...
1049 0
|
Swift
swift UI专项训练36 ImageVi图片边框阴影
    ImageView是我们经常用到的组件,但是我们发现storyboard中图片的属性编辑器中没有对于图片边框的设计。
960 0