ios下拉放大顶部视图高级教程

Simulator Screen Shot 2017年3月23日 上午12.12.44.png

一般我们看到的下拉放大顶部视图，很多是直接加载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];
    
}

这里给大家一个图片资源

timg.jpeg

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;
  }