How to create a slow and continuous scroll with CollectionView Swift - ios

Question

So I have some info that I would like to display in a horizontal CollectionView that scrolls automatically without user interaction. Like those bars under news channels that display info.
I have the CollectionView set up with the cells renewing once the datasource runs out, so I can scroll infinitely with the data being recycled.
I found some functions that use timers but they snap to a new index path and its not a continuous slow scroll. I also found some cocoa pods but I can imagine there is a simpler way to do this?
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return Int.max
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = CollectionView.dequeueReusableCell(withReuseIdentifier: "OverViewCell", for: indexPath) as? OverViewCollectionCellCollectionViewCell
let itemToShow = testlist[indexPath.item % testlist.count]
cell!.symbolLabelCollection.text = itemToShow
return cell!
}
Any idea?

Answer 1

Here's a very basic example using a UIViewPropertyAnimator.
First, a simple cell with a single label:
class MyLabelCell: UICollectionViewCell {
let label: UILabel = UILabel()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() {
label.textColor = .black
label.textAlignment = .center
label.font = .systemFont(ofSize: 16.0)
label.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(label)
let g = contentView
NSLayoutConstraint.activate([
label.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
label.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
label.centerYAnchor.constraint(equalTo: g.centerYAnchor),
])
}
}
and an example view controller (everything added via code - no #IBOutlet or #IBAction connections):
class MarqueeCVViewController: UIViewController {
var collectionView: UICollectionView!
var myData: [String] = []
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemBackground
// some sample data
myData.append("This is cell 1")
myData.append("This is the text of the second cell")
myData.append("Cell 3 has a long enough string that it will exceed the width of the visible portion of the collection view")
myData.append("This is the fourth cell")
myData.append("This is the last cell for this example")
let fl: UICollectionViewFlowLayout = {
let f = UICollectionViewFlowLayout()
f.scrollDirection = .horizontal
f.estimatedItemSize = CGSize(width: 100, height: 30)
return f
}()
collectionView = UICollectionView(frame: .zero, collectionViewLayout: fl)
collectionView.register(MyLabelCell.self, forCellWithReuseIdentifier: "MyLabelCell")
collectionView.dataSource = self
collectionView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(collectionView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
// extend the collection view wider than the view
// otherwise, cells tend to be removed when only partially
// scrolled off-screen
collectionView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: -100.0),
collectionView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 100.0),
collectionView.heightAnchor.constraint(equalToConstant: 32.0),
collectionView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
])
// inset the content so we start with the first cell visible
collectionView.contentInset.left = 100
// so we can see the collectionView frame
collectionView.backgroundColor = .cyan
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// start the animation
runAnim()
}
func runAnim() {
// adjust these values to suit
// animation will re-start every 5 seconds
let dur: Double = 5
// "scroll speed" -- number of points per second
let ptsPerSecond: Double = 25
let animator = UIViewPropertyAnimator(duration: dur, curve: .linear) {
self.collectionView.contentOffset.x += ptsPerSecond * dur
}
animator.addCompletion({_ in
self.runAnim()
})
animator.startAnimation()
}
}
extension MarqueeCVViewController: UICollectionViewDataSource, UICollectionViewDelegate {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 100_000
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let c = collectionView.dequeueReusableCell(withReuseIdentifier: "MyLabelCell", for: indexPath) as! MyLabelCell
c.label.text = myData[indexPath.item % myData.count]
// so we can see the cell frames
c.contentView.backgroundColor = .yellow
return c
}
}