iOS实现QQ空间之打造个性化可拉伸头部

总体的实现效果

说一下总体思路，顶部是自定义导航栏，在主界面中会将系统自带的导航栏隐藏。导航栏后面是一张图片。导航栏下面是一个带有header的tableview。header中有UIView。向上滑动的时候设置自定义导航栏的alpha值，再设置背景图片高度逐渐减小。向下滑动的时候增加背景图片的frame。
主控制器.h文件代码：

#import <UIKit/UIKit.h>
@class EOCCustomNavBar;
@interface ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>


@end

主控制器.m文件代码：

#import "ViewController.h"
#import "EOCCustomNavBar.h"
@interface ViewController ()
{
    EOCCustomNavBar *navBar;
    UIImageView *bgView;
    CGRect originalFrame;
}
@end

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

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES animated:animated];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor=[UIColor lightGrayColor];
    self.automaticallyAdjustsScrollViewInsets=NO;

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

    //导航栏
    navBar = [[EOCCustomNavBar alloc] init];
    navBar.title = @"八点钟学院";
    navBar.leftImage = @"Mail";
    navBar.rightImage = @"Setting";
    //    navBar.alpha = 0.5f;  //它改变view的alpha，以及子view的alpha
    navBar.titleColor = [UIColor whiteColor];
    [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.f) style:UITableViewStylePlain];
    table.backgroundColor = [UIColor clearColor];
    table.showsVerticalScrollIndicator = NO;
    table.delegate = self;
    table.dataSource = self;

    UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0.f, 0.f, self.view.frame.size.width, headHeight)];
    headView.backgroundColor = [UIColor clearColor];
    table.tableHeaderView = headView;
    [self.view addSubview:table];
}

#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;
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat yOffset=scrollView.contentOffset.y;//向上滑动，offset是增加的，向下滑动，offset是减少的。
    if (yOffset<headHeight) {//当滑动到导航栏底部之前
        CGFloat colorAlpha=yOffset/headHeight;//0-1
        navBar.backgroundColor=[[UIColor whiteColor]colorWithAlphaComponent:colorAlpha];
        navBar.leftImage = @"Mail";
        navBar.rightImage = @"Setting";
        navBar.titleColor = [UIColor whiteColor];
    }else
    {
        navBar.backgroundColor=[UIColor whiteColor];
        navBar.leftImage = @"Mail-click";
        navBar.rightImage = @"Setting-click";
        navBar.titleColor = GREENCOLOR;
    }

    //向上移动效果，处理放大效果
    if (yOffset>0) {
        //符合语句
        bgView.frame=({
            CGRect frame=originalFrame;
            frame.origin.y=originalFrame.origin.y-yOffset;
            frame;
        });
    }else
    {
        bgView.frame=({
            CGRect frame=originalFrame;
            frame.size.height=originalFrame.size.height-yOffset;
            frame.size.width=frame.size.height/ratio;
            frame.origin.x=originalFrame.origin.x-(frame.size.width-originalFrame.size.width)/2;
            frame;
        });
    }
}

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


@end

自定义导航栏.h文件代码：

#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

自定义导航栏.m文件代码：

#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