最近项目中有一个tableView顶部图片下拉放大效果的需求, 简单分享一下我的做法。
效果大概就这样，如下图：
IMG_4745.GIF
原理：
我的实现方式很简单，在tableView上方添加一个imageView（注：imageView和tableView是同级关系，而非在tableView的tableHeaderView中），然后监听tableView的滑动，根据滑动值y来改变imageView的frame，从而达到实现效果
注意点：
1、设置tableView的contentInset属性；
2、imageView的contentMode属性设置为scaleAspectFill;
3、imageView和tableView同级，imageView在tableView的上方
具体做法：
- 初始化imageView和tableView
let cellReuseIdentifier = "RXDemoOneCell"
let imageHeight: CGFloat = 300
private lazy var tableView: UITableView = {
let tableView = UITableView(frame: CGRect.zero, style: UITableViewStyle.plain)
tableView.delegate = self
tableView.dataSource = self
// 设置tableView的top为imageView的高度，第一行cell会偏移到imageView的底部
tableView.contentInset = UIEdgeInsets(top: imageHeight,
left: 0,
bottom: 0,
right: 0)
tableView.showsVerticalScrollIndicator = false
tableView.showsHorizontalScrollIndicator = false
tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
return tableView
}()
private lazy var headerView: UIImageView = {
let imageV = UIImageView(image: UIImage(named: "girlZhang.jpg"))
imageV.contentMode = .scaleAspectFill
return imageV
}()
注意：
1、初始化tableView时，为保证cell不被imageView遮住，需要设置tableView的contentInset属性；
2、如果是隐藏了nav，这里的top值为imageHeight - 20，因为父视图view的SafeAreaInsets值为(20,0,0,0)，即使imageView和tableView的y值都为0，在添加进view中，位置都会偏移20；
- 将imageView和tableView添加到view中
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.white
tableView.frame = CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_HEIGHT)
view.addSubview(tableView)
headerView.frame = CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: imageHeight)
view.addSubview(headerView)
}
- 监听tableView的滑动，根据滑动的y值设置headerView的高度
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offsetY = scrollView.contentOffset.y
var frame = self.headerView.frame
if offsetY <= -300 {
frame.origin.y = 0 // 这句代码一定要加 不然会出点问题
frame.size.height = -offsetY
} else {
frame.origin.y = -(300 + offsetY)
frame.size.height = imageHeight
}
self.headerView.frame = frame
}
这就完了，比较简单！
ps：如果有什么不好的地方，还请大家多多指正！
