demo下載地址:http://download.csdn.net/download/u010981736/9934641
效果如下:
核心代碼:
//
// ViewController.m
// 漸變導航
//
// Created by llkj on 2017/8/15.
// Copyright © 2017年 LayneCheung. All rights reserved.
//
#import "ViewController.h"
#import "UIImage+Image.h"
#define HeaderH 200
#define TarBarH 44
#define MinH 64
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property(nonatomic, weak) UILabel *titleL;
@property(nonatomic ,assign) CGFloat oriOffsetY;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *headerHeightConts;
@end
@implementation ViewController
static NSString *ID = @"cell";
- (void)viewDidLoad {
[super viewDidLoad];
[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:ID];
//iOS7之後,只要是導航控制器下的所有UIScrollView頂部都會添加額外的滾動區域.
//設置當前控制器不要調整ScrollView的contentInsets
self.automaticallyAdjustsScrollViewInsets = NO;
//設置導航條隱藏
//但是我們這裏導航條隱藏不是直接隱藏的,而是有一個透明度, 根據滾到的位置,設置透明度的.
//self.navigationController.navigationBar.hidden = YES;
//設置導航條透明度爲0
//設置導航條透明度爲0,沒有效果,還是原來的樣子.
//原因是因爲導航條上面那一塊並不直接是導航條,它是導航條裏面的一個子控件.
//所以在這裏設置它沒有效果,因爲系統會生成一個半透明的圖片.
self.navigationController.navigationBar.alpha = 0;
//所以在這裏我們可以考慮給它設置一個半透明的圖片.
//在這裏,有一個模式,必須要傳默認UIBarMetricsDefault模式.
//在這裏發現設爲nil的時候,也沒有效果,那是因爲系統它做了一層判斷,它會判斷如果傳入的系統圖片爲空的話,它就會幫你生成一個半透明的圖片,設置導航條的背景圖片.
//[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];
//那在這裏傳入一張空的圖片,然後就有效果了.
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
//但是設置完後,發現有一根線,這根線其實是導航條的一個陰影.直接把它清空就行了.
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
//設置tableView的數據源
self.tableView.dataSource = self;
//設置tableView的代理
self.tableView.delegate = self;
self.oriOffsetY = -(HeaderH + TarBarH);
//設置UITableView的默認額外頂部滾動區域244.
//tableView只要設置額外的滾動區域,就會把內容往下面擠.
self.tableView.contentInset = UIEdgeInsetsMake(HeaderH + TarBarH, 0, 0, 0);
//導航條上的View不允許直接設爲透明.
UILabel *titleL = [[UILabel alloc] init];
titleL.textColor = [UIColor colorWithWhite:0 alpha:0];
titleL.text = @"漸變導航";
[titleL sizeToFit];
self.titleL = titleL;
//可以把文字的顏色搞成透明.
self.navigationItem.titleView = titleL;
}
//只要tableView滾動時,就會調用這個方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
//計算滾動的便宜量
CGFloat offSetY = scrollView.contentOffset.y - self.oriOffsetY;
NSLog(@"%f",offSetY);
//在這裏不能使用距離上面的約束,因爲這個地方我們是想要有一個視覺差的效果,還有就是要保證一直距離頂部爲0的大小.
//self.headerTopCons.constant = - offSetY;
CGFloat h = HeaderH - offSetY;
if (h < 64) {
h = 64;
}
self.headerHeightConts.constant = h;
// 處理導航條
// 計算當前的透明度
CGFloat alpha = offSetY / (HeaderH - MinH);
if (alpha > 1) {
alpha = 0.99;
}
//設置標題的透明度
self.titleL.textColor = [UIColor colorWithWhite:0 alpha:alpha];
// 獲取導航條的顏色
UIColor *navColor = [UIColor colorWithWhite:1 alpha:alpha];
// 設置導航條背景圖片
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:navColor] forBarMetrics:UIBarMetricsDefault];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 30;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID forIndexPath:indexPath];
cell.textLabel.text = @"LayneCheung";
return cell;
}
@end