#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];
// 技术点:滚动TableView时，蓝色的UIView之所以也跟着移动的原因是：蓝色View的顶部距图片底部有约束，约束为0，所以图片滚动，蓝色View也跟着滚动。又因为图片设置了高度约束(纯代码拿到图片高度的控制权),且高度跟随TableView的滚动 而变化,(self.heightConstraint.constant = h;)，所以TableView滚动，那么蓝色的UIView间接的也跟着滚动。
// 1.从ios7开始当scrollView在导航控制器,会自动调用边距64。如不设置,可以看到UITableView自动向下偏移64像素[已验证]
self.automaticallyAdjustsScrollViewInsets = NO;
// 2.设置数据源,代理
self.tableView.dataSource = self;
self.tableView.delegate = self;
// 3.调用contentInset时,顶层会调用代理方法scrollViewDidScroll(你是如何断定的?因为注释不打印偏移量,不注释打印偏移量)
self.tableView.contentInset = UIEdgeInsetsMake(244, 0, 0, 0);
// 4.只有设置为UIBarMetricsDefault模式，才可以设置(即显示/隐藏)导航栏的背景图片,阴影图片
//如果指定图片传为nil,底层会默认设置一张图片显示,
//隐藏导航栏的背景图片
[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;
//设置文字的颜色为透明
[titleT setTextColor:[UIColor colorWithWhite:0 alpha:0]];
self.navigationItem.titleView = titleT;
}
// 滚动TableView调用
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
NSLog(@"%f",scrollView.contentOffset.y);
// 记录有没有滚动TableView，如果为0，则视为不滚动。如果为100，则向上滚动了100像素,如为-100,则向下滚动100
// 虽然程序运行时偏移量就已经为了-244，但是UITableView并没有滚动，为了好理解,所以我们假定为0(其实就是-244)，0表示未滚动TableView
CGFloat offsetY = scrollView.contentOffset.y + 244;
NSLog(@"%f",offsetY);
// 图片被拉伸,被挤压之后的高度 = 图片原始的高度减去滚动TableView的高度
CGFloat h = 200 - offsetY;
if (h <= 64) {// 只有向上滚动TableView并且滚动一定的高度才会执行这段代码。如果一会向上滚动,那么图片高度始终未64
h = 64;
}
// 图片被拉伸,被挤压之后的高度
self.heightConstraint.constant = h;
//滚动TableView的过程中,根据颜色的alpha值设置导航栏的背景图片
// 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;
}
// 根据颜色的alpha设置导航栏的图片(最终效果是纯白色的图片)
UIImage *image = [UIImage imageWithColor:[UIColor colorWithWhite:1 alpha:alpha]];
// 将生成的图片显示到导航栏上
[self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
// 设置导航栏的标题
UILabel *titleT = (UILabel *)self.navigationItem.titleView;
// 根据颜色的alpha设置导航栏标题的颜色。
[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设置的高度约束，UIView中有两个子控件:背景图片+用户头像
- 只有导航控制器才能实现滚动TableView显示/隐藏导航栏，普通的控制器无法实现这种效果。
- Aspect Fill和Scale To Fill区别
101.121.gif
