前言

想必大家工作中或多或少會遇到下圖樣式的UI需求吧

像這種cell長度不固定，并且還能實現的分頁效果UI還是很常見的

實現

我們這里實現主要采用collection view，實現的方式是自定義一個UICollectionViewFlowLayout的子類，在這個類里對cell布局進行排列

• 當出現page size小于collection view的size的時候，可以使用ZLCollectionFreePageLayout一下子就實現分頁效果
• 并且不需要設置屬性collectionView.isPagingEnabled = true，只要設置了layout為ZLCollectionFreePageLayout,就可以自動實現這種效果

主要代碼如下：

open override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {guard let collectionView = collectionView else {return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)}var pWOrH: CGFloat = 0var contentOffsetXOrY: CGFloat = 0var collectionViewContentWOrH: CGFloat = 0var velocityXOrY: CGFloat = 0if scrollDirection == .horizontal {pWOrH = (pageWOrH == 0 ? collectionView.frame.width : pageWOrH) + minimumLineSpacingcontentOffsetXOrY = collectionView.contentOffset.xcollectionViewContentWOrH = collectionViewContentSize.widthvelocityXOrY = velocity.x} else {pWOrH = (pageWOrH == 0 ? collectionView.frame.height : pageWOrH) + minimumInteritemSpacingcontentOffsetXOrY = collectionView.contentOffset.ycollectionViewContentWOrH = collectionViewContentSize.heightvelocityXOrY = velocity.y}let originalPage = contentOffsetXOrY / pWOrHvar nextPage = (velocityXOrY > 0) ? ceil(originalPage) : floor(originalPage)if (nextPage + 1.0) * pWOrH > collectionViewContentWOrH { nextPage -= 1.0 }let currentPage = (velocityXOrY > 0) ? floor(originalPage) : ceil(originalPage)let pannedLessThanOnePage = abs(1 + currentPage - originalPage) > 0.5let flicked = abs(velocityXOrY) > 0.01var newProposedContentOffset = proposedContentOffsetif !(pannedLessThanOnePage && flicked) {nextPage = round(originalPage)}newProposedContentOffset.x = nextPage * pWOrHreturn newProposedContentOffset}

• 在使用的時候，只需要將collection.collectionViewLayout的屬性設置為我們自定義的layout對象，具體代碼如下面的示例代碼：

private lazy var collectionView: UICollectionView = {// 實例化一個ZLCollectionLeftLayout對象let defaultLayout = ZLCollectionFreePageLayout()// 自定義page width或者page heightdefaultLayout.pageWOrH = 200.0defaultLayout.minimumLineSpacing = 10.0defaultLayout.minimumInteritemSpacing = 10.0defaultLayout.scrollDirection = .verticaldefaultLayout.sectionInset = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)// 設置collection view的layout為ZLCollectionFreePageLayoutlet collectionView = UICollectionView(frame: .zero, collectionViewLayout: defaultLayout)collectionView.showsVerticalScrollIndicator = falsereturn collectionView
}()

• 然后就會自動實現分頁效果

• 并且不需要設置屬性collectionView.isPagingEnabled = true

開源代碼地址

代碼開源到github上了，可以直接拿來使用

開源代碼地址