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