首先, 簡述一下我想實現(xiàn)的效果, 整個頁面是以一個tableView為主的簡單瀏覽頁, tableView.headView上有一張圖片.
效果1: 當(dāng)下拉頁面時, 圖片放大, 當(dāng)松開手指時, 圖片恢復(fù)到原來大小
效果2: 當(dāng)上拉頁面, 從視圖逐漸消失時, NavigationBar出現(xiàn)并伴隨漸變效果
NavgationBar動畫.gif
廢話不多說, 先上代碼（我將按照我自己的思路逐步講解）:
- 將屏幕寬度和屏幕高度設(shè)為宏，簽協(xié)議舍肠， 并根據(jù)需求設(shè)置屬性
#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];
// 創(chuàng)建tableView
[self createTableView];
// 處理navigationBar
[self handleNavigationBar];
}
- 創(chuàng)建一個tableView(這一步就不用我多說了吧), 這里創(chuàng)建tableView時, 要將y坐標(biāo)設(shè)為-64, 讓tableView顯示在NavgationBar的下方, 同時tableView的高度要+64, 以保證占據(jù)整個屏幕
- (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];
}
創(chuàng)建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上創(chuàng)建一個imageView用來顯示背景圖片,
- (void)handleNavigationBar {
// 去掉背景圖片
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
// 去掉navigationBar底部線條
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
// 此處y設(shè)置為-20, 否則狀態(tài)欄不能被覆蓋
self.barImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -20, kScreenWidth, 64)];
_barImageView.image = [UIImage imageNamed:@"2.png"];
[self.navigationController.navigationBar addSubview:_barImageView];
self.navigationItem.title = @"導(dǎo)航欄";
}
- 在tableView滑動方法中更改navigationBar上背景圖片的透明度, 和tableHeaderView上的imageView的frame, 故要將tableView的偏移量與bar上imageView的透明度關(guān)聯(lián), 并將tableHeaderView上的frame與偏移量關(guān)聯(lián), 實現(xiàn)上拉導(dǎo)航欄漸變, 下拉圖片放大的效果.
- (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);
}
}
