利用小技巧做动态headerView

header2.gif

玩微博的时候,看到个人主页有个随着拖拽可以动态变动的headerView,感觉用户体验挺不错的。于是就有了冲动。。。

这个是怎么实现的呢?可能办法有千万种。下面讲解我的个人看法哈,首先分析下View的结构:
一、View的构成
1、能拖拽的是UIScrollView(废话);
2、显示图片的是UIImageView(废话);
3、显示东西的是UIView(随便什么View了)

 //创建背景
self.bgscrollView = [[UIScrollView alloc]init];
[self.view addSubview:self.bgscrollView];
//创建图片
self.headerImageView = [[UIImageView alloc]init];
self.headerImageView.image = [UIImage imageNamed:@"login_bg"];
//自定义View
self.customeView = [[UITableView alloc]init];

二、View的层次结构
UIImageView 和 UIScrollView的父控件是控制器的View
显示的东西的View的父控件是UIScrollView

//添加View -- >注意顺序
[self.view addSubview:self.headerImageView];
[self.view addSubview:self.bgscrollView];
[self.bgscrollView addSubview:self.customeView];

知道了这些那么下面就要动刀子了。
1、监听UIScrollView的滚动(随着scrollView的滚动让UIImageView发生变化)

//添加KVO观察者
[self.bgscrollView addObserver:self forKeyPath:@"contentOffset" options: NSKeyValueObservingOptionNew context:nil];

2、UIImageView 动态发生改变(看样子好难啊)

//利用UIView的一个属性
//设置headerImageView的内容模式
self.headerImageView.contentMode = UIViewContentModeScaleAspectFill;

其实这是一句神奇的代码

3.实现KVO监听方法

pragma mark - KVO监听

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
CGPoint point = [change[@"new"] CGPointValue];
//时刻设置图片的高度
self.headerImageView.height_ic = 400 - point.y ;//关键代码
}

这样就简单实现了动态headerView


627E08ABEDB81442DC87738E61F30956.png

怎么样挺神奇的吧
快把代码带回家吧
https://github.com/icoder20150719/ICDragViewController.git

ps:添加KVO监听方法之后记得移除不然在控制器销毁的适合就会报:
** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'An instance 0x7fa188def800 of class UIScrollView was deallocated while key value observers were still registered with it. Current observation info: (
Context: 0x0, Property: 0x7fa188e8cb50>
)'
移除方法 可以写在

-(void)viewWillDisappear:(BOOL)animated{
[super viewWillDisappear:animated];

[self.bgscrollView removeObserver:self forKeyPath:@"contentOffset"];

}

或者
-(void)dealloc{
//your code
}

你可能感兴趣的:(利用小技巧做动态headerView)