首页 > 代码库 > iOS开发之剖析"秘密"App内容页面效果
iOS开发之剖析"秘密"App内容页面效果
最近在玩"秘密",发现点击主界面的Cell进去后的页面效果不错,就写了个Demo来演示下.
它主要效果:下拉头部视图放大,上拉视图模糊而且到一定位置固定不动,其他Cell可以继续上移.
@封装的主要效果类:MTHeadEffect.m(.h文件省略,很简单的)
#import "MTHeadEffect.h" #import <QuartzCore/QuartzCore.h> #import <Accelerate/Accelerate.h> // 屏幕的物理宽度 #define ScreenWidth [UIScreen mainScreen].bounds.size.width #define HeadViewH 40 CGFloat const kImageOriginHight = 200.f; @implementation MTHeadEffect + (void)viewDidScroll:(UIScrollView *)tableView withHeadView:(UIImageView *)headView withBlur:(CGFloat)blur{ NSLog(@"y = %f",tableView.contentOffset.y); if (tableView.contentOffset.y > kImageOriginHight - HeadViewH) { headView.frame = CGRectMake(0, -(kImageOriginHight - HeadViewH), ScreenWidth, kImageOriginHight); [[UIApplication sharedApplication].keyWindow addSubview:headView]; }else if ((tableView.contentOffset.y < kImageOriginHight - HeadViewH) && tableView.contentOffset.y > 0){ blur = (tableView.contentOffset.y) / 500.0 + 0.45; headView.image = [[UIImage imageNamed:@"2"] boxblurImageWithBlur:blur]; headView.frame = CGRectMake(0, 0, ScreenWidth, kImageOriginHight); [tableView addSubview:headView]; }else if (tableView.contentOffset.y <= 0){ // 放大效果---x,y坐标的增量和宽度,高度的增量保持一致 CGFloat offset = -tableView.contentOffset.y; headView.frame = CGRectMake(-offset,-offset, ScreenWidth+ offset * 2, kImageOriginHight + offset); headView.image = [[UIImage imageNamed:@"2"] boxblurImageWithBlur:0.01]; } } @end @implementation UIImage (BlurEffect) // 为高斯模糊效果封装的一个类目 -(UIImage *)boxblurImageWithBlur:(CGFloat)blur { NSData *imageData = UIImageJPEGRepresentation(self, 1); // convert to jpeg UIImage* destImage = [UIImage imageWithData:imageData]; if (blur < 0.f || blur > 1.f) { blur = 0.5f; } int boxSize = (int)(blur * 40); boxSize = boxSize - (boxSize % 2) + 1; CGImageRef img = destImage.CGImage; vImage_Buffer inBuffer, outBuffer; vImage_Error error; void *pixelBuffer; //create vImage_Buffer with data from CGImageRef CGDataProviderRef inProvider = CGImageGetDataProvider(img); CFDataRef inBitmapData = CGDataProviderCopyData(inProvider); inBuffer.width = CGImageGetWidth(img); inBuffer.height = CGImageGetHeight(img); inBuffer.rowBytes = CGImageGetBytesPerRow(img); inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData); //create vImage_Buffer for output 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); // Create a third buffer for intermediate processing void *pixelBuffer2 = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img)); vImage_Buffer outBuffer2; outBuffer2.data = pixelBuffer2; outBuffer2.width = CGImageGetWidth(img); outBuffer2.height = CGImageGetHeight(img); outBuffer2.rowBytes = CGImageGetBytesPerRow(img); //perform convolution error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer2, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend); if (error) { NSLog(@"error from convolution %ld", error); } error = vImageBoxConvolve_ARGB8888(&outBuffer2, &inBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend); if (error) { NSLog(@"error from convolution %ld", error); } 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, (CGBitmapInfo)kCGImageAlphaNoneSkipLast); CGImageRef imageRef = CGBitmapContextCreateImage (ctx); UIImage *returnImage = [UIImage imageWithCGImage:imageRef]; //clean up CGContextRelease(ctx); CGColorSpaceRelease(colorSpace); free(pixelBuffer); free(pixelBuffer2); CFRelease(inBitmapData); CGImageRelease(imageRef); return returnImage; } @end
@main.m
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // tableView self.testTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 568) style:UITableViewStylePlain]; self.testTableView.delegate = self; self.testTableView.dataSource = self; [self.view addSubview:_testTableView]; /** * 隐藏状态栏效果 * 1.系统提供了2种动画,一种是偏移,一种是渐隐 * 2.在plist文件中将”View controller-based status bar appearance” 设置为 “No” */ [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone]; // headView不作为tableHeadView,而是覆盖在第一个Cell上 self.headView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 200)]; self.headView.image = [[UIImage imageNamed:@"2"] boxblurImageWithBlur:0.01]; self.headView.contentMode = UIViewContentModeScaleAspectFill; // 图片展示全高度 self.headView.clipsToBounds = YES; [self.testTableView addSubview:self.headView]; } #pragma mark - scroll delegate 头部视图效果方法 -(void)scrollViewDidScroll:(UIScrollView *)scrollView { [MTHeadEffect viewDidScroll:scrollView withHeadView:self.headView withBlur:0.01]; } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return 25; } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ if (indexPath.row == 0) { return 200; } return 40; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *cellIdentf = @"cell"; UITableViewCell *cell = [tableView dequeueReusableHeaderFooterViewWithIdentifier:cellIdentf]; if (!cell) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentf]; } cell.textLabel.text = [NSString stringWithFormat:@"section = %ld row = %ld",indexPath.section,indexPath.row]; return cell; }
@效果图:额,不会制作gif动图,所以不太好演示,反正关键代码已经给出,大家可以自己去尝试.
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。