文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-06-03 12:12

关注

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

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

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

效果如下图。

 

实现:

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

一:头部视图

头部视图拆解为负责展示图片的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实现简单的头部缩放功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程网网站的支持!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯