在集合视图中选择单元格时快速动画下划线栏?

Question

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

这是我下面的代码：

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

通过上述方法，我已经实现了此细分选择。 但是我需要的是像这个分段滚动动画一样动画。怎么做？任何帮助，不胜感激。

Answer 1

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

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

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

类似于下面的代码：

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

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

希望这将有助于将您的动画放在下划线栏上。

Answer 2

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

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