1.搭建基本界面
- 在storyboard中自定义一个导航控制器，移除自带的根控制器UITableViewController，重新拖入一个UIViewController，在根控制器上方拖入一个UIView，在UIView内部拖入图片，完成上图界面，建立好约束。
- 自定义一个AZViewController文件用来管理界面，对背景图片的UIView的高度约束和tableView与文件中的属性进行连线
2.在AZViewController中进行界面操作
- 首先让控制器成为tableView的代理，实现tableView的数据源和代理协议，实现对应的方法.
- 这里需要注意的是修改导航栏和导航栏标题的透明度不能直接修改alpha值，可以给其添加控件，通过修改控件的颜色的方式对其透明度进行修改
// 设置tableView的代理和数据源
self.tableView.delegate=self;
self.tableView.dataSource=self;
// 设置tableView的位置
self.tableView.contentInset=UIEdgeInsetsMake(244, 0, 0, 0);
self.automaticallyAdjustsScrollViewInsets=NO;
// 注册tableViewCell的引用标识
[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:ID];
// 设置导航栏样式
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc]init]];
// 设置导航栏的标题
UILabel *title=[[UILabel alloc]init];
title.text=@"个人详情页";
[title sizeToFit];
title.textColor=[UIColor colorWithWhite:0 alpha:0];
self.navigationItem.titleView=title;
3.页面效果实现
- 通过UIScrollView的方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView对tableView的滚动进行监听，实现页面效果的展示
- 这里需要注意scrollView的contentOffset往y轴正方向走的值是减小的
- 当控件的透明度alpha值大于1时会出现有一点透明的效果，这里需要处理一下
#pragma mark - UIScrollView的代理方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// y轴位移
CGFloat offset=scrollView.contentOffset.y-(oriOfftY);
// 图片底部距离上方高度
CGFloat h=oriHeight-offset;
// 滚动到导航栏位置停止滚动
self.bgImageHeight.constant=h<64?64:h;
// 根据位移量设置透明度
CGFloat alpha=offset*1/136.0;
if (alpha>=1) {
alpha=0.99;
}
// 设置导航栏标题的透明度,设置导航栏标题的alpha无法直接修改，可以通过修改label的文字颜色的方式来修改
UILabel *titleL=(UILabel *)self.navigationItem.titleView;
titleL.textColor=[UIColor colorWithWhite:0 alpha:alpha];
self.navigationItem.titleView=titleL;
// 设置导航条的透明，同样无法直接修改alpha，通过设置背景图片的alpha值来修改导航栏的透明度
UIImage *alphaColor=[UIImage imageWithColor:[UIColor colorWithWhite:1 alpha:alpha]];
[self.navigationController.navigationBar setBackgroundImage:alphaColor forBarMetrics:UIBarMetricsDefault];
}
