效果图入下:

11.gif

一:实现思路如下:

在界面上主要分为一下几个部分;顶部放一个imageview,图片上面进行模糊化的处理;图片上面放上一个小型的imageview和小型的label;整个下面部分使用scrollview(背景使用红色);随着scrollview向下或者向上拉伸,根据scrollView.contentOffset.y的值的变化对上面的几个控件进行frame的改变

二:准备工作

<1>:添加系统自带的第三方的框架Accelerate.framework,实现对图片进行模糊化处理的方法

// blur的值越大图像就越模糊
- (UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur
{
    if (blur < 0.f || blur > 1.f) {
        blur = 0.5f;
    }
    int boxSize = (int)(blur * 40);
    boxSize = boxSize - (boxSize % 2) + 1;
    CGImageRef img = image.CGImage;
    vImage_Buffer inBuffer, outBuffer;
    vImage_Error error;
    void *pixelBuffer;
    //从CGImage中获取数据
    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);
    //设置从CGImage获取对象的属性
    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);
    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);
    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
    if(pixelBuffer == NULL)
        NSLog(@"No pixelbuffer");
    outBuffer.data = pixelBuffer;
    outBuffer.width = CGImageGetWidth(img);
    outBuffer.height = CGImageGetHeight(img);
    outBuffer.rowBytes = CGImageGetBytesPerRow(img);
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
    if (error) {
        NSLog(@"error from convolution %ld", error);
    }
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef ctx = CGBitmapContextCreate( outBuffer.data, outBuffer.width, outBuffer.height, 8, outBuffer.rowBytes, colorSpace, kCGImageAlphaNoneSkipLast);
    CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
    UIImage *returnImage = [UIImage imageWithCGImage:imageRef];
    //clean up CGContextRelease(ctx);
    CGColorSpaceRelease(colorSpace);
    free(pixelBuffer);
    CFRelease(inBitmapData);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(imageRef);
    return returnImage;
}

二:基本的布局画面的实现

- (void)setupContentView {
    
    NSAssert(self.headerImgHeight >= self.iconHeight && self.iconHeight > 0, @"图片高度应当大于头像高度，头像高度应当大于零");
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    NSLog(@"%@",NSStringFromCGRect(self.frame));

    // 不能有背景颜色
     //  scrollView.backgroundColor = [UIColor clearColor];
    scrollView.delegate = self;
    self.scrollView = scrollView;
    self.scrollView.alwaysBounceVertical = YES;
    self.scrollView.decelerationRate = 0.2;
    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.headerImgHeight)];
    /*
     UIViewContentModeScaleToFill,
     UIViewContentModeScaleAspectFit,
     UIViewContentModeScaleAspectFill,
     UIViewContentModeRedraw,
     UIViewContentModeCenter,
     UIViewContentModeTop,
     UIViewContentModeBottom,
     UIViewContentModeLeft,
     UIViewContentModeRight,
     UIViewContentModeTopLeft,
     UIViewContentModeTopRight,
     UIViewContentModeBottomLeft,
     UIViewContentModeBottomRight,
     */
    
    /*  ---------------------------------模糊图片imageview的布局 -----------------------------------*/
    self.imageView.contentMode = UIViewContentModeScaleAspectFill;
    self.scale =  self.imageView.frame.size.width / self.imageView.frame.size.height;
    UIImage *image = [UIImage imageNamed:@"1.jpg"];
    // 20 左右R  模糊图片
    self.imageView.image = [self boxblurImage:image withBlurNumber:0.3];
    
    /*  ---------------------------------icon的布局 -----------------------------------*/
    UIImageView *icon = [[UIImageView alloc] initWithFrame:CGRectMake((self.frame.size.width - self.iconHeight) / 2, (self.headerImgHeight - self.iconHeight) / 2, self.iconHeight, self.iconHeight)];
    
    icon.backgroundColor = [UIColor yellowColor];
    NSLog(@"%@",NSStringFromCGRect(icon.frame));
    
    icon.image = [UIImage imageNamed:@"1.jpg"];
    icon.layer.cornerRadius = self.iconHeight * 0.5;
    icon.clipsToBounds = YES;
    self.icon = icon;
    
/*  ---------------------------------name的布局 -----------------------------------*/
    UILabel *name = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(icon.frame) + 10, self.frame.size.width, 20)];
  
    name.text = (self.name ? self.name : @"zhxx");
    name.textAlignment = NSTextAlignmentCenter;
    name.textColor = [UIColor whiteColor];
      self.label = name;
    
  /*  ---------------------------------oterView的布局 -----------------------------------*/
    UIView *otherVIew = [[UIView alloc] initWithFrame:CGRectMake(0, self.headerImgHeight, self.frame.size.width, self.frame.size.height - self.headerImgHeight)];
    
    otherVIew.backgroundColor = [UIColor redColor];
    self.oterView = otherVIew;
 
    // 注意添加顺序
    
    [self addSubview:_imageView];
    [self addSubview:scrollView];
    [scrollView addSubview:_oterView];
    [scrollView addSubview:icon];
    [scrollView addSubview:name];

}

四:根据scrollView.contentOffset.y的实现图片的拉伸和缩放效果

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CGFloat offsetY = scrollView.contentOffset.y;
    
    NSLog(@"scrollView.contentOffset.y = %f",scrollView.contentOffset.y);
    
    if (scrollView.contentOffset.y < 0) {
        // 高度宽度同时拉伸 从中心放大,这里的参数1.5 是可以自己调整的
        CGFloat imgH = self.headerImgHeight - scrollView.contentOffset.y * 1.5;
        CGFloat imgW = imgH * self.scale;
        self.imageView.frame = CGRectMake(scrollView.contentOffset.y * self.scale,0, imgW,imgH);
        
        CGFloat iconOriginalX = (self.frame.size.width - self.iconHeight) / 2;
        CGFloat iconOriginalY = (self.headerImgHeight - self.iconHeight) / 2;
        
        self.icon.frame = CGRectMake(iconOriginalX + offsetY * changeRate, iconOriginalY + offsetY * changeRate * 2, self.iconHeight - changeRate * offsetY * 2, self.iconHeight - changeRate * offsetY * 2);
        self.icon.layer.cornerRadius = self.icon.frame.size.width * 0.5;
        self.icon.clipsToBounds = YES;
        
        self.label.frame = CGRectMake(self.label.frame.origin.x, CGRectGetMaxY(self.icon.frame) + 10, self.label.frame.size.width, self.label.frame.size.height);
        
    } else {
        // 只拉伸高度
        self.imageView.frame = CGRectMake(0, 0, self.imageView.frame.size.width, 200 - scrollView.contentOffset.y);
    }

    NSLog(@"%0.0f",scrollView.contentOffset.y);
}