demo.gif
效果图如上,简单分析下
- 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变
- 2.导航栏左右两边的navigationItem是一直显示的
- 3.导航栏参考了途家app,使用了毛玻璃效果,背景是一张图片
- 4.下拉放大图片效果
- 5.title文字动画效果
通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点
分布拆解实现以上效果
一.下拉放大header图片
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.scaleImageView];
// 设置展示图片的约束
[_scaleImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(0);
make.left.equalTo(self.view.mas_left);
make.right.equalTo(self.view.mas_right);
make.height.mas_equalTo(kHeardH);
}];
}
// tableView懒加载
-(UITableView *)tableView{
if(_tableView == nil){
_tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
_tableView.contentInset = UIEdgeInsetsMake(kHeardH-35, 0, 0, 0);
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
}
return _tableView;
}
// 图片的懒加载
- (UIImageView *)scaleImageView
{
if (!_scaleImageView) {
_scaleImageView = [[UIImageView alloc] init];
_scaleImageView.contentMode = UIViewContentModeScaleAspectFill;
_scaleImageView.clipsToBounds = YES;
_scaleImageView.image = [UIImage imageNamed:@"666"];
}
return _scaleImageView;
}
// 导航栏高度
#define kNavBarH 64.0f
// 头部图片的高度
#define kHeardH 260
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 计算当前偏移位置
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat delta = offsetY - _lastOffsetY;
DLog(@"delta=%f",delta);
DLog(@"offsetY=%f",offsetY);
CGFloat height = kHeardH - delta;
if (height < kNavBarH) {
height = kNavBarH;
}
[_scaleImageView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(height);
}];
}
二.导航栏左右两边的navigationItem是一直显示的
- (void)viewDidLoad {
[super viewDidLoad];
// 直接添加到控制器的View上面,注意添加顺序,在添加导航栏之后,否则会被遮盖住
[self configNavigationBar];
}
- (void)configNavigationBar{
//左边返回按钮
UIButton *backBtn = [[UIButton alloc]init];
backBtn.frame = CGRectMake(0, 20, 44, 44);
[backBtn setImage:[UIImage imageNamed:@"special_back"] forState:UIControlStateNormal];
[backBtn addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];
//右边分享按钮
UIButton *shartBtn = [[UIButton alloc]init];
shartBtn.frame = CGRectMake(SCREENWIDTH-44, 20, 44, 44);
[shartBtn setImage:[UIImage imageNamed:@"special_share"] forState:UIControlStateNormal];
[shartBtn addTarget:self action:@selector(shareBtnClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:backBtn];
[self.view addSubview:shartBtn];
}
// 返回
-(void)back{
[self.navigationController popViewControllerAnimated:YES];
}
三.自定义导航栏及毛玻璃效果及title文字动画效果
// 隐藏系统导航栏
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
self.navigationController.navigationBar.hidden = YES;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationController.navigationBar.hidden = YES;
self.lastOffsetY = - kHeardH+35;
[self.view addSubview:self.tableView];
self.tableView.backgroundColor = [UIColor clearColor];
[self.view addSubview:self.navigationView];
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
}
// 自定义导航栏
-(UIView *)navigationView{
if(_navigationView == nil){
_navigationView = [[UIView alloc]init];
_navigationView.frame = CGRectMake(0, 0, SCREENWIDTH, kNavBarH);
_navigationView.backgroundColor = [UIColor clearColor];
_navigationView.alpha = 0.0;
//添加子控件
[self setNavigationSubView];
}
return _navigationView;
}
// 注意:毛玻璃效果API是iOS8的,适配iOS8以下的请用其他方法
-(void)setNavigationSubView{
// 毛玻璃背景
UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:_navigationView.bounds];
bgImgView.image = [UIImage imageNamed:@"666"];
[_navigationView addSubview:bgImgView];
/** 毛玻璃特效类型
* UIBlurEffectStyleExtraLight,
* UIBlurEffectStyleLight,
* UIBlurEffectStyleDark
*/
UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
// 毛玻璃视图
UIVisualEffectView * effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
//添加到要有毛玻璃特效的控件中
effectView.frame = bgImgView.bounds;
[bgImgView addSubview:effectView];
//设置模糊透明度
effectView.alpha = 0.9f;
//中间文本框
UIView *centerTextView = [[UIView alloc]init];
self.centerTextView = centerTextView;
CGFloat centerTextViewX = 0;
CGFloat centerTextViewY = 64;
CGFloat centerTextViewW = 0;
CGFloat centerTextViewH = 0;
//文字大小
NSString *title = @"Pg.lostk开启后摇滚的新图景";
NSString *desc = @"摇滚清心坊8套";
CGSize titleSize = [title sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12]}];
CGSize descSize = [desc sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:11]}];
centerTextViewW = titleSize.width > descSize.width ? titleSize.width : descSize.width;
centerTextViewH = titleSize.height + descSize.height +10;
centerTextViewX = (SCREENWIDTH - centerTextViewW) / 2;
centerTextView.frame = CGRectMake(centerTextViewX, centerTextViewY, centerTextViewW, centerTextViewH);
//文字label
UILabel *titleLabel = [[UILabel alloc]init];
titleLabel.text = title;
titleLabel.font = [UIFont systemFontOfSize:12];
titleLabel.textColor = [UIColor whiteColor];
titleLabel.frame = CGRectMake(0,5, centerTextViewW, titleSize.height);
UILabel *descLabel = [[UILabel alloc]init];
descLabel.textAlignment = NSTextAlignmentCenter;
descLabel.text = desc;
descLabel.font = [UIFont systemFontOfSize:11];
descLabel.textColor = [UIColor whiteColor];
descLabel.frame = CGRectMake(0, titleSize.height + 5, centerTextViewW, descSize.height);
[centerTextView addSubview:titleLabel];
[centerTextView addSubview:descLabel];
[_navigationView addSubview:centerTextView];
}
声明控件
@property(nonatomic,strong) UIView *navigationView; // 导航栏
@property(nonatomic,strong) UIView *centerTextView; // title文字
@property (assign, nonatomic) CGFloat lastOffsetY; // 记录上一次位置
@property (nonatomic,strong) UIImageView *scaleImageView; // 顶部图片
核心代码
#pragma mark - ScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 计算当前偏移位置
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat delta = offsetY - _lastOffsetY;
DLog(@"delta=%f",delta);
DLog(@"offsetY=%f",offsetY);
CGFloat height = kHeardH - delta;
if (height < kNavBarH) {
height = kNavBarH;
}
CGFloat margin = 205;
if (delta>margin && delta<margin+39) {
self.centerTextView.y = 64 - (delta-margin);
self.centerTextView.alpha = 1.0;
}
if (delta>margin+39) {
self.centerTextView.y = 25;
self.centerTextView.alpha = 1.0;
}
if (delta<=margin) {
self.centerTextView.alpha = 0;
}
if (delta<= 0) {
self.centerTextView.y =64;
self.centerTextView.alpha = 0.0;
}
[_scaleImageView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(height);
}];
CGFloat alpha = delta / (kHeardH - kNavBarH);
if (alpha >= 1.0) {
alpha = 1.0;
}
self.navigationView.alpha = alpha;
}
由于是直接写项目中,没有demo可供下载,抱歉,如果有更好的方法实现,希望不吝赐教,共勉!!!
