在集合视图中选择单元格时，Swift 动画下划线栏？答案

【问题标题】：Swift animate underline bar when selecting cell in collection view?在集合视图中选择单元格时，Swift 动画下划线栏？
【发布时间】：2020-04-04 09:13:22
【问题描述】：

选中后我需要在集合视图中添加动画下划线栏。

下面是我的代码：

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.How to do 这样的动画？任何帮助表示赞赏。

【问题讨论】：

根据您的代码，您正在更改取消线栏的颜色而不是栏的位置，所以我认为您需要将该栏放在集合视图之外，只需更改取消线栏的位置和这样你就可以实现你的动画了。
那么当uiview在collection view之外时如何根据cell改变它的位置呢？

标签： swift uicollectionview uisegmentedcontrol

【解决方案1】：

更简洁的方法是将指标绘制为 UICollectionView UICollectionReusableView 的一部分。 emilwojtaszek/collection-view-layout-examples 中有一个很好的例子来说明如何使用它。

注意：如果您希望指示器相对于菜单单元格宽度更改其宽度，则此任务可能要复杂得多。最简单的方法是使用Parchment 库。它使用滚动事件来计算当前滚动页面的相对部分，获取作为过渡一部分的菜单单元格，然后才更改 UICollectionReusableView 的宽度属性。

【讨论】：

【解决方案2】：

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

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

然后根据单元格选择改变视图的位置。

类似于下面的代码：

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

}

这将使您的视图从当前位置动画到选定的单元格位置。

希望这将有助于在下划线栏上获得动画。

【讨论】：