版本记录

前言

很多的APP个人中心都有自己的特点，但是其中有一种很经典的形式，就是顶部的封面图是可以随着向下拖动视图出现拉伸放大外扩的效果，松开手就会回到最初的那种形式，这一篇我们就看一下这种效果的简单实现。

功能需求

实现类似QQ空间和其他APP经典个人中心的向下拉伸外扩的效果。

这两款APP的效果就是向下拉，顶部的封面会有外扩的效果，松开手就会弹回去。

功能实现

下面我们就看一下实现的代码。

1. ViewController.m

#import "ViewController.h"

#define kViewControllerCellReuseIdentify   @"kViewControllerCellReuseIdentify"

@interface ViewController () <UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) UIImageView *headerTopView;

@end

@implementation ViewController

#pragma mark -  Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    [self initUI];
}

#pragma mark -  Object Private Function

- (void)initUI
{
    //tableview
    CGRect frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width,self.view.bounds.size.height);
    self.tableView = [[UITableView alloc] initWithFrame: frame style:UITableViewStylePlain];
    self.tableView.rowHeight = 60.0;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    self.tableView.backgroundColor = [UIColor clearColor];
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:kViewControllerCellReuseIdentify];
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
    [self.view addSubview:self.tableView];
    
    //顶部视图
    self.headerTopView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 250.0 + 80.0)];
    self.headerTopView.image = [UIImage imageNamed:@"scene"];
    self.headerTopView.contentMode = UIViewContentModeScaleAspectFill;
    self.headerTopView.backgroundColor = [UIColor blueColor];
    [self.view insertSubview: self.headerTopView belowSubview: self.tableView];
    
    CGRect headerFrame = CGRectMake(0, 0, self.view.bounds.size.width, 250.0);
    UIView *realHeaderView = [[UIView alloc] initWithFrame: headerFrame];
    realHeaderView.backgroundColor = [UIColor clearColor];

    self.tableView.tableHeaderView = realHeaderView;
}

- (void)handleHeaderView: (CGFloat)offsetY maxOffset: (CGFloat)max
{
    if (offsetY < 0) {
        self.headerTopView.frame = CGRectMake(0, 0, self.headerTopView.bounds.size.width, self.headerTopView.intrinsicContentSize.height - offsetY);
    }
    
    if (offsetY > 0) {
        CGRect frame = self.headerTopView.frame;
        frame.origin.y = -offsetY;
        self.headerTopView.frame = frame;
    }
    
    if (offsetY == 0) {
        self.headerTopView.frame = CGRectMake(0, - offsetY, self.headerTopView.bounds.size.width, self.headerTopView.intrinsicContentSize.height);
    }
}

#pragma mark -  UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView != self.tableView){
        return;
    }
    
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat tabOffsetY = [self.tableView rectForSection: 0].origin.y;
    [self handleHeaderView: offsetY maxOffset: tabOffsetY];
}

#pragma mark -  UITableViewDelegate, UITableViewDataSource

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kViewControllerCellReuseIdentify forIndexPath:indexPath];
    CGFloat redValue = arc4random_uniform(255)/255.0;
    CGFloat greenValue = arc4random_uniform(255)/255.0;
    CGFloat blueValue = arc4random_uniform(255)/255.0;
    cell.backgroundColor = [UIColor colorWithRed:redValue green:greenValue blue:blueValue alpha:1.0];
    return cell;
}

@end

这个实现还是很简单的，这里采用的视图层次是，

这里：

• 1. 就是一个UIImageView控件，用于放封面。
• 2. 是一个底色透明的UITableView。
• 3. 是一个tableHeaderView，底色也是透明的，高度和封面UIImageView是一样的。

上面就是设计的视图层次。

功能效果

下面我们就看一下功能效果。

后记

未完，待续~~~