iOS开发中视图的下拉放大和上拉模糊的效果实现
这篇文章主要介绍了iOS开发中视图的下拉放大和上拉模糊的效果实现,本文以秘密App的效果作为示例进行讲解,需要的朋友可以参考下
把"秘密"的Cell效果整体视图都放到scrollView中,基本是和secretapp一模一样的效果了.
代码如下:(模糊效果的类就不写了,大家可以搜"UIImage+ImageEffects",还要导入Accelerate.framework)
1.MTSecretAppEffect.h
复制代码代码如下:
#import
@interfaceMTSecretAppEffect:NSObject
/
创建整体的scrollView,把headScrollView和tableView全部加载在上面,靠它来上下滑动,其余的滑动全部禁止
@returnmainScrollView
/
-(UIScrollView)createMainScrollView;
/
创建headScrollView
@returnheadScrollView
/
-(UIScrollView)createHeadScrollView;
/
创建头部的模糊view
@paramscrollviewheadScrollView
@returnblurImageView
/
-(UIImageView)createBlurImageViewOfView:(UIScrollView)scrollview;
/
在-(void)scrollViewDidScroll:(UIScrollView)scrollView中调用的方法
@paramscrollView
@parammainScrollView
@paramtableView
@paramheadScrollView
@paramblurImageView
/
-(void)scrollDidScrollView:(UIScrollView)scrollViewwithMainScrollView:(UIScrollView)mainScrollViewwithTableView:(UITableView)tableViewwithHeadScrollView:(UIScrollView)headScrollViewwithBlurImageView:(UIImageView)blurImageView;
@end
2.MTSecretAppEffect.m
复制代码代码如下:
#import"MTSecretAppEffect.h"
#import"UIImage+ImageEffects.h"
#import
#defineHEADER_HEIGHT200.0f
#defineHEADER_INIT_FRAMECGRectMake(0,0,320,HEADER_HEIGHT)
constCGFloatkBarHeight=50.0f;
constCGFloatkBackgroundParallexFactor=0.5f;
constCGFloatkBlurFadeInFactor=0.015f;
@implementationMTSecretAppEffect
//欠缺:调用者设置代理
-(UIScrollView)createMainScrollView{
//和Self.view同大小的底部ScrollView
UIScrollViewmainScrollView=[[UIScrollViewalloc]initWithFrame:[UIApplicationsharedApplication].keyWindow.frame];
mainScrollView.bounces=YES;
mainScrollView.alwaysBounceVertical=YES;
mainScrollView.contentSize=CGSizeZero;
mainScrollView.showsVerticalScrollIndicator=YES;
mainScrollView.scrollIndicatorInsets=UIEdgeInsetsMake(50.0f,0,0,0);
returnmainScrollView;
}
-(UIScrollView)createHeadScrollView{
UIScrollViewheadScrollView=[[UIScrollViewalloc]initWithFrame:HEADER_INIT_FRAME];
headScrollView.scrollEnabled=NO;
headScrollView.contentSize=CGSizeMake(320,1000);
returnheadScrollView;
}
-(UIImageView)createBlurImageViewOfView:(UIScrollView)scrollview{
UIGraphicsBeginImageContextWithOptions(scrollview.bounds.size,scrollview.opaque,0.0);
[scrollview.layerrenderInContext:UIGraphicsGetCurrentContext()];
UIImageimg=UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageViewblurImageView=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,320,HEADER_HEIGHT)];
blurImageView.image=[imgapplyBlurWithRadius:12tintColor:[UIColorcolorWithWhite:0.8alpha:0.4]saturationDeltaFactor:1.8maskImage:nil];
blurImageView.autoresizingMask=UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
blurImageView.alpha=0;
blurImageView.backgroundColor=[UIColorclearColor];
returnblurImageView;
}
-(void)scrollDidScrollView:(UIScrollView)scrollViewwithMainScrollView:(UIScrollView)mainScrollViewwithTableView:(UITableView)tableViewwithHeadScrollView:(UIScrollView)headScrollViewwithBlurImageView:(UIImageView)blurImageView{
CGFloaty=0.0f;
CGRectrect=HEADER_INIT_FRAME;
if(scrollView.contentOffset.y<0.0f){
//下拉变大效果
y=fabs(MIN(0.0f,mainScrollView.contentOffset.y));
headScrollView.frame=CGRectMake(CGRectGetMinX(rect)-y/2.0f,CGRectGetMinY(rect)-y,CGRectGetWidth(rect)+y,CGRectGetHeight(rect)+y);
}
else{
y=mainScrollView.contentOffset.y;
blurImageView.alpha=MIN(1,ykBlurFadeInFactor);
CGFloatbackgroundScrollViewLimit=headScrollView.frame.size.height-kBarHeight;
if(y>backgroundScrollViewLimit){
headScrollView.frame=(CGRect){.origin={0,y-headScrollView.frame.size.height+kBarHeight},.size={320,HEADER_HEIGHT}};
tableView.frame=(CGRect){.origin={0,CGRectGetMinY(headScrollView.frame)+CGRectGetHeight(headScrollView.frame)},.size=tableView.frame.size};
tableView.contentOffset=CGPointMake(0,y-backgroundScrollViewLimit);
CGFloatcontentOffsetY=-backgroundScrollViewLimitkBackgroundParallexFactor;
[headScrollViewsetContentOffset:(CGPoint){0,contentOffsetY}animated:NO];
}
else{
headScrollView.frame=rect;
tableView.frame=(CGRect){.origin={0,CGRectGetMinY(rect)+CGRectGetHeight(rect)},.size=tableView.frame.size};
[tableViewsetContentOffset:(CGPoint){0,0}animated:NO];
[headScrollViewsetContentOffset:CGPointMake(0,-ykBackgroundParallexFactor)animated:NO];
}
}
}
@end
3.main.m
复制代码代码如下:
#import"RootViewController.h"
#import"CommentCell.h"
#import"MTSecretAppEffect.h"
#defineHEADER_HEIGHT200.0f
@interfaceRootViewController()
@property(nonatomic,strong)MTSecretAppEffectsecretEffect;//secretApp效果对象
@property(nonatomic,strong)UIScrollViewmainScrollView;//与view相同大小的scrollView
@property(nonatomic,strong)UIScrollViewheadScrollView;//
@property(nonatomic,strong)UIImageViewblurImageView;//
@property(nonatomic,strong)UITableViewtableView;//
@end
@implementationRootViewController
-(void)viewDidLoad
{
[superviewDidLoad];
//0.创建SecretAppeffect效果对象
self.secretEffect=[[MTSecretAppEffectalloc]init];
//1.主底部scrollView
self.mainScrollView=[self.secretEffectcreateMainScrollView];
self.mainScrollView.delegate=self;
self.view=self.mainScrollView;
//2.head背景View
self.headScrollView=[self.secretEffectcreateHeadScrollView];
//3.背景图片视图
UIImageViewimageView=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,320,HEADER_HEIGHT)];
imageView.image=[UIImageimageNamed:@"secret.png"];
imageView.autoresizingMask=UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
[self.headScrollViewaddSubview:imageView];
//4.模糊视图
_blurImageView=[self.secretEffectcreateBlurImageViewOfView:self.headScrollView];
[self.headScrollViewaddSubview:_blurImageView];
//5.tableView
self.tableView=[[UITableViewalloc]initWithFrame:CGRectMake(0,HEADER_HEIGHT,CGRectGetWidth(self.view.frame),CGRectGetHeight(self.view.frame)-50)style:UITableViewStylePlain];
self.tableView.scrollEnabled=NO;
self.tableView.delegate=self;
self.tableView.dataSource=self;
self.tableView.tableFooterView=[[UIViewalloc]initWithFrame:CGRectZero];
self.tableView.separatorColor=[UIColorclearColor];
//6.添加视图
[self.viewaddSubview:self.headScrollView];
[self.viewaddSubview:self.tableView];
//7.设置一下
self.mainScrollView.contentSize=CGSizeMake(320,self.tableView.contentSize.height+CGRectGetHeight(self.www.hunanwang.netheadScrollView.frame));
}
-(void)scrollViewDidScroll:(UIScrollView)scrollView{
//8.调用方法
[self.secretEffectscrollDidScrollView:scrollViewwithMainScrollView:self.mainScrollViewwithTableView:self.tableViewwithHeadScrollView:self.headScrollViewwithBlurImageView:self.blurImageView];
}
#pragmamark-隐藏状态栏
-(BOOL)prefersStatusBarHidden{
returnYES;
}
#pragmamark-UITableViewdataSource
-(NSInteger)numberOfSectionsInTableView:(UITableView)tableView{
return1;
}
-(NSInteger)tableView:(UITableView)tableViewnumberOfRowsInSection:(NSInteger)section{
return20;
}
-(CGFloat)tableView:(UITableView)tableViewheightForRowAtIndexPath:(NSIndexPath)indexPath{
return40;
}
-(UITableViewCell)tableView:(UITableView)tableViewcellForRowAtIndexPath:(NSIndexPath)indexPath{
CommentCellcell=[tableViewdequeueReusableCellWithIdentifier:[NSStringstringWithFormat:@"Cell%ld",indexPath.row]];
if(!cell){
cell=[[CommentCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:[NSStringstringWithFormat:@"Cell%ld",indexPath.row]];
}
cell.textLabel.text=[NSStringstringWithFormat:@"section=%ldrow=%ld",indexPath.section,indexPath.row];
returncell;
}
-(void)didReceiveMemoryWarning
{
[superdidReceiveMemoryWarning];
//Disposeofanyresourcesthatcanberecreated.
}
@end
效果图:
PPPPPPPPPPPPPPPPPPPPPP1
它主要效果:下拉头部视图放大,上拉视图模糊而且到一定位置固定不动,其他Cell可以继续上移.
封装的主要效果类:MTHeadEffect.m(.h文件省略,很简单的)
复制代码代码如下:
#import"MTHeadEffect.h"
#import
#import
//屏幕的物理宽度
#defineScreenWidth[UIScreenmainScreen].bounds.size.width
#defineHeadViewH40
CGFloatconstkImageOriginHight=200.f;
@implementationMTHeadEffect
+(void)viewDidScroll:(UIScrollView)tableViewwithHeadView:(UIImageView)headViewwww.visa158.comithBlur:(CGFloat)blur{
NSLog(@"y=%f",tableView.contentOffset.y);
if(tableView.contentOffset.y>kImageOriginHight-HeadViewH){
headView.frame=CGRectMake(0,-(kImageOriginHight-HeadViewH),ScreenWidth,kImageOriginHight);
[[UIApplicationsharedApplication].keyWindowaddSubview:headView];
}elseif((tableView.contentOffset.y0){
blur=(tableView.contentOffset.y)/500.0+0.45;
headView.image=[[UIImageimageNamed:@"2"]boxblurImageWithBlur:blur];
headView.frame=CGRectMake(0,0,ScreenWidth,kImageOriginHight);
[tableViewaddSubview:headView];
}elseif(tableView.contentOffset.y<=0){
//放大效果---x,y坐标的增量和宽度,高度的增量保持一致
CGFloatoffset=-tableView.contentOffset.y;
headView.frame=CGRectMake(-offset,-offset,ScreenWidth+offset2,kImageOriginHight+offset);
headView.image=[[UIImageimageNamed:@"2"]boxblurImageWithBlur:0.01];
}
}
@end
@implementationUIImage(BlurEffect)
//为高斯模糊效果封装的一个类目
-(UIImage)boxblurImageWithBlur:(CGFloat)blur{
NSDataimageData=UIImageJPEGRepresentation(self,1);//converttojpeg
UIImagedestImage=[UIImageimageWithData:imageData];
if(blur<0.f||blur>1.f){
blur=0.5f;
}
intboxSize=(int)(blur40);
boxSize=boxSize-(boxSize%2)+1;
CGImageRefimg=destImage.CGImage;
vImage_BufferinBuffer,outBuffer;
vImage_Errorerror;
voidvoidpixelBuffer;
//createvImage_BufferwithdatafromCGImageRef
CGDataProviderRefinProvider=CGImageGetDataProvider(img);
CFDataRefinBitmapData=CGDataProviderCopyData(inProvider);
inBuffer.width=CGImageGetWidth(img);
inBuffer.height=CGImageGetHeight(img);
inBuffer.rowBytes=CGImageGetBytesPerRow(img);
inBuffer.data=(void)CFDataGetBytePtr(inBitmapData);
//createvImage_Bufferforoutput
pixelBuffer=malloc(CGImageGetBytesPerRow(img)CGImageGetHeight(img));
if(pixelBuffer==NULL)
NSLog(@"Nopixelbuffer");
outBuffer.data=pixelBuffer;
outBuffer.width=CGImageGetWidth(img);
outBuffer.height=CGImageGetHeight(img);
outBuffer.rowBytes=CGImageGetBytesPerRow(img);
//Createathirdbufferforintermediateprocessing
voidvoidpixelBuffer2=malloc(CGImageGetBytesPerRow(img)CGImageGetHeight(img));
vImage_BufferoutBuffer2;
outBuffer2.data=pixelBuffer2;
outBuffer2.width=CGImageGetWidth(img);
outBuffer2.height=CGImageGetHeight(img);
outBuffer2.rowBytes=CGImageGetBytesPerRow(img);
//performconvolution
error=vImageBoxConvolve_ARGB8888(&inBuffer,&outBuffer2,NULL,0,0,boxSize,boxSize,NULL,kvImageEdgeExtend);
if(error){
NSLog(@"errorfromconvolution%ld",error);
}
error=vImageBoxConvolve_ARGB8888(&outBuffer2,&inBuffer,NULL,0,0,boxSize,boxSize,NULL,kvImageEdgeExtend);
if(error){
NSLog(@"errorfromconvolution%ld",error);
}
error=vImageBoxConvolve_ARGB8888(&inBuffer,&outBuffer,NULL,0,0,boxSize,boxSize,NULL,kvImageEdgeExtend);
if(error){
NSLog(@"errorfromconvolution%ld",error);
}
CGColorSpaceRefcolorSpace=CGColorSpaceCreateDeviceRGB();
CGContextRefctx=CGBitmapContextCreate(outBuffer.data,
outBuffer.width,
outBuffer.height,
8,
outBuffer.rowBytes,
colorSpace,
(CGBitmapInfo)kCGImageAlphaNoneSkipLast);
CGImageRefimageRef=CGBitmapContextCreateImage(ctx);
UIImagereturnImage=[UIImageimageWithCGImage:imageRef];
//cleanup
CGContextRelease(ctx);
CGColorSpaceRelease(colorSpace);
free(pixelBuffer);
free(pixelBuffer2);
CFRelease(inBitmapData);
CGImageRelease(imageRef);
returnreturnImage;
}
@end
@main.m
复制代码代码如下:
-(void)viewDidLoad
{
[superviewDidLoad];
//Doanyadditionalsetupafterloadingtheview.
//tableView
self.testTableView=[[UITableViewalloc]initWithFrame:CGRectMake(0,0,320,568)style:UITableViewStylePlain];
self.testTableView.delegate=self;
self.testTableView.dataSource=self;
[self.viewaddSubview:_testTableView];
/
隐藏状态栏效果
1.系统提供了2种动画,一种是偏移,一种是渐隐
2.在plist文件中将”Viewcontroller-basedstatusbarappearance”设置为“No”
/
[[UIApplicationsharedApplication]setStatusBarHidden:YESwithAnimation:UIStatusBarAnimationNone];
//headView不作为tableHeadView,而是覆盖在第一个Cell上
self.headView=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,320,200)];
self.headView.image=[[UIImageimageNamed:@"2"]boxblurImageWithBlur:0.01];
self.headView.contentMode=UIViewContentModeScaleAspectFill;//图片展示全高度
self.headView.clipsToBounds=YES;
[self.testTableViewaddSubview:self.headView];
}
#pragmamark-scrolldelegate头部视图效果方法
-(void)scrollViewDidScroll:(UIScrollView)scrollView
{
[MTHeadEffectviewDidScroll:scrollViewwithHeadView:self.headViewwithBlur:0.01];
}
-(NSInteger)numberOfSectionsInTableView:(UITableView)tableView{
return1;
}
-(NSInteger)tableView:(UITableView)tableViewnumberOfRowsInSection:(NSInteger)section{
return25;
}
-(CGFloat)tableView:(UITableView)tableViewheightForRowAtIndexPath:(NSIndexPath)indexPath{
if(indexPath.row==0){
return200;
}
return40;
}
-(UITableViewCell)tableView:(UITableView)tableViewcellForRowAtIndexPath:(NSIndexPath)indexPath{
staticNSStringcellIdentf=@"cell";
UITableViewCellcell=[tableViewdequeueReusableHeaderFooterViewWithIdentifier:cellIdentf];
if(!cell){
cell=[[UITableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:cellIdentf];
}
cell.textLabel.text=[NSStringstringWithFormat:@"section=%ldrow=%ld",indexPath.section,indexPath.row];
returncell;
}
效果图:额,不会制作gif动图,所以不太好演示,反正关键代码已经给出,大家可以自己去尝试.
第三方FXBlurView做法的关键代码:
复制代码代码如下:
-(void)createBlurView{
self.blurView=[[FXBlurViewalloc]initWithFrame:CGRectMake(0,0,ScreenWidth,kOriginHight)];
self.blurView.tintColor=[UIColorcolorWithRed:0green:0blue:0alpha:1];
self.blurView.blurRadius=1.0;
self.blurView.dynamic=YES;
self.blurView.alpha=0.0;
self.blurView.contentMode=UIViewContentModeBottom;
}
#pragmamark-scrolldelegate头部视图效果方法
-(void)scrollViewDidScroll:(UIScrollView)scrollView
{
if(scrollView.contentOffset.y>0){
self.blurView.alpha=1.0;
self.blurView.blurRadius=scrollView.contentOffset.y/4.0;
}
if(scrollView.contentOffset.y==0){
self.blurView.alpha=0.0;
}
if(scrollView.contentOffset.y<0){
CGFloatoffset=-scrollView.contentOffset.y;
self.blurView.alpha=0.0;
NSArrayindexPathArray=[self.testTableViewindexPathsForVisibleRows];
HMTBlurTableViewCellblurCell=(HMTBlurTableViewCell)[self.testTableViewcellForRowAtIndexPath:[indexPathArrayobjectAtIndex:0]];
blurCell.blurImageView.frame=CGRectMake(-offset,-offset,ScreenWidth+offset2,kOriginHight+offset);
}
}
|
|
