效果图入下:
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);
}