一行代码实现headView弹簧拉伸效果
2015-12-02 02:12
465 查看
前言
很多app的个人中心上部的headView都实现了弹簧拉伸的效果,即tableView的top并不随着下拉而滑动,而是紧紧的停在屏幕的最上方。我们今天就分析一下这个效果的实现方式。
分析
关键代码
- (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:self.tableView]; self.headView.bounds = CGRectMake(0, 0, self.tableView.bounds.size.width, 200); self.tableView.tableHeaderView = self.headView; self.topImageView.frame = self.headView.bounds; [self.headView addSubview:self.topImageView]; //在viewDidLoad方法中记录原始的y和height self.originY = self.topImageView.y; self.originHeight = self.topImageView.height; } #pragma mark - UIScrollViewDelegate - (void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat offy = scrollView.contentOffset.y; if (offy < 0) { self.topImageView.y = offy; self.topImageView.height = self.originHeight - offy; }else{ self.topImageView.y = self.originY; self.topImageView.height = self.originHeight; } }
ok,到此你已经实现了headView的弹簧效果了!
多想一步,进一步优化
虽然上面已经实现了功能所需,但是这个效果的代码跟项目耦合在一起的,不能复用。每次实现这个效果,都要写一遍上面的代码。不能忍啊,我们进一步优化!我们创建一个名为
UIScrollView+SpringHeadView.h的UIScrollView的分类
UIScrollView+SpringHeadView类中的实现方法如下
//UIScrollView+SpringHeadView.h的内容 #import <UIKit/UIKit.h> //headView 的高度 #define SpringHeadViewHeight 200 @interface UIScrollView (SpringHeadView)<UIScrollViewDelegate> //在分类增加了属性,这个是利用runtime实现的 @property (nonatomic, weak) UIView *topView; - (void)addSpringHeadView:(UIView *)view; @end
//UIScrollView+SpringHeadView.m的内容 - (void)setTopView:(UIView *)topView{ [self willChangeValueForKey:@"SpringHeadView"]; objc_setAssociatedObject(self, &UIScrollViewSpringHeadView, topView, OBJC_ASSOCIATION_ASSIGN); [self didChangeValueForKey:@"SpringHeadView"]; } - (UIView *)topView{ return objc_getAssociatedObject(self, &UIScrollViewSpringHeadView); } - (void)addSpringHeadView:(UIView *)view{ self.contentInset = UIEdgeInsetsMake(view.bounds.size.height, 0, 0, 0); [self addSubview:view]; view.frame = CGRectMake(0, -view.bounds.size.height, view.bounds.size.width, view.bounds.size.height); self.topView = view; //使用kvo监听scrollView的滚动 [self addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil]; } - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context { [self scrollViewDidScroll:self]; } - (void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat offy = scrollView.contentOffset.y; if (offy < 0) { self.topView.frame = CGRectMake(0, offy, self.topView.bounds.size.width, -offy); } }
现在我们使用起来爽了,只要需要引入
UIScrollView+SpringHeadView.h,一行代码就能实现弹簧的效果啦!
//引入分类 #import "UIScrollView+SpringHeadView.h" - (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:self.tableView]; self.topImageView.frame = CGRectMake(0, 0, self.tableView.bounds.size.width, SpringHeadViewHeight); //只需要一行代码,就能实现同样效果 [self.tableView addSpringHeadView:self.topImageView]; }
相关文章推荐
- java垃圾回收机制
- java编程知识--初始化
- 2015年12月02日 GitHub入门学习(四)Git操作
- PHP Traits代码复用方法浅析
- java io中CreateNewFile()和createTempFile()
- 【C语言提高14】字符串的基本操作
- 2015年12月01日 GitHub入门学习(三)GitHub创建仓库
- python和matlab的语法对比
- 操作符和流程控制
- java 读取Excel (利用poi,jxl插件)
- J2EE,J2SE,J2ME,JDK,SDK,JRE,JVM区别
- Java Arrays.sort源代码解析
- MyEclipse10.6 安装SVN插件方法及插件下载地址
- aaxspring
- JDK的安装图解
- python操作MySQL数据库
- Python Tips 持续更新
- 乱码问题!Eclipse 的控制台console必须用GBK编码
- C++之转换与类类型
- UVA 11292 Dragon of Loowater