iOS 上下滑動tableView導航透明度逐漸改變

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
發佈了55 篇原創文章 · 獲贊 1 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章