(一) 布置UITableview
我们首先要通过设置UITableview的内容偏移 self.tableView.contentInset
来为图片视图留出位置,这里我们的图片高度暂定为280
const CGFloat contentInset = 280; @interface ViewController ()<UITableViewDelegate,UITableViewDataSource> @property (nonatomic, strong) UITableView *tableView; @property (nonatomic, strong) UIImageView *imageView; @end
简单地创建一个tableView
self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds]; _tableView.delegate = self; _tableView.dataSource = self; [self.view addSubview:_tableView]; self.tableView.contentInset = UIEdgeInsetsMake(contentInset , 0, 0, 0);
(二) 布置图片
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, - contentInset, self.view.bounds.size.width, contentInset)]; _imageView.image = [UIImage imageNamed:@"image01.jpg"]; [self.tableView addSubview:_imageView]; _imageView.contentMode = UIViewContentModeScaleAspectFill; _imageView.clipsToBounds = YES;
(三) 拖动事件的处理
我们都知道,UITableview属于可以滑动的控件,所以它的父类是UIScrollView,所以我们就可以在滑动事件中做出一些处理。
在滑动的时候,一旦判定是下拉状态,那么我们就要动态的改变图片的纵向位置和图片的高度(由于设置了contentMode,所以宽度自己会变化),最终实现所需要的效果。
代码如下
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint point = scrollView.contentOffset; if (point.y < - contentInset) { CGRect rect = self.imageView.frame; rect.origin.y = point.y; rect.size.height = - point.y; self.imageView.frame = rect; } }
由于contentInset预设置的大小不同,可能会出现图片先下拉再放大和立即放大的两种效果.