导航栏细线与阴影显示问题

某项目中,关于导航栏显示问题主要有以下几种情况出现:
1)导航栏不透明,有细线;
2)导航栏不透明,无细线;
3)导航栏不透明,有阴影,无细线;
4)导航栏透明,无阴影,无细线

先说说navigationController.navigationBar.translucent设置问题,
当该值为YES时,导航透明,导航栏的颜色通常为viewController.view在(0,0,self.view.bounds.size.with,64)这一位置的顶层视图的背景色,侧滑效果类似图一,为NO时,可通过设置navigationBar.barTintColor来设置导航栏的背景色,侧滑效果类似图二。


图一.png
图二.png

我主要选择了图一的侧滑效果,再结合侧滑返回的平滑过渡问题,我是这么处理的:
在BaseViewController的基类中,设置

self.navigationController.navigationBar.translucent = YES;

这样设置,开启了导航透明,在一个导航透明与导航不透明时,侧滑效果就类似于图一展示的这样。而如果导航透明关闭,在这样的两个页面之间侧滑时,会出现类似下图这样的效果:


屏幕快照 2018-01-15 上午9.38.44.png

当然,此时,也可通过navigationBar的hidden属性来控制以达到图一的侧滑效果。
导航栏细线获取:在UINavigationController的category中

- (UIImageView *)hh_navHairLine{
    UIImageView *hairLine = objc_getAssociatedObject(self, navHairLineKey);
    hairLine = [self findHairlineImageViewUnder:self.navigationBar];
    return hairLine;
}

//TODO: 导航的线条
- (UIImageView *)findHairlineImageViewUnder:(UIView *)view {
    if ([view isKindOfClass:UIImageView.class] && view.bounds.size.height <= 1.0) {
        return (UIImageView *)view;
    }
    for (UIView *subview in view.subviews) {
        UIImageView *imageView = [self findHairlineImageViewUnder:subview];
        if (imageView) {
            return imageView;
        }
    }
    return nil;
}

导航阴影设置:


- (void)hh_dropShadowWithOffset:(CGSize)offset
                         radius:(CGFloat)radius
                          color:(UIColor *)color
                        opacity:(CGFloat)opacity{
    
    self.navigationBar.layer.shadowColor = color.CGColor;
    self.navigationBar.layer.shadowOffset = offset;
    self.navigationBar.layer.shadowRadius = radius;
    self.navigationBar.layer.shadowOpacity = opacity;
    
//    self.navigationController.navigationBar.layer.shadowPath = [UIBezierPath bezierPathWithRect:self.navigationController.navigationBar.bounds].CGPath;
//
//    // Default clipsToBounds is YES, will clip off the shadow, so we disable it.
//    self.navigationBar.clipsToBounds = NO;
}

这样在需要的页面,直接设置阴影和细线的显示就可以了。

在此需要注意,因为在base中开启了导航透明,因此在导航阴影显示的页面,需要关闭导航透明,否则阴影不显示。
若设置了navigationBar.layer.shadowPath,但导航透明未关闭,则侧滑效果不理想。话说,这么一个小小的坑,就磨了我好久,最后才注意到是导航透明设置的问题哇!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容