简单的代码实现的炫酷navigationbar
这是很久以前写的一个Demo,开源分享给大家。大牛勿喷哦!
技术原理:
当你下拉scrollview的时候,会监听scrollview的contentOffset来调整头部背景图片的位置,通过CGAffineTransformMakeTranslation和CGAffineTransformScale实现头像的缩小。
具体代码实现:
-(void)willMoveToSuperview:(UIView *)newSuperview
{
[self.scrollView addObserver:self forKeyPath:@"contentOffset" options:(NSKeyValueObservingOptionNew) context:Nil];
self.scrollView.contentInset = UIEdgeInsetsMake(self.frame.size.height, 0 ,0, 0);
self.scrollView.scrollIndicatorInsets = self.scrollView.contentInset;
}
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
CGPoint newOffset = [change[@"new"] CGPointValue];
[self updateSubViewsWithScrollOffset:newOffset];
}
-(void)updateSubViewsWithScrollOffset:(CGPoint)newOffset
{
float destinaOffset = -64;
float startChangeOffset = -self.scrollView.contentInset.top;
newOffset = CGPointMake(newOffset.x, newOffset.y<startChangeOffset?startChangeOffset:(newOffset.y>destinaOffset?destinaOffset:newOffset.y));
float subviewOffset = self.frame.size.height-40;
float newY = -newOffset.y-self.scrollView.contentInset.top;
float d = destinaOffset-startChangeOffset;
float alpha = 1-(newOffset.y-startChangeOffset)/d;
float imageReduce = 1-(newOffset.y-startChangeOffset)/(d*2);
self.subTitleLabel.alpha = alpha;
self.titleLabel.alpha = alpha;
self.frame = CGRectMake(0, newY, self.frame.size.width, self.frame.size.height);
self.backImageView.frame = CGRectMake(0, -0.5*self.frame.size.height+(1.5*self.frame.size.height-64)*(1-alpha), self.backImageView.frame.size.width, self.backImageView.frame.size.height);
CGAffineTransform t = CGAffineTransformMakeTranslation(0,(subviewOffset-0.35*self.frame.size.height)*(1-alpha));
_headerImageView.transform = CGAffineTransformScale(t,
imageReduce, imageReduce);
self.titleLabel.frame = CGRectMake(0, 0.6*self.frame.size.height+(subviewOffset-0.45*self.frame.size.height)*(1-alpha), self.frame.size.width, self.frame.size.height*0.2);
self.subTitleLabel.frame = CGRectMake(0, 0.75*self.frame.size.height+(subviewOffset-0.45*self.frame.size.height)*(1-alpha), self.frame.size.width, self.frame.size.height*0.1);
}
Demo分享:
GitHub:https://github.com/ianisme/CoolNavi
打赏作者
如果这篇文章帮助了你,可以请作者喝罐可乐,以此激励作者创作更多!
6 评论
效果不错诶!
不错 哈哈
seo给人印象太差了
@ian 给别人的感觉就是你在做外链,不是在用心评价。
@ian 但是你看看最近在我博客留言的,基本都是推广的,楼下这位竟然无耻的留下了链接,幸亏我屏蔽了一部分
wow~好酷~
分享您的想法?
撰写评论