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

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看256 回复回复7 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 256|回复: 7
收起左侧

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

[复制链接]
swifter 发表于 2016-7-11 14:33:04 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
其实这个实现非常简单,一个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:

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


结束了,就这么简单。




作者:冉俊


都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 推送上首页了~分享到朋友圈微博QQ空间吧~.

查看全部评分

apper 发表于 2016-7-15 16:22:33 | 显示全部楼层
赞,应该加为精华才对
290920392@q.com 发表于 2016-7-18 11:26:16 | 显示全部楼层
学习学习
595989743 发表于 2016-10-18 16:22:20 | 显示全部楼层
给力
花花花 发表于 2016-11-8 11:02:55 | 显示全部楼层
我想下载demo学习
 楼主| swifter 发表于 2016-11-10 10:11:21 | 显示全部楼层

喜欢就多转发~
兰德耍 发表于 7 天前 | 显示全部楼层
牛b
bioswift 发表于 昨天 18:53 | 显示全部楼层
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表