TableView/CollectionView 滑动顶部效果优化

最新推荐文章于 2023-03-22 22:52:52 发布

Code&Ocean

最新推荐文章于 2023-03-22 22:52:52 发布

阅读量421

点赞数

分类专栏： iOS 开发问题踩坑文章标签： UITableView UIScrollView 滑动

本文链接：https://blog.csdn.net/qq_14920635/article/details/110817494

版权

iOS 开发问题踩坑专栏收录该内容

57 篇文章 0 订阅

订阅专栏

TableView/CollectionView 滑动顶部效果优化

默认弹簧效果

在使用 UITableView 或者 UICollectionView 时，如果开启弹框效果，下拉是整个内容就会偏移，松手就会自动弹回，最常用的就是我的界面。

如果scrolleView背景色和 cell/header 一样就不会产生什么突兀感，但是如果靠近顶部的视图是渐变/图片或者和背景色差别较大，下拉就会产生突兀感。

如下图

在这里插入图片描述

那么怎解决了。

将 ScrollView 的偏移量传递到 Cell 中处理，进行子视图的偏移处理，造成视觉上的错觉。

注意： UITabelViewCell 或者 UICollectionViewCell 默认是开启裁剪的（clipsToBounds = true）

比如实现镂空滑动或者拉伸效果。

镂空滑动效果

效果如下图：

在这里插入图片描述

视图结构如下：

在这里插入图片描述

获取 ScrollView 的偏移量

通过代理方法 scrollViewDidScroll(_ scrollView: UIScrollView)可以轻松获取到偏移量。

	func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        // 下拉 y 小于 0
        if  offsetY < 0  { //let coll = scrollView as? UICollectionView,
            let index = IndexPath(item: 0, section: Section.baseInfo.rawValue)
            let cell = coll.cellForItem(at: index) as! MineInfoCollectionCell
            cell.updateOffset(offsetY) // 将偏移量传入目标 cell, 进行改变
        }
    }

为白色视图顶部和 Cell 顶部添加约束 containerTopCons ,并且将 Cell的裁剪取消

在 Cell 代码中进行偏移量赋值

class MineInfoCollectionCell: UICollectionViewCell {
    static var cellHeight: CGFloat = 300
    @IBOutlet weak var containerTopCons: NSLayoutConstraint!
    override func awakeFromNib() {
        super.awakeFromNib()
        containerHeigthCons.constant = MineInfoCollectionCell.cellHeight
    }
    
    func updateOffset(_ offset: CGFloat) {
        containerTopCons.constant = offset  // 更新偏移量
    }
}