文档章节

ios 导航栏样式设置

余成海
 余成海
发布于 2016/10/19 15:46
字数 799
阅读 106
收藏 0

叙述

ios中导航栏是一个很头疼的东西,因为navigationbar是统一设置,无法实现每个页面有自己的导航栏样式。解决的办法有两个,

1、隐藏系统自带的self.navigationViewController.navigationBar,在baseViewController中自己添加一个navigationBar,这样就可以在每个vc中设置自己的样式了

优点:各管各的,不会相互影响,使用方便

缺点:不会有过度渐变效果,每个页面都创建navigationBar,消耗稍微大点

 

2、在vc出现的时候时(viewWillAppear)重新设置导航栏样式

优点:系统原生,效率高,可自定义导航栏过渡动画效果

缺点:容易出坑

 

-----------------------------凌乱分割线-----------------------------

接下来以第二种方法为例,看看怎么设置导航栏样式:

1、修改导航栏背景颜色

默认导航栏只有两个样式:黑色毛玻璃和白色毛玻璃

[self.navigationController.navigationBar setBarStyle:UIBarStyleBlack];

设置导航栏的颜色:

[self.navigationController.navigationBar setBarTintColor:[UIColor blueColor]];

由于模式原因,会混上白色或者黑色蒙蔽+背景高斯模糊效果,所以设置的意思未必是你想要的真正颜色,网上有些颜色转换的方法,但是我试了都不是特别准,写一个相对好点的

- (UIColor *)barColorTransitionWithColor:(UIColor *)color {
    
    CGFloat red, green, blue, alpha;
    [color getRed:&red green:&green blue:&blue alpha:&alpha];
    
    CGFloat opacity = 0.4;
    
    CGFloat minVal = MIN(MIN(red, green), blue);
    
    if ([self convertValue:minVal withOpacity:opacity] < 0) {
        opacity = [self minOpacityForValue:minVal];
    }
    
    red = [self convertValue:red withOpacity:opacity];
    green = [self convertValue:green withOpacity:opacity];
    blue = [self convertValue:blue withOpacity:opacity];
    
    red = MAX(MIN(1.0, red), 0);
    green = MAX(MIN(1.0, green), 0);
    blue = MAX(MIN(1.0, blue), 0);
    
    return [UIColor colorWithRed:red green:green blue:blue alpha:1.];
}

- (CGFloat)minOpacityForValue:(CGFloat)value
{
    return (0.4 - 0.4 * value) / (0.6 * value + 0.4);
}

- (CGFloat)convertValue:(CGFloat)value withOpacity:(CGFloat)opacity
{
    return 0.4 * value / opacity + 0.6 * value - 0.4 / opacity + 0.4;
}

2.设置导航栏透明度

直接设置navigationBar的alpha是什么效果的,需要获取到navigation的subview,这里ios10的subview类名有所改变,所以要特殊处理

NSString *backgroundViewClass = @"_UINavigationBarBackground";
if (IOS10) {
    backgroundViewClass = @"_UIBarBackground";
}
for (UIView * subView in self.subviews) {
    if ([subView isKindOfClass:NSClassFromString(backgroundViewClass)]) {
        [self setOverlay:subView];
        return subView;
    }
}

设置这个subview的alpha就能达到导航栏的透明度,而不影响导航栏上面item

3.控制导航栏分割线

同样可以遍历navbar的subview获取到分割线的view进行控制

- (UIImageView *)yxBottomLine:(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 yxBottomLine:subView];
        if (imageView)
        {
            return imageView;
        }
    }
    return nil;
}

4.修改导航栏item颜色:

[self.navigationController.navigationBar setTintColor:color];

5.修改导航栏标题样式:

NSDictionary *attributes=[NSDictionary dictionaryWithObjectsAndKeys:titleColor, NSForegroundColorAttributeName, [UIFont boldSystemFontOfSize:17], NSFontAttributeName, nil];
[self.navigationController.navgationBar setTitleTextAttributes:attributes];

6.添加导航栏过度渐变动画:

[[self transitionCoordinator] animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
                                                                            [self updateNavigationBarType:type];
                                                                    } completion:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
                                                                        if (![context isCancelled]) {
                                                                            [self updateNavigationBarType:type];
                                                                        }
                                                                    }];

在导航栏样式发送变化的时候放到这个函数里来,ps:ios10过度动画不理想,可以ios10参考第一中方法实现

7.自定义导航栏返回按钮图标

- (void)updateNavBackItemIcon {
    [self.navigationController.navigationBar setBackIndicatorImage:[UIImage imageNamed:@"icon_navigation_back"]];
    [self.navigationController.navigationBar setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"icon_navigation_back"]];
    [[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setTitleTextAttributes: @{NSFontAttributeName:[UIFont systemFontOfSize:15.0]}
                                                                                            forState:UIControlStateNormal];
}

 

我已经写好的导航栏样式库:https://github.com/Jonear/JNNavigation (欢迎大家使用)

© 著作权归作者所有

共有 人打赏支持
余成海
粉丝 62
博文 57
码字总数 29577
作品 0
杭州
iOS工程师
私信 提问
定制iOS 7中的导航栏和状态栏

由于种种原因,申请了一个开源中国的帐号,也许会由于我的不耐心,不会亲自去一步步的写博文,但准备把自己看到的好的,都转载过来,就当时资源的存储,也算是一种推广吧。 iOS 7 教程:定制...

谁家的阿毛
2013/11/21
0
0
iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码

iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用。(http://www.code4app.com/thread-10375-1-1.html) 使用OpenGLE覆盖阿尔法通道视频动画播放器视图。(http://www.code4app.com/thread-3...

sunnyaigd
2018/07/31
0
0
『React Navigation 3x系列教程』之createStackNavigator开发指南

createStackNavigator 提供APP屏幕之间切换的能力,它是以栈的形式还管理屏幕之间的切换,新切换到的屏幕会放在栈的顶部。 屏幕转场风格 默认情况下,createStackNavigator提供了转场过渡效果...

JiaPengHui
2018/12/24
0
0
iOS 7:用代码解决视图控制器的View整体上移问题

如果你准备将你的老的 iOS 6 app 迁移到 iOS 7 上,那么你必须注意了。当你的老的 app 在 iOS 7 设备上运行时,所有ViewController 的视图都整体上移了,因为 iOS 7 把整个屏幕高度(包括状态...

mingxun
2014/06/09
0
0
React Navigation

https://reactnavigation.org/docs/intro/nesting 官网 http://blog.csdn.net/u013718120/article/details/72357698 http://www.jianshu.com/p/2f575cc35780 这里只是基本用法,高级详情用法......

Chason-洪
2017/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

GlusterFS的再次节点重置和恢复

采用Ubuntu+ZFS+GlusterFS的存储集群,其中一个节点再次出现故障,gluster volume status显示为N/A状态。 检查网络,发现原来的IP地址 10.1.1.193发生了改变(估计被DHCP重新分派地址了),导...

openthings
28分钟前
5
0
BOM与正则表达式

BOM BOM的全称叫做Browser OjbectModel 浏览器对象模型,它定义了操作浏览器的接口。 BOM对象包括:Window、History、Navigator、Screen和Location。但是由于浏览器厂商的不同,BOM对象的兼容...

Panda-Q
28分钟前
1
0
牵头函数

箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或new.target。这些函数表达式更适用于那些本 来需要匿名函数的地方,并且它们不能用作构造函数。 首先:我们先...

wshining
34分钟前
1
0
mysql把一个数据库中的数据复制到另一个数据库中的表 2个表结构相同

首页 问题 全部问题 经济金融 企业管理 法律法规 社会民生 科学教育 健康生活 体育运动 文化艺术 电子数码 电脑网络 娱乐休闲 行政地区 心理分析 医疗卫生 精选 知道专栏 知道日报 知道大数据...

linjin200
34分钟前
1
0
python redis操作

redis命令:http://blog.csdn.net/yhl27/article/details/9936189 python redis: 干货 http://www.cnblogs.com/wangtp/p/5636872.html http://doc.redisfans.com/ http://developer.51cto.......

stys35
35分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部