iOSSwift利用UICollectionView實(shí)現(xiàn)無(wú)限輪播功能(原理)詳解

前言

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的駐馬店網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!

作為一個(gè)資深(自認(rèn)為)iOS程序猿,會(huì)經(jīng)常用到輪播圖,上一次使用UIScrollView實(shí)現(xiàn)無(wú)限輪播的效果,這一次在Swift語(yǔ)言中,我使用UICollectionView再為大家講解一次無(wú)限輪播的實(shí)現(xiàn)原理。

先上圖:

iOS Swift利用UICollectionView實(shí)現(xiàn)無(wú)限輪播功能(原理)詳解
UICollectionView-無(wú)限輪播.gif

首先需要實(shí)現(xiàn)了就是UICollectionView的分頁(yè),這個(gè)很簡(jiǎn)單:

collectionView.isPagingEnabled = true

接下來(lái)就是原理,在UICollectionView的兩端需要先添加兩張圖片,首段需要添加最后一張圖片,而尾端需要添加第一張圖片,然后在中間的位置上一次添加各個(gè)圖片。這個(gè)其實(shí)是很容易實(shí)現(xiàn)的:

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCollectionViewCell", for: indexPath) as! ImageCollectionViewCell
 
 /// 給圖片賦值(在首尾分別添加兩張圖片)
 if (indexPath.row == 0) {
  cell.imageName = imageNameList.last
 } else if (indexPath.row == self.imageNameList.count + 1) {
  cell.imageName = imageNameList.first
 } else {
  cell.imageName = imageNameList[indexPath.row - 1]
 }
 
 return cell
 }

這樣在滑動(dòng)的時(shí)候,通過(guò)偏移量就可以實(shí)現(xiàn)無(wú)限輪播的效果了。當(dāng)滑動(dòng)停止時(shí)判斷偏移量,當(dāng)偏移量為0時(shí)(視圖上顯示的是最后一張圖片),這時(shí)候就直接調(diào)動(dòng)調(diào)整偏移量的方法,把UICollectionView偏移到最后一張圖片的位置?;瑒?dòng)到尾端時(shí)是同理。

 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
 /// 當(dāng)UIScrollView滑動(dòng)到第一位停止時(shí),將UIScrollView的偏移位置改變
 if (scrollView.contentOffset.x == 0) {
  scrollView.contentOffset = CGPoint(x: CGFloat(self.imageNameList.count) * kScreenWidth,y: 0)
  self.pageControl.currentPage = self.imageNameList.count
  /// 當(dāng)UIScrollView滑動(dòng)到最后一位停止時(shí),將UIScrollView的偏移位置改變
 } else if (scrollView.contentOffset.x == CGFloat(self.imageNameList.count + 1) * kScreenWidth) {
  scrollView.contentOffset = CGPoint(x: kScreenWidth,y: 0)
  self.pageControl.currentPage = 0
 } else {
  self.pageControl.currentPage = Int(scrollView.contentOffset.x / kScreenWidth) - 1
 }
 }

其實(shí)原理很簡(jiǎn)單,個(gè)人認(rèn)為使用UICollectionView實(shí)現(xiàn)無(wú)限輪播比起UIScrollView更加實(shí)用并且便于維護(hù),接下來(lái)我將代碼全部列一下:

import UIKit

let kScreenWidth = UIScreen.main.bounds.width

class ViewController: UIViewController {
 
 lazy var collectionView: UICollectionView = {
 let flowLayout = UICollectionViewFlowLayout()
 flowLayout.minimumLineSpacing = 0
 flowLayout.minimumInteritemSpacing = 0
 flowLayout.scrollDirection = .horizontal
 flowLayout.itemSize = CGSize(width: kScreenWidth, height: 200)
 
 let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 200), collectionViewLayout: flowLayout)
 
 collectionView.isPagingEnabled = true
 collectionView.showsHorizontalScrollIndicator = false
 collectionView.backgroundColor = UIColor.white
 collectionView.delegate = self
 collectionView.dataSource = self
 self.view.addSubview(collectionView)
 
 return collectionView
 }()
 
 lazy var pageControl: UIPageControl = {
 let pageControl = UIPageControl(frame: CGRect(x: 0, y: 150, width: kScreenWidth, height: 50))
 
 pageControl.numberOfPages = self.imageNameList.count
 pageControl.currentPage = 0
 
 pageControl.tintColor = UIColor.black
 pageControl.pageIndicatorTintColor = UIColor.gray;
 
 return pageControl;
 }()
 
 lazy var imageNameList: [String] = {
 let imageList = ["image0", "image1", "image2", "image3"]
 
 return imageList
 }()

 override func viewDidLoad() {
 super.viewDidLoad()
 
 setupController()
 }
 
 func setupController() {
 /// 設(shè)置數(shù)據(jù)
 collectionView.register(ImageCollectionViewCell.self, forCellWithReuseIdentifier: "ImageCollectionViewCell")
 
 collectionView.reloadData()
 collectionView.scrollToItem(at: IndexPath(row: 1, section: 0), at: .left, animated: false)
 
 self.view.addSubview(pageControl)
 }

}

extension ViewController: UICollectionViewDataSource {
 
 func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
 /// 這步只是防止崩潰
 if (imageNameList.count == 0) {
  return 0
 }
 return imageNameList.count + 2
 }
 
 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCollectionViewCell", for: indexPath) as! ImageCollectionViewCell
 
 /// 給圖片賦值(在首尾分別添加兩張圖片)
 if (indexPath.row == 0) {
  cell.imageName = imageNameList.last
 } else if (indexPath.row == self.imageNameList.count + 1) {
  cell.imageName = imageNameList.first
 } else {
  cell.imageName = imageNameList[indexPath.row - 1]
 }
 
 return cell
 }
 
}

extension ViewController: UICollectionViewDelegate {
 
 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
 /// 當(dāng)UIScrollView滑動(dòng)到第一位停止時(shí),將UIScrollView的偏移位置改變
 if (scrollView.contentOffset.x == 0) {
  scrollView.contentOffset = CGPoint(x: CGFloat(self.imageNameList.count) * kScreenWidth,y: 0)
  self.pageControl.currentPage = self.imageNameList.count
  /// 當(dāng)UIScrollView滑動(dòng)到最后一位停止時(shí),將UIScrollView的偏移位置改變
 } else if (scrollView.contentOffset.x == CGFloat(self.imageNameList.count + 1) * kScreenWidth) {
  scrollView.contentOffset = CGPoint(x: kScreenWidth,y: 0)
  self.pageControl.currentPage = 0
 } else {
  self.pageControl.currentPage = Int(scrollView.contentOffset.x / kScreenWidth) - 1
 }
 }
 
}

/// collectionView圖片的cell
class ImageCollectionViewCell: UICollectionViewCell {
 
 /// 顯示的圖片
 let imageView = UIImageView()
 var imageName: String? = "" {
 didSet {
  if let name = imageName {
  imageView.image = UIImage(named: name)
  }
 }
 }
 
 override init(frame: CGRect) {
 super.init(frame: frame)
 
 setupCell();
 }
 
 /// 初始化視圖
 func setupCell() {
 imageView.frame = self.bounds
 contentView.addSubview(imageView)
 }
 
 required init?(coder aDecoder: NSCoder) {
 fatalError("init(coder:) has not been implemented")
 } 
}

ok,喜歡的話可以點(diǎn)一下收藏哈,用UIScrollView實(shí)現(xiàn)輪播的原理在:https://www.jb51.net/article/148185.htm,大家需要的話也可以了解一下。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

文章題目:iOSSwift利用UICollectionView實(shí)現(xiàn)無(wú)限輪播功能(原理)詳解
文章鏈接:http://bm7419.com/article10/gosjgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、商城網(wǎng)站微信公眾號(hào)、外貿(mào)建站電子商務(wù)、企業(yè)網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)