打造QQ个性化可拉伸头部控件

实现原理

被拉伸控件位于tableView的下方位置，然后通过透明的表头向用户显示。
根据tableView的contentOffset触发navigationBar的透明度改变，可拉伸控件的变化。

关键点

1. navigationBar颜色渐变
   navBar.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:yOffset/headHeight];
   这个方法提供了颜色的渐变，很好的避免了修改navBar.alpha引起其子视图透明度的改变这一问题。

2. 控件放大时定点左标修改
   frame.origin.x -= (frame.size.width - originalFrame.size.width)/2;
   增加的宽度，水平方向平分

实现

//  ViewController.h
#import <UIKit/UIKit.h>
@class EOCCustomNavBar;

@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>
@end


----------
//
//  ViewController.m

#import "ViewController.h"
#import "EOCCustomNavBar.h"

@interface ViewController ()
{
    EOCCustomNavBar *navBar;
    UIImageView *bgView;
    CGRect originalFrame;
}
@end

@implementation ViewController

static const CGFloat headHeight = 160.0f;
#define SCREENSIZE [UIScreen mainScreen].bounds.size
#define GREENCOLOR  [UIColor colorWithRed:87/255.0 green:173/255.0 blue:104/255.0 alpha:1]



- (void)viewDidLoad {

    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];

    //图片
    bgView = [[UIImageView alloc] initWithFrame:CGRectMake(0.f, 0.f, SCREENSIZE.width, 0.8*SCREENSIZE.width)];
    originalFrame = bgView.frame;
    bgView.image = [UIImage imageNamed:@"bg-mine"];
    [self.view addSubview:bgView];

    //导航栏
    navBar = [[EOCCustomNavBar alloc] init];
    navBar.titleColor = [UIColor whiteColor];
    navBar.title = @"可拉伸头部";
    navBar.backgroundColor = [UIColor clearColor];
    navBar.leftImage = @"Mail";
    navBar.rightImage = @"Setting";
    [self.view addSubview:navBar];

    //实现tableVIew
    UITableView *table = [[UITableView alloc] initWithFrame:CGRectMake(0.f, 64.0f, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height-64.0f) style:UITableViewStylePlain];
    table.backgroundColor = [UIColor clearColor];
    table.delegate = self;
    table.dataSource = self;
    [self.view addSubview:table];

    //透明表头
    UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0.f, 0.f, SCREENSIZE.width, headHeight)];
    table.tableHeaderView = headView;

//    table.contentInset = UIEdgeInsetsMake(headHeight, 0.f, 0.f, 0.f);

}

#pragma mark - tableView delegate&&datasource method
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    cell.textLabel.text = @"可拉伸头部控件";
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}


//tableVIew它是scrollVIew
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat yOffset = scrollView.contentOffset.y;

    if (yOffset < headHeight) {  //如果此时tableVIew的偏移量没有达到导航栏底部

        navBar.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:yOffset/headHeight];
        navBar.leftImage = @"Mail";
        navBar.rightImage = @"Setting";
        navBar.titleColor = [UIColor whiteColor];

    } else if (yOffset > headHeight) {  // 已经达到了导航栏底部往上走

        navBar.backgroundColor = [UIColor whiteColor];
        navBar.leftImage = @"Mail-click";
        navBar.rightImage = @"Setting-click";
        navBar.titleColor = GREENCOLOR;

    }

    if (yOffset > 0 ) {  //tableView往上走

        bgView.frame = ({

            CGRect frame = originalFrame;
            frame.origin.y -= yOffset;
            frame;

        });

    } else if (yOffset < 0 ) {  //tableView往下走

//        bgView.frame = ({  //瘦高型
//            
//            CGRect frame = originalFrame;
//            frame.size.height += (-yOffset);
//            frame.size.width = frame.size.height*(originalFrame.size.width/originalFrame.size.height);
//            frame.origin.x -= (frame.size.width - originalFrame.size.width)/2;
//            
//            frame;
//            
//        });

        bgView.frame = ({  //矮壮型

            CGRect frame = originalFrame;
            frame.size.width += (-yOffset);
            frame.size.height = frame.size.width*(originalFrame.size.height/originalFrame.size.width);
            frame.origin.x -= (frame.size.width - originalFrame.size.width)/2;

            frame;

        });

    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

自定义navigationBar

#import <UIKit/UIKit.h>

@interface EOCCustomNavBar : UIView


@property(nonatomic, strong)NSString *title;
@property(nonatomic, strong)UIColor *titleColor;
@property(nonatomic, strong)NSString *leftImage;
@property(nonatomic, strong)NSString *rightImage;


@end


----------

#import "EOCCustomNavBar.h"

@interface EOCCustomNavBar ()

@property(nonatomic, strong)UIButton *leftBtn;
@property(nonatomic, strong)UIButton *rightBtn;
@property(nonatomic, strong)UILabel *titleLabel;

@end
@implementation EOCCustomNavBar

- (instancetype)init
{
    if (self = [super init]) {
        self.frame = CGRectMake(0.0f, 0.0f, [[UIScreen mainScreen] bounds].size.width, 64.0f);
    }

    return self;
}

//懒加载view
- (UIButton *)leftBtn
{
    if (!_leftBtn) {

        _leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [_leftBtn setBackgroundImage:[UIImage imageNamed:_leftImage] forState:UIControlStateNormal];
        _leftBtn.frame = CGRectMake(15.0f, 32.0f, 22.0f, 16.0f);

    }
    return _leftBtn;
}

- (UIButton *)rightBtn
{
    if (!_rightBtn) {

        _rightBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [_rightBtn setBackgroundImage:[UIImage imageNamed:_rightImage] forState:UIControlStateNormal];
        _rightBtn.frame = CGRectMake(self.frame.size.width-37.0f, 30.0f, 22.0f, 22.0f);

    }
    return _rightBtn;
}

- (UILabel *)titleLabel
{
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.textColor = _titleColor;
        _titleLabel.text = _title;
        _titleLabel.center = CGPointMake(self.frame.size.width/2, (self.frame.size.height+20.0f)/2);
        _titleLabel.bounds = CGRectMake(0.0f, 0.0f, 100.0f, self.frame.size.height-20.0f);
    }
    return _titleLabel;
}

//重写三个setter方法
- (void)setTitleColor:(UIColor *)titleColor
{
    _titleColor = titleColor;
    self.titleLabel.textColor = _titleColor;
}

- (void)setLeftImage:(NSString *)leftImage
{
    _leftImage = leftImage;
    [self.leftBtn setBackgroundImage:[UIImage imageNamed:_leftImage] forState:UIControlStateNormal];
}

- (void)setRightImage:(NSString *)rightImage
{
    _rightImage = rightImage;
    [self.rightBtn setBackgroundImage:[UIImage imageNamed:_rightImage] forState:UIControlStateNormal];
}

- (void)setTitle:(NSString *)title
{
    _title = title;
    self.titleLabel.text = title;
}

- (void)layoutSubviews {

    [self addSubview:self.leftBtn];

    [self addSubview:self.rightBtn];

    [self addSubview:self.titleLabel];

}


@end