iOS兩種方式實現(xiàn)用戶界面頭像背景下拉放大

一、headerView方式

headerView方式.gif

這種方式是自定義一個背景視圖作為tableView的頭視圖，在視圖滾動的代理方法里面，得到tableView的偏移量，如果偏移量小于0，讓背景視圖的高度等于原高度加上偏移量的絕對值，通過現(xiàn)在的高度和初始高度，可以計算出背景視圖的縮放比例，根據(jù)縮放比例把寬度等比例縮放，最后重新設(shè)置背景視圖的frame就可以了。

//
//  XYHeaderViewController.m
//  ExpandUserBackground
//
//  Created by 薛堯 on 16/12/1.
//  Copyright ? 2016年 薛堯. All rights reserved.
//

#import "XYHeaderViewController.h"

#define kwidth [UIScreen mainScreen].bounds.size.width

@interface XYHeaderViewController ()<UITableViewDataSource, UITableViewDelegate>

@property(nonatomic, strong)UITableView     *tableView;
@property(nonatomic, strong)UIImageView     *headerBackView;        // 頭像背景圖片
@property(nonatomic, strong)UIImageView     *photoImageView;        // 頭像圖片
@property(nonatomic, strong)UILabel         *userNameLabel;         // 用戶名label
@property(nonatomic, strong)UILabel         *introduceLabel;        // 簡介label
@property(nonatomic, strong)UIView          *tableViewHeaderView;   // tableView頭部視圖
@property(nonatomic, assign)NSInteger       imageHeight;            // 背景圖片的高度

@end

@implementation XYHeaderViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.navigationController.navigationBar.hidden = YES;
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    _imageHeight = 240;// 背景圖片的高度
    _tableView = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];
    _tableView.dataSource = self;
    _tableView.delegate = self;
    [self.view addSubview:_tableView];
    [self createTableViewHeaderView];
}

#pragma mark - 創(chuàng)建頭視圖
- (void)createTableViewHeaderView
{
    _tableViewHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kwidth, _imageHeight)];
    
    // 背景圖
    _headerBackView = [[UIImageView alloc] init];
    _headerBackView.frame = CGRectMake(0, 0, kwidth, _imageHeight);
    _headerBackView.image = [UIImage imageNamed:@"bxjjq"];
    [_tableViewHeaderView addSubview:_headerBackView];
    
    // 頭像
    _photoImageView = [[UIImageView alloc] initWithFrame:CGRectMake((kwidth - 100) / 2, 50, 100, 100)];
    [self.tableViewHeaderView addSubview:self.photoImageView];
    _photoImageView.layer.cornerRadius = 50;
    _photoImageView.layer.masksToBounds = YES;
    _photoImageView.image = [UIImage imageNamed:@"young"];
    
    // 用戶名
    _userNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_photoImageView.frame) + 10, kwidth, 20)];
    _userNameLabel.font = [UIFont systemFontOfSize:16];
    _userNameLabel.text = @"JRS";
    _userNameLabel.textAlignment = 1;
    _userNameLabel.textColor = [UIColor whiteColor];
    [_tableViewHeaderView addSubview:self.userNameLabel];
    
    // 簡介
    _introduceLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_userNameLabel.frame) + 10, kwidth, 20)];
    _introduceLabel.alpha = 0.7;
    _introduceLabel.text = @"他強(qiáng)任他強(qiáng),我干我的羊";
    _introduceLabel.textAlignment = 1;
    _introduceLabel.font = [UIFont systemFontOfSize:12];
    _introduceLabel.textColor = [UIColor whiteColor];
    [_tableViewHeaderView addSubview:_introduceLabel];
    
    self.tableView.tableHeaderView = _tableViewHeaderView;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat width = self.view.frame.size.width;// 圖片的寬度
    CGFloat yOffset = scrollView.contentOffset.y;// 偏移的y值
    NSLog(@"%f",yOffset);
    if (yOffset < 0) {
        CGFloat totalOffset = _imageHeight + ABS(yOffset);
        CGFloat f = totalOffset / _imageHeight;
        self.headerBackView.frame = CGRectMake(- (width * f - width) / 2, yOffset, width * f, totalOffset);// 拉伸后的圖片的frame應(yīng)該是同比例縮放
    }
}

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }
    return cell;
}

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

二、通過tableView的contentInset屬性

contentInset方式.gif

使用這種方式依賴于Masony，是把自定義背景視圖放到控制器的view上，在添加tableView的時候設(shè)置contentInset屬性讓底下的背景視圖顯示出來，在視圖滾動的方法里，如果tableView向下滑動，使用masonry更新背景視圖的約束，背景視圖的height會變大，因為背景視圖的contentMode = UIViewContentModeScaleAspectFill，圖片會跟著變大。

//
//  XYContentInsetViewController.m
//  ExpandUserBackground
//
//  Created by 薛堯 on 16/12/1.
//  Copyright ? 2016年 薛堯. All rights reserved.
//

#import "XYContentInsetViewController.h"

#import <Masonry.h>

// 導(dǎo)航欄高度
#define kNavBarH 64.0f
// 頭部圖片的高度
#define kHeardH  260

@interface XYContentInsetViewController ()<UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) UITableView   *tableView;
@property (nonatomic, strong) UIImageView   *scaleImageView;// 頂部圖片
@property (nonatomic, assign) CGFloat       lastOffsetY;    // 記錄上一次的位置

@end

@implementation XYContentInsetViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.navigationController.navigationBar.hidden = YES;
    
    self.lastOffsetY = -kHeardH + 35;
    
    [self.view addSubview:self.scaleImageView];
    // 設(shè)置展示圖片的約束
    [_scaleImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(0);
        make.left.equalTo(self.view.mas_left);
        make.right.equalTo(self.view.mas_right);
        make.height.mas_equalTo(kHeardH);
    }];
    
    [self.view addSubview:self.tableView];
    self.tableView.backgroundColor = [UIColor clearColor];
}

#pragma mark - 懶加載
// 放大圖片的懶加載
- (UIImageView *)scaleImageView
{
    if (!_scaleImageView) {
        _scaleImageView = [[UIImageView alloc] init];
        _scaleImageView.contentMode = UIViewContentModeScaleAspectFill;
        _scaleImageView.clipsToBounds = YES;
        _scaleImageView.image = [UIImage imageNamed:@"bxjjq"];
    }
    return _scaleImageView;
}

// tableView的懶加載
- (UITableView *)tableView
{
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
        _tableView.contentInset = UIEdgeInsetsMake(kHeardH - 35, 0, 0, 0);
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    }
    return _tableView;
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 計算當(dāng)前偏移位置
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat delta = offsetY - _lastOffsetY;
    NSLog(@"delta=%f",delta);
    NSLog(@"offsetY=%f",offsetY);
    CGFloat height = kHeardH - delta;
    if (height < kNavBarH) {
        height = kNavBarH;
    }
    
    [_scaleImageView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(height);
    }];
}

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }
    return cell;
}

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

完整代碼

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容