首先, 简述一下我想实现的效果, 整个页面是以一个tableView为主的简单浏览页, tableView.headView上有一张图片.
效果1: 当下拉页面时, 图片放大, 当松开手指时, 图片恢复到原来大小
效果2: 当上拉页面, 从视图逐渐消失时, NavigationBar出现并伴随渐变效果
NavgationBar动画.gif
废话不多说, 先上代码（我将按照我自己的思路逐步讲解）:
- 将屏幕宽度和屏幕高度设为宏，签协议， 并根据需求设置属性
#define kScreenWith [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
@interface ViewController ()
<
UITableViewDataSource,
UITableViewDelegate,
UIScrollViewDelegate
>
@property (nonatomic, strong) UITableView *myTableView;
@property (nonatomic, strong) UIView *backViewForTableHeaderView;
@property (nonatomic, strong) UIImageView *backImageViewForTableHeaderView;
@property (nonatomic, strong) UIImageView *barImageView;
@property (nonatomic, strong) UILabel *nameLabel;
@end
- (void)viewDidLoad {
[super viewDidLoad];
// 创建tableView
[self createTableView];
// 处理navigationBar
[self handleNavigationBar];
}
- 创建一个tableView(这一步就不用我多说了吧), 这里创建tableView时, 要将y坐标设为-64, 让tableView显示在NavgationBar的下方, 同时tableView的高度要+64, 以保证占据整个屏幕
- (void)createTableView {
self.myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, -64, kScreenWidth,kScreenHeight + 64)];
_myTableView.backgroundColor = [UIColor whiteColor];
_myTableView.delegate = self;
_myTableView.dataSource = self;
[_myTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"reuse"];
[self.view addSubview:_myTableView];
_myTableView.tableHeaderView = [self createTableHeaderView];
}
创建tableView头视图, 头视图上放置一个imageView和一个label.
- (UIView *)createTableHeaderView {
self.backViewForTableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 200)];
self.backImageViewForTableHeaderView = [[UIImageView alloc] initWithFrame:self.backViewForTableHeaderView.bounds];
_backImageViewForTableHeaderView.image = [UIImage imageNamed:@"1.jpg"];
[self.backViewForTableHeaderView addSubview:_backImageViewForTableHeaderView];
self.nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 150, 200, 40)];
_nameLabel.text = @"这游戏真难";
[self.backViewForTableHeaderView addSubview:_nameLabel];
return _backViewForTableHeaderView;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 50;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuse"];
cell.textLabel.text = [NSString stringWithFormat:@"cell- %ld", indexPath.row];
return cell;
}
- 在navigationBar上创建一个imageView用来显示背景图片,
- (void)handleNavigationBar {
// 去掉背景图片
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
// 去掉navigationBar底部线条
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
// 此处y设置为-20, 否则状态栏不能被覆盖
self.barImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -20, kScreenWidth, 64)];
_barImageView.image = [UIImage imageNamed:@"2.png"];
[self.navigationController.navigationBar addSubview:_barImageView];
self.navigationItem.title = @"导航栏";
}
- 在tableView滑动方法中更改navigationBar上背景图片的透明度, 和tableHeaderView上的imageView的frame, 故要将tableView的偏移量与bar上imageView的透明度关联, 并将tableHeaderView上的frame与偏移量关联, 实现上拉导航栏渐变, 下拉图片放大的效果.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat offset_Y = scrollView.contentOffset.y;
CGFloat alpha = (offset_Y + 64) / 200.0f;
self.barImageView.alpha = alpha;
if (offset_Y < -64) {
CGFloat add_height = -(offset_Y + 64);
CGFloat scale = (200 + add_height) / 200.0f;
self.backImageViewForTableHeaderView.frame = CGRectMake(-(kScreenWidth * scale - kScreenWidth) / 2.0f, -add_height, kScreenWidth * scale, 200 + add_height);
}
}
