模仿扇貝英語的每日一句所做的圖片查看器,通過CollectionView + 自定義FlowLayout制作。
效果圖:
圖片查看器
主要通過重寫了
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?
這個方法
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let array = NSArray(array: super.layoutAttributesForElements(in: rect)!, copyItems:true) as! [UICollectionViewLayoutAttributes]
//可視rect
var visibleRect = CGRect()
visibleRect.origin = self.collectionView!.contentOffset
visibleRect.size = self.collectionView!.bounds.size
//是否右滑
let isRight = self.collectionView!.contentOffset.x - oldOffsetX < 0 ? true : false
//縮放比例
var scling: CGFloat = self.collectionView!.contentOffset.x.truncatingRemainder(dividingBy: self.collectionView!.bounds.width) / collectionView!.bounds.width
//透明比例
let alphaScling = scling
for (index,attributes) in array.enumerated(){
//cell對屏幕中心的距離
let distance = attributes.center.x - visibleRect.midX
if distance > 0 && distance <= visibleRect.width && index != 0{
if newScroll {
scrollState = isRight ? .right : .left
newScroll = false
}
//右滑動 || 右滑未完成 && 左滑完成
if scling <= 0.7 && scrollState == .right {
scling = 0.7
}
//滑動是否完成
if distance == visibleRect.width {
newScroll = true
}
attributes.center = CGPoint(x: visibleRect.midX, y: visibleRect.midY)
attributes.transform = attributes.transform.scaledBy(x: scling, y: scling)
attributes.alpha = alphaScling
//調整層級關系
attributes.zIndex = -1
break
}
}
oldOffsetX = self.collectionView!.contentOffset.x
return array
}
在編寫的過程中主要遇到的問題為爪膊,當左滑一半右滑的處理和右滑一半左滑的處理谜诫,嘗試了很多辦法才得以解決牵祟。最后附上demo地址
https://github.com/px123zx/PictureViewer
如果對該demo有什么好的意見或者建議請與我聯(lián)系碴卧,謝謝