欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS实现简单的头部缩放功能

程序员文章站 2022-06-23 20:58:46
本文通过实例代码给大家介绍了ios实现简单的头部缩放功能。实现思路有头部视图,滚动视图,控制头部动画等多个示例代码块,大家可以参考下本文。 简单实现并集成一个头部缩放的功...

本文通过实例代码给大家介绍了ios实现简单的头部缩放功能。实现思路有头部视图,滚动视图,控制头部动画等多个示例代码块,大家可以参考下本文。

简单实现并集成一个头部缩放的功能,适用于uiscrollview以及其子类。

头部伴随模糊效果放大缩小,并在一定位置时悬停充当导航栏。这里提供实现思路,如有符合可直接使用。

效果如下图。

iOS实现简单的头部缩放功能 

实现:

首先分解为两部分,一部分为头部视图,一部分为滚动视图。头部视图负责展示,滚动视图负责控制头部视图如何展示,比如放大和缩小。

一:头部视图

头部视图拆解为负责展示图片的uiimageview,负责模糊效果的uivisualeffectview,负责标题显示的uilabel,以及返回等功能按钮的uibutton。

进一步分析,模糊效果的视图应该和展示图片的视图做同样的处理,同样的缩放,为了更好的控制将其包装到一containview中。跟据滚动的位置改变containview的大小,模糊视图根据滚动的位置改变模糊的程度。标题视图在滚动视图到达一定位置时出现并停在那里。这里利用uiimageview的特性,改变它的contentmode为uiviewcontentmodescaleaspectfill,这样只用简单的改变图片视图的高度时就能营造放大缩小的效果了。

uiimageview部分代码

_blurimageview = [[uiimageview alloc] init];
_blurimageview.clipstobounds = yes;
_blurimageview.autoresizingmask = uiviewautoresizingflexibleheight | uiviewautoresizingflexiblewidth;
_blurimageview.contentmode = uiviewcontentmodescaleaspectfill;
[self addsubview:_blurimageview];

uivisualeffectview部分代码

uiblureffect *beffect = [uiblureffect effectwithstyle:uiblureffectstylelight];
 _imageeffectview = [[uivisualeffectview alloc]initwitheffect:beffect];
 _imageeffectview.alpha = 0;
_imageeffectview.autoresizingmask = uiviewautoresizingflexibleheight | uiviewautoresizingflexiblewidth;
 [self addsubview:_imageeffectview];

二:滚动视图

滚动视图需要做的就是设置 contentinset ,让出一部分空间给头部视图。这里如果将头部视图直接加到滚动视图上,无法做到头部视图最后悬停在一定位置,因此直接加到和滚动视图同级就行。

示例代码

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方法去实现动画控制。

首先确定两个临界点: 视图的初始高度 悬停的高度。

示例代码(简单控制)

- (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实现简单的头部缩放功能,希望对大家有所帮助