卡片效果
一.问题说明
在使用 collectionView 时,遇到了下面的问题.滚动并非全屏的.如果是全屏则使用isPagingEnabled属性就可以解决.基本上一些常见的轮播图也可以这么处理.先在发现如果设置该属性,滚动的距离是屏幕的宽.
下面说一下思路:
二.解决思路
2.1布局
首先先完成基本布局
// 继承FlowLayout 可以减少一部分布局麻烦
class CredirCardLayout: UICollectionViewFlowLayout {
// 用于存放每个 item 的样式
fileprivate lazy var attrsArray: [UICollectionViewLayoutAttributes] = [UICollectionViewLayoutAttributes]()
override init() {
super.init()
// 设置布局为水平滚动
scrollDirection = .horizontal
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// 布局准备工作,主要用于计算每个 item 的位置
override func prepare() {
super.prepare()
let itemCount = collectionView?.numberOfItems(inSection: 0)
let itemW: CGFloat = ScreenW * 0.84
let itemH: CGFloat = 250
let margin: CGFloat = -30
let left: CGFloat = (ScreenW - itemW - 2 * margin) / 2.0
for index in 0..<itemCount! {
let indexPath = IndexPath(item: index, section: 0)
let atts = UICollectionViewLayoutAttributes(forCellWith: indexPath)
let x = (itemW + margin) * CGFloat(index) + margin + left
atts.frame = CGRect(x: x, y: 0, width: itemW, height: itemH)
attrsArray.append(atts)
}
}
// 为每个 item 布局
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let size = collectionView?.frame.size
let origin = collectionView?.contentOffset
// 显示区域
let visiableRect = CGRect(x: (origin?.x)!, y: (origin?.y)!, width: (size?.width)!, height: (size?.height)!)
let centerX = (collectionView?.contentOffset.x)! + (collectionView?.frame.width)! * 0.5
for att in attrsArray {
if visiableRect.intersects(att.frame) {
// 获取中心点
let itemCenterX = att.center.x
// 计算缩小的比例. fabsf是取绝对值的函数
let scale = 1 - (fabsf(Float(itemCenterX - centerX))) / 1000.0
att.transform = CGAffineTransform(scaleX: CGFloat(scale), y: CGFloat(scale))
}
}
return attrsArray
}
// ContentSize大小
override var collectionViewContentSize: CGSize {
return CGSize(width: (attrsArray.last?.frame.maxX)! + 30, height: 0)
}
// 当边界改变时调用此方法,可以频繁计算 item 的大小
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
return true
}
}
到这里基本的 layout 布局就基本完成.
2.2当滚动停止时,停留到中间
extension CredirCardLayout {
// 滚动将要停止时调用
override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
let lastRect = CGRect(origin: proposedContentOffset, size: (collectionView?.frame.size)!)
// 屏幕中心的位置
let centerX = proposedContentOffset.x + (collectionView?.frame.width)! * 0.5
// 取出范围内的属性
let array = layoutAttributesForElements(in: lastRect)
var adjustOffsetX: CGFloat = CGFloat(MAXFLOAT)
for att in array! {
if fabsf(Float(att.center.x - centerX)) < fabsf(Float(adjustOffsetX)) {
adjustOffsetX = att.center.x - centerX
}
}
return CGPoint(x: proposedContentOffset.x + adjustOffsetX, y: proposedContentOffset.y)
}
}
2.3 设置滚动页
到这里你可能会发现当滚动时,会滑动很多页.这样子肯定不行.
先说一下思路,再看解决方案:
思路一: 通过判断左划,还是右划.设置滚动的 offset.x
这里我们会遇到几个 scrollerView 的代理方法
// 当开始拖动时,调用,此时记录位置,便于后面进行比较
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
offsetX = scrollView.contentOffset.x
}
// 当将要结束时调用, 此处可以判断是左划还是右划
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
if offsetX > scrollView.contentOffset.x { // 右划
} else { // 左划
}
}
// 滑动减速时调用
func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
if offsetX > scrollView.contentOffset.x { // 右划
} else { // 左划
}
}
// 滚动时调用会频繁调用
func scrollViewDidScroll(_ scrollView: UIScrollView) {
}
通过这几个方法测试会发现问题.当手的滑动的力度不同时,调用的方法是不样的.所以判断起来极端的麻烦.
思路二: 如何处理手拖动速度的问题
由于上面已经处理了当滚动停止时一定会停在 item 的中心,所以现在考虑的就是怎样可以区分手划的力度呢.通过测试触发的手势发现通过手势的移动是很难判断.最后只能让滚动慢下来.
最终解决方案:设置decelerationRate
collecton.decelerationRate = 0.5
decelerationRate这个属性的取值范围是0-1;用于决定用户举起手指后减速率。通过设定滚动的减速率,来限制 offset. 当然这种方法有些取巧.暂时还没有想到太好的计算方式.
