在 Collection View 中选择单元格时，快速动画下划线栏？

Question

我需要在选择时在 Collection View 中添加动画下划线栏。

下面是我的代码:

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()
}

通过上述方法我已经实现了这个Segment-Selection 。但我需要的是像这样的动画 Segment-Scroll-Animate .这样怎么办？如有任何帮助，我们将不胜感激。

Answer 1

根据您的代码，您正在更改 UnlineView 栏的颜色，该颜色将显示隐藏/显示 View 等动画。

因此，要在下划线栏上实现所需的动画，您需要将下划线栏从 CollectionView Cell 移动到外部 View 或将其移动到其 super View 上。

然后根据单元格选择更改 View 的位置。

类似于下面的代码:

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()
    }

}

这会将您的 View 从当前位置动画到选定的单元格位置。

希望这有助于在下划线栏上显示动画。