iOS 设置导航栏控件的自动缩放

同学们在使用APP的过程中肯定会遇到这样效果，一个控件在navigationItem上，这个控件随着tableView的滑动放大或者缩小。接下来，我就给大家实现一下这个效果，先来看效果图：

2018-04-20 22_20_58.gif

好啦，上代码，内容实际上很简单，先看代码再说。

#import "ViewController.h"

@interface ViewController () 

/// tableView
@property (nonatomic, strong) UITableView *tableView;
/// 顶部的缩放按钮
@property (nonatomic, strong) UIButton *headerButton;

@end

static NSString *cellId = @"cell";

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view addSubview:self.tableView];
    
    [self.tableView reloadData];
    
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    self.navigationItem.titleView = headerView;
    self.headerButton.center = headerView.center;
    [headerView addSubview:self.headerButton];
}

#pragma mark - UITableViewDataSource/UITableViewDelegate
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 100;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId];
    
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellId];
    }
    
    cell.textLabel.text = [NSString stringWithFormat:@"%ld", indexPath.row];
    
    return cell;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //在偏移量在50至200范围内放大一倍
    if (scrollView.contentOffset.y > 50) {
        if (scrollView.contentOffset.y > 200) {
            self.headerButton.transform = CGAffineTransformMakeScale(2, 2);
        } else {
            CGFloat proportion = (scrollView.contentOffset.y - 50.f) / 150.f;
            self.headerButton.transform = CGAffineTransformMakeScale(1 + proportion, 1 + proportion);
        }
    } else {
        self.headerButton.transform = CGAffineTransformMakeScale(1, 1);
    }
}

#pragma mark - 点击事件
-(void)clickHeader {
    NSLog(@"%s", __func__);
}

#pragma mark - UI
-(UITableView *)tableView {
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
        _tableView.dataSource = self;
        _tableView.delegate = self;
    }
    
    return _tableView;
}

-(UIButton *)headerButton {
    if (!_headerButton) {
        _headerButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [_headerButton setImage:[UIImage imageNamed:@"timg"] forState:UIControlStateNormal];
        _headerButton.layer.masksToBounds = YES;
        _headerButton.layer.cornerRadius = 20;
        _headerButton.frame = CGRectMake(0, 0, 40, 40);
        [_headerButton addTarget:self action:@selector(clickHeader) forControlEvents:UIControlEventTouchUpInside];
    }
    
    return _headerButton;
}

@end

ok，看到了吗？实际上重点只有两点：

1. 如果将一个控件直接放到navigationItem.titleView上，实际上控件是不能自动缩放的。这种情况下，你就需要一个替你放在navigationItem.titleView的控件，就是我们的headerView。然后让按钮放在headerView即可。
2. 然后通过tableView的scrollViewDidScroll方法，控制控件的大小就行了。

看了代码就会发现这个功能非常简单，喜欢的话就收藏一波吧。