#import "ViewController.h"
#import "UIImage+Image.h"
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *heightConstraint;
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 技術(shù)點:滾動TableView時，藍色的UIView之所以也跟著移動的原因是：藍色View的頂部距圖片底部有約束抄腔，約束為0梆靖，所以圖片滾動漆改，藍色View也跟著滾動蒲跨。又因為圖片設(shè)置了高度約束(純代碼拿到圖片高度的控制權(quán)),且高度跟隨TableView的滾動 而變化,(self.heightConstraint.constant = h;)朱转，所以TableView滾動蟹地，那么藍色的UIView間接的也跟著滾動。
// 1.從ios7開始當scrollView在導航控制器,會自動調(diào)用邊距64藤为。如不設(shè)置,可以看到UITableView自動向下偏移64像素[已驗證]
self.automaticallyAdjustsScrollViewInsets = NO;
// 2.設(shè)置數(shù)據(jù)源,代理
self.tableView.dataSource = self;
self.tableView.delegate = self;
// 3.調(diào)用contentInset時,頂層會調(diào)用代理方法scrollViewDidScroll(你是如何斷定的?因為注釋不打印偏移量,不注釋打印偏移量)
self.tableView.contentInset = UIEdgeInsetsMake(244, 0, 0, 0);
// 4.只有設(shè)置為UIBarMetricsDefault模式怪与，才可以設(shè)置(即顯示/隱藏)導航欄的背景圖片,陰影圖片
//如果指定圖片傳為nil,底層會默認設(shè)置一張圖片顯示,
//隱藏導航欄的背景圖片
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
// 隱藏導航欄的陰影圖片(就是一條黑色的橫線)
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
UILabel *titleT = [[UILabel alloc] init];
titleT.text = @"個人詳情頁";
[titleT sizeToFit];
titleT.alpha = 0;
//設(shè)置文字的顏色為透明
[titleT setTextColor:[UIColor colorWithWhite:0 alpha:0]];
self.navigationItem.titleView = titleT;
}
// 滾動TableView調(diào)用
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
NSLog(@"%f",scrollView.contentOffset.y);
// 記錄有沒有滾動TableView，如果為0缅疟，則視為不滾動分别。如果為100，則向上滾動了100像素,如為-100,則向下滾動100
// 雖然程序運行時偏移量就已經(jīng)為了-244存淫，但是UITableView并沒有滾動耘斩，為了好理解,所以我們假定為0(其實就是-244)，0表示未滾動TableView
CGFloat offsetY = scrollView.contentOffset.y + 244;
NSLog(@"%f",offsetY);
// 圖片被拉伸,被擠壓之后的高度 = 圖片原始的高度減去滾動TableView的高度
CGFloat h = 200 - offsetY;
if (h <= 64) {// 只有向上滾動TableView并且滾動一定的高度才會執(zhí)行這段代碼桅咆。如果一會向上滾動,那么圖片高度始終未64
h = 64;
}
// 圖片被拉伸,被擠壓之后的高度
self.heightConstraint.constant = h;
//滾動TableView的過程中,根據(jù)顏色的alpha值設(shè)置導航欄的背景圖片
// TableView向上滾動了136像素括授，導航欄才會完全顯示。向上滾動TableView的過程中,導航欄是逐漸顯示的岩饼。
// 為什么臨界點是136度荚虚？因為第0行cell的y值為244，藍色UIView的高度為44忌愚，圖片的高度為200曲管，向上滾動136度時，還有64像素的空余位置硕糊，這個空余位置是顯示
CGFloat alpha = 1 * offsetY / 136.0;
if (alpha >= 1) {
alpha = 0.99;
}
// 根據(jù)顏色的alpha設(shè)置導航欄的圖片(最終效果是純白色的圖片)
UIImage *image = [UIImage imageWithColor:[UIColor colorWithWhite:1 alpha:alpha]];
// 將生成的圖片顯示到導航欄上
[self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
// 設(shè)置導航欄的標題
UILabel *titleT = (UILabel *)self.navigationItem.titleView;
// 根據(jù)顏色的alpha設(shè)置導航欄標題的顏色院水。
[titleT setTextColor:[UIColor colorWithWhite:0 alpha:alpha]];
}
#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *ID = @"cellID";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil ) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
cell.textLabel.text = @"CoderZb";
return cell;
}
@end
效果
101.122.gif
- 對UIView設(shè)置的高度約束腊徙，UIView中有兩個子控件:背景圖片+用戶頭像
- 只有導航控制器才能實現(xiàn)滾動TableView顯示/隱藏導航欄，普通的控制器無法實現(xiàn)這種效果檬某。
- Aspect Fill和Scale To Fill區(qū)別
101.121.gif
