当我滚动 UITableview 时自动滚动 UICollectionView
Auto scroll UICollectionView when I scroll UITableview
我上面有一个水平的 CollectionView
,下面有一个 TableView
我想当我滚动 TableView
时,我的 CollectionView
应该滚动并动画到我用 scrollItemTo
达到的某个水平,但是 CollectionView
滚动速度变慢但我希望它像它一样工作正在 uberEats iOS 应用中的餐厅项目列表详细信息中工作,同样正在 urbanClap 应用中工作
这就像在 table 视图部分 header 到达顶部时逐个移动视图单元格
您可以为您的 tableView 实施 scrollViewDidScroll
或 UIScrollViewDelegate
,然后从那里手动滚动您的 UICollectionView
class XYZ: UIViewController, UIScrollViewDelegate{
func viewDidLoad(){
super.viewDidLoad()
tableView.delegate = self
}
func scrollViewDidScroll(_ scrollView: UIScrollView){
let tableView = scrollView //assuming the only scrollView.delegate you conform to is the tableVeiw
collectionView.contentOffset = someMappingFrom(tableView.contentOffset) //or some other scrolling mechanism (scrollToItem)
}
}
您提到的 uber eats 应用程序功能的工作方式如下:每当 tableView
的特定部分到达顶部时,就会选择该特定的 collectionViewCell
。
从上面的说法可以看出,
collectionView
中的项目数 = tableView
中的部分数
您可以通过跟踪 tableView
的顶部可见部分索引然后选择该特定索引处的 collectionViewCell
来解决此特定问题,即
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView === self.tableView {
if
let topSectionIndex = self.tableView.indexPathsForVisibleRows?.map({ [=10=].section }).sorted().first,
let selectedCollectionIndex = self.collectionView.indexPathsForSelectedItems?.first?.row,
selectedCollectionIndex != topSectionIndex {
let indexPath = IndexPath(item: topSectionIndex, section: 0)
self.collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally)
}
}
}
更改 collectionViewCell
选择颜色:
创建自定义 UICollectionViewCell
并覆盖 **isSelected**
属性 以处理选定和 un-selected 状态,即
class CollectionViewCell: UICollectionViewCell {
@IBOutlet weak var titleLabel: UILabel!
override var isSelected: Bool {
didSet {
if self.isSelected {
self.contentView.backgroundColor = #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1)
} else {
self.contentView.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
}
}
}
}
此后您将不需要在其他地方手动更新单元格的 backgroundColor
。
您需要更改 scrollViewDidScroll 上的选择。
我已将 link 附加到相同代码的回购
我上面有一个水平的 CollectionView
,下面有一个 TableView
我想当我滚动 TableView
时,我的 CollectionView
应该滚动并动画到我用 scrollItemTo
达到的某个水平,但是 CollectionView
滚动速度变慢但我希望它像它一样工作正在 uberEats iOS 应用中的餐厅项目列表详细信息中工作,同样正在 urbanClap 应用中工作
这就像在 table 视图部分 header 到达顶部时逐个移动视图单元格
您可以为您的 tableView 实施 scrollViewDidScroll
或 UIScrollViewDelegate
,然后从那里手动滚动您的 UICollectionView
class XYZ: UIViewController, UIScrollViewDelegate{
func viewDidLoad(){
super.viewDidLoad()
tableView.delegate = self
}
func scrollViewDidScroll(_ scrollView: UIScrollView){
let tableView = scrollView //assuming the only scrollView.delegate you conform to is the tableVeiw
collectionView.contentOffset = someMappingFrom(tableView.contentOffset) //or some other scrolling mechanism (scrollToItem)
}
}
您提到的 uber eats 应用程序功能的工作方式如下:每当 tableView
的特定部分到达顶部时,就会选择该特定的 collectionViewCell
。
从上面的说法可以看出,
collectionView
中的项目数 = tableView
您可以通过跟踪 tableView
的顶部可见部分索引然后选择该特定索引处的 collectionViewCell
来解决此特定问题,即
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView === self.tableView {
if
let topSectionIndex = self.tableView.indexPathsForVisibleRows?.map({ [=10=].section }).sorted().first,
let selectedCollectionIndex = self.collectionView.indexPathsForSelectedItems?.first?.row,
selectedCollectionIndex != topSectionIndex {
let indexPath = IndexPath(item: topSectionIndex, section: 0)
self.collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally)
}
}
}
更改 collectionViewCell
选择颜色:
创建自定义 UICollectionViewCell
并覆盖 **isSelected**
属性 以处理选定和 un-selected 状态,即
class CollectionViewCell: UICollectionViewCell {
@IBOutlet weak var titleLabel: UILabel!
override var isSelected: Bool {
didSet {
if self.isSelected {
self.contentView.backgroundColor = #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1)
} else {
self.contentView.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
}
}
}
}
此后您将不需要在其他地方手动更新单元格的 backgroundColor
。
您需要更改 scrollViewDidScroll 上的选择。
我已将 link 附加到相同代码的回购