iOS 仿美团首页CollectionView与UIPageControl联动

我们在iOS开发中经常可以看到CollectionView按页横向滚动,那么你知道要怎么实现吗?下面我们就一起去看看IOSCollectionView与UIPageControl联动效果的实现方法。

1.gif

传入rowCount(行数)和countPerRow(列数)


 private lazy var collectionView :UICollectionView= {
    let layout =CollectionLayout.init()
    layout.minimumLineSpacing=10
    layout.minimumInteritemSpacing = 10
    layout.rowCountItem(rowCount:rowCount, countPerRow:countPerRow)    
    layout.columnSpacing(columnSpacing:10, rowSpacing:10, edge:UIEdgeInsets.init(top:10, left:10, bottom:10, right:10))
    let collectionView =UICollectionView.init(frame:CGRect.init(x:0, y:200, width:UIScreen.main.bounds.size.width, height:300), collectionViewLayout:layout)
    layout.scrollDirection = UICollectionView.ScrollDirection.horizontal
    collectionView.backgroundColor=UIColor.lightGray
    collectionView.delegate= self
    collectionView.dataSource= self
    collectionView.isPagingEnabled= true
    collectionView.bounces= true
    collectionView.showsHorizontalScrollIndicator = false
    collectionView.alwaysBounceHorizontal = true
    collectionView.register(CollectionCell.classForCoder(), forCellWithReuseIdentifier:identifier)
    return collectionView
}()

重新布局视图 实现prepare()和layoutAttributesForElements方法

override func prepare() { 
  super.prepare()
  let itemTotalCount = (collectionView!.numberOfItems(inSection:0))
  for I in 0..<itemTotalCount {
    let indexPath =IndexPath.init(item: i, section:0)
    let attributes = self.layoutAttributesForItem(at: indexPath)
    attributesArrayM.append(attributes)
  } 
}
override func layoutAttributesForElements(in rect:CGRect) ->[UICollectionViewLayoutAttributes]? {
  return attributesArrayM
 }

利用rowCount和countPerRow和allCount 重新计算collectionView的contentSize

override var collectionViewContentSize: CGSize {
  let itemWidth = CGFloat.init((UIScreen.main.bounds.size.width-CGFloat(self.edgeInsets.left) - CGFloat(self.countPerRow*self.columnSpacing))/CGFloat(self.countPerRow))
  let itemTotalCount :NSInteger= (collectionView?.numberOfItems(inSection:0))!
  let itemCount :NSInteger= self.rowCount*self.countPerRow
  let remainder :NSInteger=NSInteger(itemTotalCount%itemCount)
  var pageNumber :NSInteger= itemTotalCount/itemCount
  if itemTotalCount<=itemCount {
     pageNumber =1;
  } else {
      if remainder!=0{
      pageNumber = pageNumber+1
      }
 }
let width :CGFloat=CGFloat(Float(self.edgeInsets.left))+CGFloat(Float(pageNumber))*CGFloat(self.countPerRow)*(CGFloat(itemWidth)+CGFloat(self.columnSpacing))-CGFloat(self.columnSpacing)+CGFloat(self.edgeInsets.right)+CGFloat(pageNumber-1)*CGFloat(self.edgeInsets.left)
  // 横向滚动 height为0
  return  CGSize(width: width, height:0)    
}

根据indexPath计算每一个item的X、Y以及itemWidth、itemHeight

override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes  {
    let itemWidth:CGFloat= (collectionView!.frame.size.width-CGFloat(self.edgeInsets.left)-CGFloat(self.countPerRow*self.columnSpacing))/CGFloat(Float(self.countPerRow))
    let itemHeight:CGFloat= (collectionView!.frame.size.height-CGFloat(self.edgeInsets.top)-CGFloat(self.edgeInsets.bottom)-CGFloat(self.rowCount-1)*CGFloat(self.rowSpacing))/CGFloat(self.rowCount)
    let item = indexPath.item
    let pageNumber :NSInteger=NSInteger(item)/NSInteger(self.rowCount*self.countPerRow)
    let x :CGFloat=CGFloat(item%self.countPerRow)+CGFloat(NSInteger(pageNumber)*NSInteger(self.countPerRow))
    let y :CGFloat=CGFloat(item/self.countPerRow)-CGFloat(NSInteger(pageNumber)*NSInteger(self.rowCount))
    let itemX :CGFloat=CGFloat(self.edgeInsets.left)+CGFloat((itemWidth+CGFloat(self.columnSpacing))*x)
    let itemY :CGFloat=CGFloat(self.edgeInsets.top)+CGFloat((itemHeight+CGFloat(self.rowSpacing))*y)
    let attributes =super.layoutAttributesForItem(at: indexPath as IndexPath) ??UICollectionViewLayoutAttributes.init()
    attributes.frame=CGRect.init(x:(CGFloat(10*pageNumber)+itemX), y: itemY, width: itemWidth, height: itemHeight)
    return attributes    
}

Demo地址 oc与swift版本
大神多多指点,共同学习,觉得用得到的给个star,谢谢

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容