Swift animate underline bar when selecting cell in collection view? - swift

Question

I need to add animate underline bar in collection view when selected.
Here is my code below:
class TestViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {
#IBOutlet var segmentCollectionView: UICollectionView!
var segmentTitle = ["Transport","Hotels","Food","Beverages","Boardings"]
var selectedIndex = 0
override func viewDidLoad() {
super.viewDidLoad()
self.collectionViewFitScreen()
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return segmentTitle.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "SegmentCollectionViewCell", for: indexPath) as! SegmentCollectionViewCell
let segmentValue = segmentTitle[indexPath.item]
cell.nameLbl.text = segmentValue
if selectedIndex == indexPath.item{
cell.underlineBarView.backgroundColor = #colorLiteral(red: 0.1921568627, green: 0.2, blue: 0.3333333333, alpha: 1)
}else{
cell.underlineBarView.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
}
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
self.selectedIndex = indexPath.item
self.segmentCollectionView.selectItem(at: indexPath, animated: false, scrollPosition: .centeredVertically)
self.segmentCollectionView.scrollToItem(at: indexPath, at: [.centeredHorizontally], animated: true)
self.segmentCollectionView.reloadData()
}
by above method I've achieve this Segment-Selection.
But what I need is to animate like this Segment-Scroll-Animate.How to do like this?. Any help is appreciated.

Answer 1

As per your code, you are changing the color of the UnlineView bar that will show animation like hiding/showing view.
So to achieve your required animation on the underline bar you need to move ur Underline Bar from CollectionView Cell to outer view or move it on its super view.
And then change the position of the view based on cell selection.
Something like the below code:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
self.selectedIndex = indexPath.item
UIView.animate(withDuration: 1.0) {
//Change position of your UnderlineBar
self.underineBar.frame = #Set Appropriate Frame Here#
self.view.layoutIfNeeded()
}
}
this will animate ur view from the current position to the selected cell position.
Hope this will helps to get ur animation on the underline bar.

Answer 2

The more clean approach is to draw the indicator as part of UICollectionView UICollectionReusableView. There is a nice example of how to work with it in emilwojtaszek/collection-view-layout-examples.
Note: If you want indicator to change its' width relative to menu cell width, this task might be considerably more complicated. Simplest way is to use the Parchment library. It uses scroll events to compute relative portion of currently scrolled page, to get menu cells which are part of transition and only then change width attribute of UICollectionReusableView.