iOS 类似QQ空间表视图下拉头部视图放大效果实现
2015-07-10 09:54
519 查看
UITableView 是 UIScrollView 的子类。
所以 UIScrollView 的代理方法,在UITableView 上同样能够得到适用。
既然如此那么我们就能够知道,在表格下拉的过程中,需要让头部的图片能够有稍微放大的效果出现,我们可以根据滚动视图滚动监听事件,通过获取表格下拉的拉伸量,从而去改变图片的大小即可!
所以:
以下是效果实现的代码:
效果图显示:
关于:
iOS 关于滚动视图contentSize、contentOffset、contentInset 设定以及用法,可以到此查看 滚动视图contentSize、contentOffset、contentInset
Demo 下载:demo 点此下载
所以 UIScrollView 的代理方法,在UITableView 上同样能够得到适用。
既然如此那么我们就能够知道,在表格下拉的过程中,需要让头部的图片能够有稍微放大的效果出现,我们可以根据滚动视图滚动监听事件,通过获取表格下拉的拉伸量,从而去改变图片的大小即可!
所以:
/** * 关键处理:通过滚动视图获取到滚动偏移量从而去改变图片的变化 */
以下是效果实现的代码:
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate> @property(nonatomic,strong)UIImageView *headImageView;//头部图片 @property(nonatomic,strong)UITableView *tableView;//列表 @property(nonatomic,strong)NSMutableArray *infoArray;//数据源数组 @end //屏幕宽、高 宏定义 #define IPHONE_W ([UIScreen mainScreen].bounds.size.width) #define IPHONE_H ([UIScreen mainScreen].bounds.size.height) @implementation ViewController static CGFloat kImageOriginHight =300; - (void)viewDidLoad { [super viewDidLoad]; //将视图添加到界面上 [self.view addSubview:self.tableView]; [self.tableView addSubview:self.headImageView]; } #pragma mark -- 滚动视图的代理方法 - (void)scrollViewDidScroll:(UIScrollView*)scrollView{ /** * 关键处理:通过滚动视图获取到滚动偏移量从而去改变图片的变化 */ //获取滚动视图y值的偏移量 CGFloat yOffset = scrollView.contentOffset.y; NSLog(@"yOffset===%f",yOffset); CGFloat xOffset = (yOffset +kImageOriginHight)/2; if(yOffset < -kImageOriginHight) { CGRect f =self.headImageView.frame; f.origin.y= yOffset ; f.size.height= -yOffset; f.origin.x= xOffset; //int abs(int i); // 处理int类型的取绝对值 //double fabs(double i); //处理double类型的取绝对值 //float fabsf(float i); //处理float类型的取绝对值 f.size.width=IPHONE_W + fabs(xOffset)*2; self.headImageView.frame= f; } } #pragma mark -- 表视图代理 -(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath{ return 44; } -(NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section{ return self.infoArray.count; } -(UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath{ static NSString *identify =@"MyCellIndifer"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identify]; if (!cell) { cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identify]; } cell.textLabel.text= [self.infoArray objectAtIndex:indexPath.row]; return cell; } #pragma mark -- get 初始化操作 -(UITableView *)tableView { if (_tableView == nil) { _tableView= [[UITableView alloc]initWithFrame:CGRectMake(0,0,IPHONE_W,IPHONE_H)]; _tableView.delegate=self; _tableView.dataSource=self; _tableView.backgroundColor= [UIColor lightGrayColor]; //内容由kImageOriginHight 处开始显示。 _tableView.contentInset=UIEdgeInsetsMake(kImageOriginHight,0,0,0); } return _tableView; } -(NSMutableArray *)infoArray { if (_infoArray == nil) { _infoArray = [[NSMutableArray alloc]init]; for (int i=0; i<40; i++) { [_infoArray addObject:@"这是一个测试!"]; } } return _infoArray; } -(UIImageView *)headImageView { if (_headImageView == nil) { _headImageView= [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"111"]]; _headImageView.frame=CGRectMake(0, -kImageOriginHight,IPHONE_W,kImageOriginHight); } return _headImageView; }
效果图显示:
关于:
iOS 关于滚动视图contentSize、contentOffset、contentInset 设定以及用法,可以到此查看 滚动视图contentSize、contentOffset、contentInset
Demo 下载:demo 点此下载
相关文章推荐
- iOS 开发中问题 ——使用xib拖拽控件操作其约束并添加动画没有效果的问题
- iOS编程 界面布局 纯代码 VFL编写和添加
- iOS 8 模拟器上设置中文输入
- IOS下获取时间、手机系统时区以及获取时间间隔
- IOS图片压缩上传服务器终极解决方案
- ld: -pie can only be used when targeting iOS 4.2 or later clang: error: linker command failed with e
- iOS开发 替换NSLog打印设置
- ld: -pie can only be used when targeting iOS 4.2 or later clang: error: linker command failed with e
- iOS开发之控件ContentMode代码改变填充模式小结
- IOS多线程基本使用
- IOS design patterns
- ios 判断是qq,银行卡,手机号等等公用的方法
- iOS多工程协同开发
- iOS中MRC和ARC混编
- iOS基础(c)—指针
- 汉语字典或者词典的简单的ios小demo
- iOS 多线程技术由浅深入(学习笔记)
- 苹果开发 笔记(46)圆角
- iOS 开发怎么入门?2
- iOS 开发中 SIGPIPE信号的分析跟处理