一般我们看到的下拉放大顶部视图，很多是直接加载tableView或者collectionView上的，(这里以tableView举例)只要一向下拉，视图立马就会产生放大效果。大致原理是先设置tableView的内容偏移，假如向下偏移100，那么实际内容就会从距离向下100的位置开始展示，而图片就放在偏移区，通过设置图片的y值为-100就可以了。然后通过滚动视图的代理方法，更改frame。
而我想达到的是刚开始下拉时并不产生放大效果，而是展示图片的更多信息，当达到理想的高度之后，再对图片进行缩放。例如支付宝的个人主页那样的效果，你可以根据后面的路径看一下效果：路径：支付宝->我的->个人中心->个人主页
而一般的所使用的方法不管是上面说的那样，还是直接利用tableHeadView都达不到我想要的效果。
向下拉可以看到更多的信息，显然，tableView的内容不是同级的。因为如果是同级的话，会跟着一起滚动。。。
我找了好半天，才发现竟是放在tableView的背景视图上最为合适。给大家分享一下，下面就开始详细的教程。
1. 先定义所需要的属性
//下面这两个宏定义一个是顶部视图高度 一个是图片容器原始的Rect 可以看出 一开始想只显示一半的图片
#define kTopViewHeight 100.0
#define orignalRect CGRectMake(0, 0, self.tableView.frame.size.width, 2 * kTopViewHeight)
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate>
@property (nonatomic, strong)UITableView *tableView;//表格
@property (nonatomic, strong)NSArray *dataSource;//数据源
@property (nonatomic, strong)UIImageView *imageView;//图片
@property (nonatomic, strong)UIView *backView;//背景视图
@end
2.初始化相关内容
这里我写到方法里了，后面都有具体的实现
- (void)viewDidLoad {
[super viewDidLoad];
//初始化表格视图
[self initTableView];
//初始化数据源
[self initDataSource];
//初始化图片资源
[self initImageView];
}
初始化表格
注意：表格 视图 的背景视图 不管多大，只要设置了，都会充满整个tableView 因此我只new了一个，并未有设置大小。以下是引用官方原话
the background view will be automatically resized to track the size of the table view. this will be placed as a subview of the table view behind all cells and headers/footers. default may be non-nil for some devices.
-(void)initTableView{
self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
self.tableView.backgroundColor = [UIColor clearColor];
self.tableView.dataSource = self;
self.tableView.delegate = self;
self.tableView.tableFooterView = [UIView new];
//这一步还是要有的，内容从kTopViewHeight位置开始，而不是顶满整个tableView
self.tableView.contentInset = UIEdgeInsetsMake(kTopViewHeight, 0, 0, 0);
self.tableView.scrollIndicatorInsets = self.tableView.contentInset;
//直接new一个
UIView *backView = [UIView new];
self.tableView.backgroundView = backView;
backView.backgroundColor = [UIColor whiteColor];
self.backView = backView;
[self.view addSubview:self.tableView];
}
初始化数据源
这里造了个假数据
-(void)initDataSource{
self.dataSource = @[@{@"name1":@"name1vlaue"},
@{@"name2":@"name2vlaue"},
@{@"name3":@"name3vlaue"},
@{@"name4":@"name4vlaue"},
@{@"name5":@"name5vlaue"},
@{@"name6":@"name6vlaue"},
@{@"name7":@"name7vlaue"},
@{@"name8":@"name8vlaue"}];
}
初始化图片资源
-(void)initImageView{
self.imageView = [[UIImageView alloc]initWithFrame:orignalRect];
self.imageView.image = [UIImage imageNamed:@"timg.jpeg"];
self.imageView.contentMode = UIViewContentModeScaleAspectFill;
[self.backView addSubview:self.imageView];
}
这里给大家一个图片资源
3.实现代理方法
CGPoint point = scrollView.contentOffset;
//我这里是达到图片容器尺寸开始滚动的，我设置的就是2倍高
if (point.y < -2.0 * kTopViewHeight) {
CGRect rect = self.imageView.frame;
rect.size.height = -point.y;
self.imageView.frame = rect;
}else{//如果不满足，我这里做了一个判断，如果没回到原来的位置大小，仍然重置了frame。因此测试过程中，只写上面的代码，图片拉伸反弹回去不能正确显示原来的内容区域
if (!CGRectEqualToRect(self.imageView.frame, orignalRect)) {
self.imageView.frame = orignalRect;
}
}
}```
###4.总结
1.将图片放在tableView 的背景视图上
2.图片的显示模式按比例填充
3.实现滚动视图的代理方法，改变frame
****
其他非主要代码，表格的代理方法
(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.dataSource.count;
}(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (!cell) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:@"cell"];
}
NSDictionary *dict = self.dataSource[indexPath.row];
cell.textLabel.text = dict.allKeys.firstObject;
cell.detailTextLabel.text = dict.allValues.firstObject;
return cell;
}
