有很多项目中用了导航栏项目渐隐的效果,在滑动页面的时候显示导航栏######
系统的导航栏是不能满足这个需求的(目前笔者不知道系统的导航栏可以完成这个需求)
我是通过自定义的View来代替系统的导航栏去完成这个需求
废话不多说现在开始撸代码
1. 如果你给当前的控制器加了导航栏之后你需要把系统的给隐藏掉
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
self.navigationController.delegate = self;
}
2. 懒加载创建一个tableView
#pragma mark -- /*init*/
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.tableHeaderView = self.headerView;
_tableView.tableFooterView = self.footerView;
}
return _tableView;
}
- (UIView *)navigationView {
if (!_navigationView) {
_navigationView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
_navigationView.backgroundColor = [UIColor whiteColor];
_navigationView.alpha = 0.0;
[_navigationView addSubview:self.titleLabel];
[_navigationView addSubview:self.backButton];
}
return _navigationView;
}
- (UIView *)headerView {
if (!_headerView) {
_headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 200)];
[_headerView addSubview:self.headerImageView];
}
return _headerView;
}
- (UIImageView *)headerImageView {
if (!_headerImageView) {
_headerImageView = [[UIImageView alloc] initWithFrame:self.headerView.bounds];
_headerImageView.image = [UIImage imageNamed:@"1234"];
}
return _headerImageView;
}
- (UILabel *)titleLabel {
if (!_titleLabel) {
_titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 64)];
_titleLabel.center = self.navigationView.center;
_titleLabel.text = @"西天取经";
_titleLabel.alpha = 0.0;
}
return _titleLabel;
}
- (UIButton *)backButton {
if (!_backButton) {
_backButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 40, 64)];
[_backButton setImage:[UIImage imageNamed:@"cancel"] forState:UIControlStateNormal];
_backButton.alpha = 0.0;
}
return _backButton;
}
3. 把你的tableView和自定义的View以及其他控件都add进去
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.tableView];
[self.view addSubview:self.navigationView];
}
4. 接下来就是tableView的代理和数据源方法
#pragma mark -- /*tableViewData&Delegate*/
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 15;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:@"cell"];
}
cell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
return cell;
}
这个地方是最重要的地方通过监听滚动的位置去判断是否显示导航栏通过yOffset的大小去实时改变导航栏的alpha值从而实现渐隐效果
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat yOffset = scrollView.contentOffset.y;
if (yOffset > 0) {
self.navigationView.alpha = yOffset / 64;
self.titleLabel.alpha = yOffset / 64;
self.backButton.alpha = yOffset / 64;
}else if (yOffset <= 0) {
self.navigationView.alpha = 0.0;
self.titleLabel.alpha = 0.0;
self.backButton.alpha = 0.0;
}
}
最后附上定义的几个属性
@property(nonatomic,strong)UITableView *tableView;/**< 界面布局*/
@property(nonatomic,strong)UIView *navigationView;/**< 渐变的nav*/
@property(nonatomic,strong)UIView *headerView;/**< 头*/
@property(nonatomic,strong)UIImageView *headerImageView;/**< 图片*/
@property(nonatomic,strong)UILabel *titleLabel;/**< 标题*/
@property(nonatomic,strong)UIButton *backButton;/**< 返回按钮*/
不要忘记遵循tableView的代理和数据源哦~
