iOS-导航栏,类似淘宝“我的淘宝”导航栏

博客介绍了如何在iOS项目中实现类似淘宝‘我的淘宝’导航栏的效果,通过隐藏系统导航栏并自定义导航栏来达到目的。在实现过程中遇到了自定义按钮在push和pop时显示问题,以及导航栏透明度的处理。提供了简单的实现步骤和代码片段,并邀请大牛赐教优化方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大牛路过还请赐教~

实现的效果

效果描述:
    1、个人中心页面,上滑操作时,导航栏从无到有渐变,背景是一张图片,不是颜色。
    2、设置按钮不管导航栏是有还是无,始终存在显示。
    3、标题“我的”随着导航栏的渐变渐变。
    4、从我的页面push进入的二级页面的导航栏背景是白色的。

动态图效果:
这里写图片描述

其实开始做项目的时候我是搜索的第三方HYNavHidden传送门

但是有一个 bug我不知道怎么解决,就是如果导航栏的rightItem和LeftItem是自定义按钮的话,多次push和pop时,这个自定义按钮有几次回来时是看不见的,而且标题也会闪一下。

这个体验不太好,就自己用下面的方式实现了,虽然效果实现了,但是我经验有限,技术不精,不能保证性能,若某位大牛有更优的方案,还请赐教。

实现要点:隐藏系统导航栏,自定义若隐若现导航栏

1、隐藏导航栏
设置导航栏的代理为当前控制器,实现下列代理方法
#pragma mark - UINavigationControllerDelegate
// 将要显示控制器
- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated {
    // 判断要显示的控制器是否是自己
    BOOL isShowHomePage = [viewController isKindOfClass:[self class]];

    [self.navigationController setNavigationBarHidden:isShowHomePage animated:YES];
}

或者以下代码也可以实现隐藏导航栏

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    [self.navigationController setNavigationBarHidden:YES animated:NO];
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];

    [self.navigationController setNavigationBarHidden:NO animated:NO];
}
//⚠️这里的animated动画设置为YES的时候会有一个向上的隐藏动画,因此就设置为NO了。
2、自定义导航栏

⚠️自定义了UI View当导航栏,因为需要实现导航栏透明但是上面的子视图设置按钮不透明所以不能使用alpha。父视图透明子视图不透明参考链接

1、初始化自定义的导航栏;
2、初始化导航栏父视图的时候,用以下方法([UIColor colorWithRed:(236)/255.0 green:(59)/255.0 blue:(59)/255.0 alpha:0.0];或者colorWithWhite:<#(CGFloat)#> alpha:<#(CGFloat)#>)设置颜色的alpha值为0,设置背景图片imageView和标题title的alpha值为0,保证进来页面时无导航栏,此时设置按钮还能显示出来。

3、实现滑动视图ScrollViewDelegate的代理方法scrollViewDidScroll,计算动态的alpha值,改变alpha。
#pragma mark - UIScrollViewDelegate 核心代码
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    //初始值-20,往上滑 > -20;
    CGFloat alpha;

    //这里的300意思是滑动300距离的时候完全不透明,可以调节
    CGFloat offsetY = 300;
    CGPoint point = self.tableView.contentOffset;
    alpha =  point.y/offsetY;
    alpha = (alpha <= 0) ? 0 : alpha;
    alpha = (alpha >= 1) ? 1 : alpha;

    self.navBgImgView.alpha = alpha;
    self.titleLabel.alpha = alpha;
    self.navigationView.backgroundColor = [UIColor colorWithRed:(236)/255.0 green:(59)/255.0 blue:(59)/255.0 alpha:alpha];
}

demo地址有用的话请点个星,谢谢^_^

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值