Swift之無限迴圈控制項開發

無限迴圈控制項是乙個常常用到的乙個控制項，尤其是一些廣告或者應用內容公告通知，或者新聞滾動的設計，都是必備的。這種控制項網上也有很多，也有很多可以自定義的版本，功能非常強大。但對於我們開發者來說，在具體的應用上風格和樣式都是比較統一的，一般只需要自己特定的一種風格或樣式即可，引入第三方顯然有點大材小用。那麼我們怎麼能簡單而且又快速的造乙個無限迴圈的控制項呢，只要我們知道無限迴圈的原理，那麼我們就很自由的按照需求快速的完成。今天我們就講講這個『造輪』過程。

首先我們簡單分析一下無限迴圈的原理。乙個控制項的自帶滾動有uiscrollview、uicollectionview、uitableview。我們就選這個代表性的控制項來講------uicollectionview。他是乙個橫向和縱向都可以高度定製的乙個控制項，而且也遵循cell重用機制。

第一步，資料倍數增加，一般為3倍，我們只顯示中間那些資料即可，我們向左滑動的時候，滑到中間資料的最後一條資料的時候繼續滑動的時候要瞬間換成中間的第一條資料。如果向右滑動的時候，如果當前是第一條資料那麼就瞬間移到中間的最後一條資料上。這樣看起來就是無限迴圈了。一圖勝千言，有圖為證。

滑動原理很簡單，那麼我怎麼來用**實現呢。下面就使用**來實現這個控制項。

測試環境：xcode版本： version 11.5 (11e608c) mac 系統：10.15.4 (19e266)

我們先建立乙個工程命名為：infiniteloopdemo，然後我們在建立乙個infiniteloopcontentview檢視。**如下：

import uikit
protocol infiniteloopcontentviewdelegate: nsobjectprotocol 
extension infiniteloopcontentviewdelegate 
}class infiniteloopcontentview: uicollectionview 
weak var infinitedelegate: infiniteloopcontentviewdelegate!
private var percount = 0;
private var isautoscroll = false;
private let rundiration: double = 3.2;
weak fileprivate var pagecontrol: uipagecontrol!
var begintimer = true 
}private var width: cgfloat 
private var height: cgfloat 
private func runtimer() -> void else 
}@objc func runtimeraction() -> void 
let offsetx = contentoffset.x;
guard let indexpath = indexpathforitem(at: .init(x: offsetx + width/2, y: height/2)) else
isautoscroll = true;
var next = indexpath.row + 1;
if next >= (percount * 3 - 1) ) 
}else
perform(#selector(runtimeraction), with: nil, afterdelay: rundiration);
}override init(frame: cgrect, collectionviewlayout layout: uicollectionviewlayout) 
showshorizontalscrollindicator = false;
showsverticalscrollindicator = false;
ispagingenabled = true;
delegate = self;
datasource = self;
backgroundcolor = uicolor.systembackground;
runtimer();
}deinit 
required init?(coder: nscoder) 
override func layoutsubviews() 
if contentsize.width < self.width 
let contentoffset = self.contentoffset;
if contentoffset.x >= (percontentsize * 2) else if contentoffset.x < percontentsize 
pagecontrol?.currentpage = int((contentoffset.x + width/2) / width) % percount;
}}extension infiniteloopcontentview: uicollectionviewdelegateflowlayout,uicollectionviewdatasource
return percount * 3;
}func collectionview(_ collectionview: uicollectionview, layout collectionviewlayout: uicollectionviewlayout, sizeforitemat indexpath: indexpath) -> cgsize 
func collectionview(_ collectionview: uicollectionview, cellforitemat indexpath: indexpath) -> uicollectionviewcell 
func collectionview(_ collectionview: uicollectionview, didselectitemat indexpath: indexpath) 
}extension infiniteloopcontentview 
func scrollviewdidenddecelerating(_ scrollview: uiscrollview) 
func scrollviewdidenddragging(_ scrollview: uiscrollview, willdecelerate decelerate: bool) 
}func scrollviewdidendscrollinganimation(_ scrollview: uiscrollview) 
}

這個是迴圈的主要**，這裡需要注意一下如果只有一條資料是禁止迴圈的。如果需要一張迴圈，自己可以實現以下。

使用的方法和uicollectionview一樣，我們來看具體使用方式：

import uikit
class mainviewcontroller: uiviewcontroller 
}extension mainviewcontroller: infiniteloopcontentviewdelegate
func numbercountofrows(loopview: infiniteloopcontentview) -> int 
func infiniteloopview(loopview: infiniteloopcontentview, didselectedindexpath index: int) 
}class loopviewcell: uicollectionviewcell 
required init?(coder: nscoder) 
}

這是swiftui建立的工程，所以我們可以只用使用最新的canvars來預覽效果就好。如下：

struct contentview: view 
}struct contentview_previews: previewprovider 
}struct viewcontroller: uiviewcontrollerrepresentable 
func updateuiviewcontroller(_ uiviewcontroller: mainviewcontroller, context: context) 
typealias uiviewcontrollertype = mainviewcontroller 
}

預覽的效果如下：

最後上傳上demo，猛戳這裡

Swift之無限迴圈控制項開發

Swift無限迴圈控制項開發

AlloyTouch之無限迴圈select外掛程式

RUIBlog開發手記之無限分類

Swift之無限迴圈控制項開發

Swift無限迴圈控制項開發

AlloyTouch之無限迴圈select外掛程式

RUIBlog開發手記之無限分類

相關推薦