版本記錄

前言

很多的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是一樣的。

上面就是設計的視圖層次。

功能效果

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

后記

未完，待續~~~