IOS implements simple head zooming

Time:2019-9-21

This article introduces the simple scaling function of iOS through the example code. The idea of implementation includes head view, scroll view, control of head animation and other sample code blocks, you can refer to the following article.

Simply implement and integrate a header zoom function for UIScrollView and its subclasses.

Head with blurring effect enlarged and reduced, and hovered in a certain position as a navigation bar. Here we provide the idea of implementation, if there is conformity, it can be used directly.

The effect is as follows.

 

Realization:

Firstly, it is divided into two parts, one is the head view and the other is the rolling view. Head view is responsible for display, while scroll view is responsible for controlling how the head view is displayed, such as zooming in and out.

First: Head View

Head view is disassembled into UI Image View for displaying pictures, UI Visual Effect View for blurring effects, UI Label for displaying titles, and UIButton for returning function buttons.

Further analysis shows that the blurred view should do the same processing and zooming as the view showing the picture, and wrap it in containView for better control. The size of containView is changed according to the position of scroll, and the degree of blur is changed according to the position of scroll. The Title view appears and stops when the scrolling view reaches a certain position. Using the features of UIImageView, we change its content mode to UIView Content Model Scale AspectFill, so that we can create zoom-in and zoom-out effect by simply changing the height of the picture view.

UIImageView Part Code


_blurImageView = [[UIImageView alloc] init];
_blurImageView.clipsToBounds = YES;
_blurImageView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
_blurImageView.contentMode = UIViewContentModeScaleAspectFill;
[self addSubview:_blurImageView];

Part of UIVisual EffectView Code


UIBlurEffect *beffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
 _imageEffectView = [[UIVisualEffectView alloc]initWithEffect:beffect];
 _imageEffectView.alpha = 0;
_imageEffectView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
 [self addSubview:_imageEffectView];

2: Scroll View

What the scrolling view needs to do is to set up the content Inset to give a portion of the space to the head view. If we add the head view directly to the scrolling view, we can’t make the head view hover in a certain position at last, so we can add it directly to the same level as the scrolling view.

Sample code

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];
  // Initialize header
  self.headerView.headerImage = [UIImage imageNamed:@"saber.jpeg"];
  Self. headerView. tittle = @ "Haha is a 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 (@ "Click Share");
  };
  [self.webView.scrollView handleSpringHeadView:self.headerView];

Third: Control head animation

Like other scrollView animation methods, scrollViewDidScroll, the proxy method of scrollView, obtains the offset, and then animates according to certain rules. In order to decouple and reuse, the content Offset method of listening to scrollView in the classification of scrollView is used to realize animation control.

Firstly, two critical points are determined: the initial height of the view hovering height.

Sample code (simple control)


- (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;
  }
}

Most importantly, remember to remove the listener when dealloc is the controller
Most importantly, remember to remove the listener when dealloc is the controller
Most importantly, remember to remove the listener when dealloc is the controller

Or if you have a better way to remove the listener, please let me know.

Demo as usual, for reference only. If you have any questions, please leave a message.

Demo address:

Https://github.com/yongliangP/YLSpringHeader

summary

Above mentioned is the iOS implementation of simple head zooming function introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message for me, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.