其实这个实现非常简单,一个tableview,一个imageView就可以搞定。

Swift实现iOS tableView表视图头部放大 1

Swift实现iOS tableView表视图头部放大 - 敏捷大拇指 - Swift实现iOS tableView表视图头部放大 1

我最喜欢的主播蕊希,一个人听




效果图:

Swift实现iOS tableView表视图头部放大 2

Swift实现iOS tableView表视图头部放大 - 敏捷大拇指 - Swift实现iOS tableView表视图头部放大 2

录制gif的软件是licecap




1、第一步

这是第一步,当然这一步可有可无。

[Swift] 纯文本查看 复制代码
let UIScreen_Width = UIScreen.mainScreen().bounds.size.width
let UIScreen_Height = UIScreen.mainScreen().bounds.size.height
let imageHeigt:CGFloat = 300.0




2、第二步

懒加载一个tableview,一个imageView。tableView需要设置它的contentInset。

[Swift] 纯文本查看 复制代码
 // MARK: - lazy
 private lazy var tableView: UITableView = {
     let table = UITableView.init(frame: CGRectMake(0, 0, UIScreen_Width, UIScreen_Height), style: UITableViewStyle.Grouped)
     table.delegate = self
     table.dataSource = self
     table.registerClass(UITableViewCell.self, forCellReuseIdentifier: "UITableViewCell")
     table.contentInset = UIEdgeInsetsMake(imageHeigt, 0, 0, 0)
     return table
 }()

 private lazy var ErinImageView: UIImageView = {
     let imageView = UIImageView.init(frame: CGRectMake(0, -imageHeigt, UIScreen_Width, imageHeigt))
     imageView.image = UIImage.init(named: "Erin1")
     return imageView
 }()





3、第三步

添加tableView到view上,把图片视图ErinImageView添加到tableView上做为tableVIew的子视图。

[Swift] 纯文本查看 复制代码
 override func viewDidLoad() {
     super.viewDidLoad()
     self.view.backgroundColor = UIColor.whiteColor()

     view.addSubview(tableView)
     tableView.addSubview(ErinImageView)

 }





4、第四步

实现tableView代理方法和数据源方法,这一步其实和平常写tableView没有什么区别。

[Swift] 纯文本查看 复制代码
 // MARK: - UITableViewDelegate,UITableViewDataSource

 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
     let cell = tableView.dequeueReusableCellWithIdentifier("UITableViewCell", forIndexPath: indexPath)
     cell.textLabel?.text = "indenxPath.row = \(indexPath.row)"
     return cell
 }

 func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
     return 20
 }

 func numberOfSectionsInTableView(tableView: UITableView) -> Int {
     return 1
 }

 func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
     return CGFloat.min
 }

 func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
     return CGFloat.min
 }





5、第五步

这一步其实才是最关键的步骤,根据tableView的偏移量来改变图片ErinImageView的frame。

[Swift] 纯文本查看 复制代码
 /**
  * UIScrollView的代理方法,监听tableview的偏移量
  */
 func scrollViewDidScroll(scrollView: UIScrollView) {
     let  contentOfSetY = scrollView.contentOffset.y
     let  contentOfSetX = (contentOfSetY + imageHeigt) / 2.0
     if contentOfSetY < -imageHeigt {
         var rect = ErinImageView.frame
         rect.origin.y = contentOfSetY
         rect.size.height = -contentOfSetY
         rect.origin.x = contentOfSetX
         rect.size.width = UIScreen_Width + fabs(contentOfSetX) * 2
         ErinImageView.frame = rect
     }
 }





Demo下载

这是demo:

游客,如果您要查看本帖隐藏内容请回复


结束了,就这么简单。




作者:冉俊