有很多項目中用了導(dǎo)航欄項目漸隱的效果,在滑動頁面的時候顯示導(dǎo)航欄######
系統(tǒng)的導(dǎo)航欄是不能滿足這個需求的(目前筆者不知道系統(tǒng)的導(dǎo)航欄可以完成這個需求)
我是通過自定義的View來代替系統(tǒng)的導(dǎo)航欄去完成這個需求
廢話不多說現(xiàn)在開始擼代碼
1. 如果你給當(dāng)前的控制器加了導(dǎo)航欄之后你需要把系統(tǒng)的給隱藏掉
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
self.navigationController.delegate = self;
}
2. 懶加載創(chuàng)建一個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 = @"西天取經(jīng)";
_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的代理和數(shù)據(jù)源方法
#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;
}
這個地方是最重要的地方通過監(jiān)聽滾動的位置去判斷是否顯示導(dǎo)航欄通過yOffset的大小去實時改變導(dǎo)航欄的alpha值從而實現(xiàn)漸隱效果
- (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的代理和數(shù)據(jù)源哦~
