iOS下拉放大效果

好多下拉放大的实现方式是在tableView上面添加一个view，同时更改tableView.contentInset，下拉时改变view的frame来实现。今天用另外一种方式实现，效果如下：

加油.gif

具体实现方法：通过tableViewCell结合xib来实现，具体代码如下
HomeViewController.m代码

#import "HomeViewController.h"
#import "HeaderTableViewCell.h"

@interface HomeViewController () 

@property (nonatomic, strong) IBOutlet UITableView *tableView;
@property (nonatomic, strong) IBOutlet UIView *navigateBarView;
@property (nonatomic, strong) HeaderTableViewCell *headerCell;

@end

@implementation HomeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    if (@available(iOS 11.0, *)) {
        self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
    }
    self.navigateBarView.alpha = 0;
    // Do any additional setup after loading the view, typically from a nib.
}

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

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row == 0) {
        return [HeaderTableViewCell cellHeight];
    } else {
        return 60;
    }
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row == 0) {
        HeaderTableViewCell * cell = (HeaderTableViewCell *)[self cellFromIdentifier:@"HeaderTableViewCell" tableView:tableView];
        self.headerCell = cell;
        return cell;
    } else {
        return [self normalCell:tableView];
    }
}

- (UITableViewCell *)cellFromIdentifier:(NSString *)cellWithIdentifier tableView:(UITableView*)tableView {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellWithIdentifier];
    if (nil == cell) {
        cell = [[UINib nibWithNibName:cellWithIdentifier bundle:nil] instantiateWithOwner:nil options:nil].lastObject;
    }
    return cell;
}

- (UITableViewCell *)normalCell:(UITableView *)tableView {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"customCell"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"customCell"];
        cell.contentView.backgroundColor = [UIColor colorWithRed:(arc4random()%255)/255.0 green:(arc4random()%255)/255.0 blue:(arc4random()%255)/255.0 alpha:1];
    }
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}

#pragma mark -- UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat offsetY = scrollView.contentOffset.y;
    
    if (offsetY < 0 ) {
        self.headerCell.backgroundImageTopConstraint.constant = offsetY;
    } else {
        self.headerCell.backgroundImageTopConstraint.constant = 0;
    }
    
    if (offsetY < -50) {
        // TODO:下拉刷新
    }
    
    CGFloat colorChangeContentOffset = 100;
    if (offsetY > colorChangeContentOffset) {
        double alpha = (offsetY-colorChangeContentOffset)/64.0;
        if (alpha < 0.05) {
            alpha = 0;
        }
        if (alpha > 0.95) {
            alpha = 1;
        }
        self.navigateBarView.alpha = alpha;
    } else {
        self.navigateBarView.alpha = 0;
    }
}
@end

HeaderTableViewCell.h代码

@interface HeaderTableViewCell : UITableViewCell

@property (nonatomic, strong) IBOutlet NSLayoutConstraint *backgroundImageTopConstraint;

+ (CGFloat)cellHeight;

@end

HeaderTableViewCell.m代码

@implementation HeaderTableViewCell

- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
}

+ (CGFloat)cellHeight {
    return 224 * [UIScreen mainScreen].bounds.size.width / 375;
}

@end

说明一下HomeViewController.xib和HeaderTableViewCell.xib的布局：

• HomeViewController.xib中添加一个UITableView和通过UIView自定义的导航栏
• HeaderTableViewCell.xib中有两张图片：

  • 背景：
    bg.png

  • 头像：
    head.png

通过UIScrollViewDelegate的方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView 更改HeaderTableViewCell的backgroundImageTopConstraint即可实现下拉放大效果