美文网首页
导航栏细线与阴影显示问题

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

作者: 最晴天 | 来源:发表于2018-01-11 19:32 被阅读79次

某项目中,关于导航栏显示问题主要有以下几种情况出现:
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,但导航透明未关闭,则侧滑效果不理想。话说,这么一个小小的坑,就磨了我好久,最后才注意到是导航透明设置的问题哇!

相关文章

网友评论

      本文标题:导航栏细线与阴影显示问题

      本文链接:https://www.haomeiwen.com/subject/veutoxtx.html