本文通过实例代码给大家介绍了ios实现简单的头部缩放功能。实现思路有头部视图，滚动视图，控制头部动画等多个示例代码块，大家可以参考下本文。
简单实现并集成一个头部缩放的功能，适用于uiscrollview以及其子类。
头部伴随模糊效果放大缩小，并在一定位置时悬停充当导航栏。这里提供实现思路，如有符合可直接使用。
效果如下图。
实现：
首先分解为两部分，一部分为头部视图，一部分为滚动视图。头部视图负责展示，滚动视图负责控制头部视图如何展示，比如放大和缩小。
一：头部视图
头部视图拆解为负责展示图片的uiimageview，负责模糊效果的uivisualeffectview，负责标题显示的uilabel，以及返回等功能按钮的uibutton。
进一步分析，模糊效果的视图应该和展示图片的视图做同样的处理，同样的缩放，为了更好的控制将其包装到一containview中。跟据滚动的位置改变containview的大小，模糊视图根据滚动的位置改变模糊的程度。标题视图在滚动视图到达一定位置时出现并停在那里。这里利用uiimageview的特性，改变它的contentmode为uiviewcontentmodescaleaspectfill，这样只用简单的改变图片视图的高度时就能营造放大缩小的效果了。
uiimageview部分代码
|
1
2
3
4
5
|
_blurimageview = [[uiimageview alloc] init];_blurimageview.clipstobounds = yes;_blurimageview.autoresizingmask = uiviewautoresizingflexibleheight | uiviewautoresizingflexiblewidth;_blurimageview.contentmode = uiviewcontentmodescaleaspectfill;[self addsubview:_blurimageview]; |
uivisualeffectview部分代码
|
1
2
3
4
5
|
uiblureffect *beffect = [uiblureffect effectwithstyle:uiblureffectstylelight]; _imageeffectview = [[uivisualeffectview alloc]initwitheffect:beffect]; _imageeffectview.alpha = 0;_imageeffectview.autoresizingmask = uiviewautoresizingflexibleheight | uiviewautoresizingflexiblewidth; [self addsubview:_imageeffectview]; |
二：滚动视图
滚动视图需要做的就是设置 contentinset ，让出一部分空间给头部视图。这里如果将头部视图直接加到滚动视图上，无法做到头部视图最后悬停在一定位置，因此直接加到和滚动视图同级就行。
示例代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
self.webview = [[wkwebview alloc] initwithframe:cgrectmake(0, 0, kwindowwidth, kwindowheight)]; self.webview.backgroundcolor = [uicolor clearcolor]; [self.view addsubview:self.webview]; nsurl * url = [nsurl urlwithstring:@"https://yongliangp.github.io/"]; nsmutableurlrequest *re = [nsmutableurlrequest requestwithurl:url]; [self.webview loadrequest:re]; //初始化header self.headerview.headerimage = [uiimage imagenamed:@"saber.jpeg"]; self.headerview.tittle = @"哈哈是个demo"; self.headerview.isshowleftbutton = yes; self.headerview.isshowrightbutton = yes; __weak typeof(self) weakself = self; self.headerview.leftclickblock = ^(uibutton *btn){ [weakself.navigationcontroller popviewcontrolleranimated:yes]; }; self.headerview.rightclickblock = ^(uibutton *btn){ nslog(@"点击了分享"); }; [self.webview.scrollview handlespringheadview:self.headerview]; |
三：控制头部动画
和其他的滚动视图做动画一样，实现滚动视图的代理方法scrollviewdidscroll，获取偏移量，然后根据一定的规则做动画，这里为了解耦，也为了复用，使用了在scrollview的分类中监听scrollview的contentoffset方法去实现动画控制。
首先确定两个临界点： 视图的初始高度 悬停的高度。
示例代码(简单控制)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
- (void)yl_scrollviewdidscroll:(uiscrollview *)scrollview{ cgfloat offsety = scrollview.contentoffset.y; if (offsety>=-knavheight) { offsety=-knavheight; if (self.headerview.frame.size.height!=knavheight) { self.headerview.frame = cgrectmake(0, 0, self.headerview.bounds.size.width, knavheight); [uiview animatewithduration:0.25 animations:^{ self.titlelabel.frame = cgrectmake(35, 20, self.bounds.size.width-35*2, 44); self.titlelabel.alpha = 1; }]; } }else { self.headerview.frame = cgrectmake(0, 0, self.headerview.bounds.size.width, -offsety); if (self.titlelabel.alpha!=0) { [uiview animatewithduration:0.25 animations:^{ self.titlelabel.frame = cgrectmake(35, 40, self.bounds.size.width-35*2, 44); self.titlelabel.alpha = 0; }]; } } cgfloat alpha ; if (self.headerview.frame.size.height>=kwindowwidth/2) { alpha = 0; }else { alpha = 1-((self.headerview.frame.size.height-knavheight)/(kwindowwidth/2-knavheight)); } if (alpha>=0&α<=1) { self.headereffectview.alpha = alpha; }} |
最重要的，记得在控制器dealloc时移除监听者
最重要的，记得在控制器dealloc时移除监听者
最重要的，记得在控制器dealloc时移除监听者
或者你有更好的方式移除监听者请告诉我。
照例放demo，仅供参考，如有问题请留言
demo地址：
https://github.com/yongliangp/ylspringheader 用心良苦请 star
总结
以上所述是小编给大家介绍的ios实现简单的头部缩放功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：http://www.cocoachina.com/ios/20180821/24644.html
