iOS中如何实现头部拉伸效果(ios,拉伸,移动开发)

主要涉及到导航栏透明度、图片拉伸、列表头部等。

• 导航栏透明度的实现。

• 列表拖动距离的监听，及图片放大的实现。
  

导航透明度的设置

添加系统导航栏的Category实现

声明部分：

@interfaceUINavigationBar(BackgroundColor)-(void)lt_setBackgroundColor:(UIColor*)color;@end

实现部分：

#import<objc/runtime.h>@implementationUINavigationBar(BackgroundColor)staticcharoverlayKey;-(UIView*)overlay{returnobjc_getAssociatedObject(self,&overlayKey);}-(void)setOverlay:(UIView*)overlay{objc_setAssociatedObject(self,&overlayKey,overlay,OBJC_ASSOCIATION_RETAIN_NONATOMIC);}-(void)lt_setBackgroundColor:(UIColor*)color{if(!self.overlay){[selfsetBackgroundImage:[UIImagenew]forBarMetrics:UIBarMetricsDefault];//insertanoverlayintotheviewhierarchyself.overlay=[[UIViewalloc]initWithFrame:CGRectMake(0,-20,[UIScreenmainScreen].bounds.size.width,self.bounds.size.height+20)];self.overlay.autoresizingMask=UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;[selfinsertSubview:self.overlayatIndex:0];}self.overlay.backgroundColor=color;}@end

监听列表拖动及实现图片放大

主要是监听滚动的距离（scrollViewDidScroll:方法）

#import"StretchViewController.h"#import"UINavigationBar+BackgroundColor.h"//背景图片的宽高比例#defineratio0.8@interfaceStretchViewController()<UITableViewDelegate,UITableViewDataSource>//可放大的背景图片@property(nonatomic,strong)UIImageView*bgView;//记录原始大小@property(assign)CGRectoriginalFrame;@property(nonatomic,strong)UITableView*tableView;@end@implementationStretchViewController-(void)viewWillAppear:(BOOL)animated{[superviewWillAppear:animated];//[self.navigationControllersetNavigationBarHidden:YESanimated:animated];//self.navigationController.navigationBar.tintColor=[UIColorwhiteColor];//self.navigationController.navigationBar.barTintColor=[UIColorclearColor];//self.navigationController.navigationBar.backgroundColor=[UIColorclearColor];//设置导航栏底部分割线为透明[self.navigationController.navigationBarsetShadowImage:[UIImagenew]];}-(void)viewDidLoad{[superviewDidLoad];//设置全透明[self.navigationController.navigationBarlt_setBackgroundColor:[[UIColorgreenColor]colorWithAlphaComponent:0]];//Doanyadditionalsetupafterloadingtheview.self.view.backgroundColor=[UIColorlightGrayColor];self.bgView=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,self.view.bounds.size.width,self.view.bounds.size.width*ratio)];self.bgView.image=[UIImageimageNamed:@"bg-mine"];self.originalFrame=self.bgView.frame;[self.viewaddSubview:self.bgView];self.tableView=[[UITableViewalloc]initWithFrame:CGRectMake(0,64,self.view.bounds.size.width,self.view.bounds.size.height-64)style:UITableViewStylePlain];self.tableView.backgroundColor=[UIColorclearColor];self.tableView.showsVerticalScrollIndicator=NO;self.tableView.delegate=self;self.tableView.dataSource=self;//1.contentInset//table.contentInset=UIEdgeInsetsMake(160,0,0,0);//2.heatViewUIView*headView=[[UIViewalloc]initWithFrame:CGRectMake(0,0,self.view.bounds.size.width,160)];headView.backgroundColor=[UIColorclearColor];self.tableView.tableHeaderView=headView;[self.viewaddSubview:self.tableView];}-(nonnullUITableViewCell*)tableView:(nonnullUITableView*)tableViewcellForRowAtIndexPath:(nonnullNSIndexPath*)indexPath{UITableViewCell*cell=[tableViewdequeueReusableCellWithIdentifier:@"cellIdentifier"];if(cell==nil){cell=[[UITableViewCellalloc]initWithStyle:UITableViewCellStyleValue1reuseIdentifier:@"cellIdentifier"];}cell.textLabel.text=@"测试数据";returncell;}-(NSInteger)tableView:(nonnullUITableView*)tableViewnumberOfRowsInSection:(NSInteger)section{return10;}-(void)scrollViewDidScroll:(UIScrollView*)scrollView{CGFloatyOffset=scrollView.contentOffset.y;//向上滑动，offset是增加的；向下滑动，是减少的if(yOffset<160){//当滑动到导航栏底部时CGFloatcolorAlpha=yOffset/160;//self.navigationController.navigationBar.backgroundColor=[[UIColorwhiteColor]colorWithAlphaComponent:colorAlpha];[self.navigationController.navigationBarlt_setBackgroundColor:[[UIColorwhiteColor]colorWithAlphaComponent:colorAlpha]];}else{//超过导航栏底部了[self.navigationController.navigationBarlt_setBackgroundColor:[UIColorwhiteColor]];}//往上滑动效果、处理放大效果if(yOffset>0){self.bgView.frame=({CGRectframe=self.bgView.frame;frame.origin.y=self.originalFrame.origin.y-yOffset;frame;});}else{//往下移动，放大效果self.bgView.frame=({CGRectframe=self.originalFrame;frame.size.height=self.originalFrame.size.height-yOffset;frame.size.width=frame.size.height/ratio;//frame.origin.x=self.originalFrame.origin.x-(frame.size.width-self.originalFrame.size.width)/2;frame;});}}@end

以上是对系统原生的导航栏进行透明度设置。

也可进行自定义视图设置为导航栏

效果如下：