其实这个效果非常效果,简单介绍下步骤:
- 创建UITableView
- 创建表格区头,并在HeadView上添加一张UIImageView
- 实现滑动视图的滑动代理方法,根据scrollView.contentOffset,判断是否为向下拖拽,改变UIImageView的frame
- 创建UITableView,设置代理,遵守协议,并且实现对应代理方法。
UITableView * tb = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, KScreenWidth, KScreenHeight) style:UITableViewStylePlain];
tb.delegate = self;
tb.dataSource = self;
[self.view addSubview:tb];
实现代理方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
{
return 10;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (!cell) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
}
cell.textLabel.text = [NSString stringWithFormat:@"第%ld行",(long)indexPath.row];
return cell;
}
2.创建headView,并添加UIImageView
// 创建区头view
UIView * headView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, KScreenHeight, KHeight)];
headView.backgroundColor = [UIColor whiteColor];
//在headView上,添加图片视图
self.myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, KScreenWidth, KHeight)];
self.myImageView.image = [UIImage imageNamed:@"girl"];
[headView addSubview:self.myImageView];
// 把创建的headView赋值给tableHeaderView
tb.tableHeaderView = headView;
3.实现缩放效果
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offset = scrollView.contentOffset.y;
if (offset<0) {//表格回到正常状态下,继续往下拽
// ABS(offsetY) 绝对值
CGFloat totalFloat = KHeight + ABS(offset);
CGFloat f = totalFloat/KHeight;
//-(KScreenWidth*f-KScreenWidth)/2 不除以2感觉像是单方向缩放
self.myImageView.frame = CGRectMake(-(f*KScreenWidth - KScreenWidth)/2, offset, f*KScreenWidth, totalFloat);
}
}
代码简单,还是提供下git地址:
表格下拉实现区头缩放效果
网友评论