使用Swift實(shí)現(xiàn)iOScollectionView廣告無(wú)限滾動(dòng)效果(DEMO)
今天公司里的實(shí)習(xí)生跑過(guò)來(lái)問(wèn)我一般App上廣告的無(wú)限滾動(dòng)是怎么實(shí)現(xiàn)的,剛好很久沒(méi)寫博客了,就決定寫下了,盡量幫助那些處于剛學(xué)iOS的程序猿.
做一個(gè)小demo,大概實(shí)現(xiàn)效果如下圖所示:

基本實(shí)現(xiàn)思路:
1. 在你需要放置無(wú)限滾動(dòng)展示數(shù)據(jù)的地方把他的數(shù)據(jù),在原本的基礎(chǔ)上把你要展示的數(shù)據(jù)擴(kuò)大三倍.(當(dāng)然擴(kuò)大兩倍也是可以的,三倍的話,比較好演示)
// MARK: - 設(shè)置數(shù)據(jù)源
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// print(self.arrayM.count)
return self.arrayM.count * 3
}
2.當(dāng)在定時(shí)器的作用下,或者在拖動(dòng)情況存下滾動(dòng)到第八個(gè)時(shí)候,設(shè)置此時(shí)的collectionView.contentOffset.x等于滾動(dòng)到第三個(gè)cell的contentOffset.x

if collectionView.contentOffset.x == CGFloat(3 * self.arrayM.count - 1) * self.collectionView.bounds.width {
self.collectionView.contentOffset.x = CGFloat(self.arrayM.count - 1) * self.collectionView.bounds.width
}
3.當(dāng)拖動(dòng)到第0個(gè)cell時(shí),設(shè)置此時(shí)的collectionView.contentOffset.x等于第六個(gè)cell的contentOffset.x

if collectionView.contentOffset.x == 0 {
self.collectionView.contentOffset.x = CGFloat(2 * self.arrayM.count - 1) * self.collectionView.bounds.width
}
代碼如下:
我在代碼中用到5張照片,所以應(yīng)該一共有15個(gè)cell
import UIKit
class ViewController: UIViewController ,UICollectionViewDataSource, UICollectionViewDelegate {
@IBOutlet weak var collectionView: UICollectionView!
var timer : Timer?
var arrayM : [BOModel] = [] {
didSet {
self.collectionView.reloadData()
}
}
static let CellID = "cell"
override func viewDidLoad() {
super.viewDidLoad()
self.collectionView.dataSource = self
self.collectionView.delegate = self
// 加載數(shù)據(jù)
loadData()
self.collectionView.register(UINib.init(nibName: "BOCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: ViewController.CellID)
//設(shè)置collextionView
setupCollectionView()
// 開(kāi)啟定時(shí)器
starTimer()
}
/// 從polist中加載數(shù)據(jù)
func loadData() {
let stemp: NSArray = NSArray(contentsOfFile: Bundle.main.path(forResource: "shops.plist", ofType: nil)!)!
for dict in stemp {
let model = BOModel.init(dict: dict as! [String : Any])
self.arrayM.append(model)
}
}
/// 設(shè)置cellection的布局方式
///
/// - Returns: 一個(gè)布局類型
func setupCollectionFlowlayout() -> (UICollectionViewFlowLayout) {
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = self.collectionView.bounds.size
flowLayout.minimumLineSpacing = 0
flowLayout.minimumInteritemSpacing = 0
flowLayout.scrollDirection = .horizontal
flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
return flowLayout
}
/// 設(shè)置collectionVIew
func setupCollectionView() -> () {
self.collectionView.collectionViewLayout = self.setupCollectionFlowlayout()
self.collectionView.showsVerticalScrollIndicator = false
self.collectionView.showsHorizontalScrollIndicator = false
self.collectionView.isPagingEnabled = true
}
// MARK: - 設(shè)置數(shù)據(jù)源
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// print(self.arrayM.count)
return self.arrayM.count * 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = self.collectionView.dequeueReusableCell(withReuseIdentifier: ViewController.CellID, for: indexPath) as! BOCollectionViewCell
cell.model = self.arrayM[indexPath.row % self.arrayM.count]
return cell
}
// MARK: - 實(shí)現(xiàn)代理方法
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
//contentOffset.x == 0 時(shí),重新設(shè)置contentOffset.x的值
if collectionView.contentOffset.x == 0 {
self.collectionView.contentOffset.x = CGFloat(2 * self.arrayM.count - 1) * self.collectionView.bounds.width
}
//當(dāng)?shù)竭_(dá)最后一個(gè)cell時(shí),重新設(shè)置contentOffset.x的值
if collectionView.contentOffset.x == CGFloat(3 * self.arrayM.count - 1) * self.collectionView.bounds.width {
self.collectionView.contentOffset.x = CGFloat(self.arrayM.count - 1) * self.collectionView.bounds.width
}
}
/// 開(kāi)啟定時(shí)器
func starTimer () {
let timer = Timer.init(timeInterval: 1, target: self, selector: #selector(ViewController.nextPage), userInfo: nil, repeats: true)
// 這一句代碼涉及到runloop 和 主線程的知識(shí),則在界面上不能執(zhí)行其他的UI操作
RunLoop.main.add(timer, forMode: RunLoopMode.commonModes)
self.timer = timer
}
/// 在1秒后,自動(dòng)跳轉(zhuǎn)到下一頁(yè)
func nextPage() {
// 如果到達(dá)最后一個(gè),則變成第四個(gè)
if collectionView.contentOffset.x == CGFloat(3 * self.arrayM.count - 1) * self.collectionView.bounds.width {
self.collectionView.contentOffset.x = CGFloat(self.arrayM.count - 1) * self.collectionView.bounds.width
}else {
// 每過(guò)一秒,contentOffset.x增加一個(gè)cell的寬度
self.collectionView.contentOffset.x += self.collectionView.bounds.size.width
}
}
/// 當(dāng)collectionView開(kāi)始拖動(dòng)的時(shí)候,取消定時(shí)器
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.timer?.invalidate()
self.timer = nil
}
/// 當(dāng)用戶停止拖動(dòng)的時(shí)候,開(kāi)啟定時(shí)器
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
starTimer()
}
}
plist文件如下圖所示:

用到的字典轉(zhuǎn)模型因?yàn)楸容^簡(jiǎn)單的轉(zhuǎn)換,就自己寫了個(gè):
import UIKit
class BOCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var imageView: UIImageView!
var model : BOModel? {
didSet {
guard let image = UIImage.init(named: (model?.name)!) else {
return
}
self.imageView.image = image
}
}
override func awakeFromNib() {
super.awakeFromNib()
}
}
自定義collectionViewCell類中的內(nèi)容:
import UIKit
class BOCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var imageView: UIImageView!
var model : BOModel? {
didSet {
guard let image = UIImage.init(named: (model?.name)!) else {
return
}
self.imageView.image = image
}
}
override func awakeFromNib() {
super.awakeFromNib()
}
}
附: 其實(shí)這種方法比較實(shí)現(xiàn)無(wú)限滾動(dòng),利用了一點(diǎn)小技巧,用電腦測(cè)試的時(shí)候可能有一點(diǎn)缺陷.
以上所述是小編給大家介紹的使用Swift實(shí)現(xiàn)iOScollectionView廣告無(wú)限滾動(dòng)效果(DEMO),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- IOS上iframe的滾動(dòng)條失效的解決辦法
- iOS實(shí)現(xiàn)滾動(dòng)字幕的動(dòng)畫特效
- IOS中無(wú)限滾動(dòng)Scrollview效果
- iOS利用UIScrollView實(shí)現(xiàn)無(wú)限滾動(dòng)效果
- iOS實(shí)現(xiàn)無(wú)限循環(huán)滾動(dòng)的TableView實(shí)戰(zhàn)教程
- iOS仿網(wǎng)易新聞滾動(dòng)導(dǎo)航條效果
- iOS使用UICollectionView實(shí)現(xiàn)橫向滾動(dòng)照片效果
- iOS中無(wú)限循環(huán)滾動(dòng)簡(jiǎn)單處理實(shí)現(xiàn)原理分析
- iOS仿網(wǎng)易簡(jiǎn)單頭部滾動(dòng)效果
- iOS實(shí)現(xiàn)文字水平無(wú)間斷滾動(dòng)效果
相關(guān)文章
Swift操作Quartz 2D進(jìn)行簡(jiǎn)單的繪圖與坐標(biāo)變換的教程
這篇文章主要介紹了Swift操作Quartz 2D進(jìn)行簡(jiǎn)單的繪圖與坐標(biāo)變換的教程,Quartz 2D是Core Graphics框架中的一個(gè)重要組件,經(jīng)常被Mac OS或和iOS開(kāi)發(fā)者用來(lái)繪圖,需要的朋友可以參考下2016-04-04
Compose聲明式代碼語(yǔ)法對(duì)比React?Flutter?SwiftUI
這篇文章主要為大家介紹了Compose聲明式代碼語(yǔ)法對(duì)比React?Flutter?SwiftUI來(lái)解釋為什么說(shuō)?Compose?的聲明式代碼最簡(jiǎn)潔,有需要的朋友可以借鑒參考下2022-08-08
Swift實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Swift實(shí)現(xiàn)簡(jiǎn)單計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
Swift仿微信語(yǔ)音通話最小化時(shí)后的效果實(shí)例代碼
這篇文章主要介紹了Swift仿微信語(yǔ)音通話最小化時(shí)后的效果的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
openstack重啟swift服務(wù)后報(bào)錯(cuò)問(wèn)題解決方案
這篇文章主要介紹了解決openstack重啟swift服務(wù)后報(bào)錯(cuò),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08

