iOS 一种新的修改导航栏样式的方法.

开宗明义:

对系统导航栏最底层的UIView加一层CALayer, 通过操作这个自己创建的CALayer来修改导航栏样式.

修改系统导航栏样式的几种方法

1.使用系统的API, 更换导航栏背景图片

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault];

//或者

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"m_nav"] forBarMetrics:UIBarMetricsDefault];

self.navigationBar.layer.masksToBounds = YES;

优点: 找UI出图就好了.

缺点: 如果项目中导航栏样式需要经常变化, 这样的方式就很麻烦了.需要考虑push和pop的情况. 所以在每个控制器中viewWillAppear和viewDisAppear中都需要写导航栏样式的代码. 而且没办法实现类似QQ中, 滑动时导航栏颜色渐变的效果.

2.在导航栏中加一层UIView.

缺点: 导航栏中插入一层UIView后, 系统提供的侧滑返回手势失效. 系统的返回按钮不可点击.

一种新的想法

第一种方法, 更换导航栏背景图片应该是应用最多的方法. 但是在系统更新到iOS10之后. 写了self.navigationBar.layer.masksToBounds = YES.之后会发现导航栏最上方状态栏的位置, 颜色设置失效了.

观察发现苹果在iOS10 的SDK中对导航控制器添加了许多新的API. 可能在增加这些API的同时, 也对导航控制器的机制做了一些修改.

我的手机更新到iOS10之后发现几个大厂出的app导航栏也出了问题...

处理导航栏问题. 最根本的办法还是全部自定义.但是自定义写起来实在太过麻烦. 最好还是能在系统导航栏的基础上做简单修改实现我们想要的效果.

为此我想到的办法是在系统导航栏的各个层次中找到最底层的UIView. 对这一层UIView添加一层CALayer. 首先保证导航栏中其他的UIView全部是透明的. 然后通过操作这个我们创建的CGLayer来达到控制导航栏样式的目的.

经过我的实验发现添加CALayer不会影响系统的返回按钮和系统的侧滑返回手势(话说这个返回手势做的确实很好用, 很舒服.).

步骤.

将导航栏的Translate属性设置为YES.

在NavigationController中的ViewDidLoad方法中遍历当前View的SubView找到数组的"0"号元素.(iOS9的SDK中提供了拿到最底层view的API. 但是app需要支持iOS8. 不能使用这个API.)

创建一个CALayer.将这个CALayer添加到"0"号元素(它是一个UIView)subLayer中.

将导航栏中的所有的UIView设置为透明.(用文章开始的第一种方法, 设置透明图片).

over. 以后需要设置导航栏颜色, 就对这个CALayer设置颜色即可. 还可以通过操作CALayer实现导航栏颜色渐变等效果.

代码.

我的项目中导航栏样式会发生多次变化. 所以对导航栏使用上面的方法进行了一些简单封装.

使用方法. 初始化navigationController之后通过接口给导航栏初始的样式. 以后如果需要修改导航栏样式就在push之前修改样式即可.

代码链接.

https://github.com/ddyd369/ZDNavigationController

转发请注明出处(简书 行如风).

我的理解有什么错漏之处还请指出谢谢

ios 系统状态栏样式修改_iOS 一种新的修改导航栏样式的方法(支持iOS10).相关推荐

  1. Android获取屏幕宽高,状态栏宽高,actionbar宽高,layout宽高,导航栏高度的方法汇总

    看这个博客你可以知道 获取屏幕宽高,状态栏宽高,actionbar宽高,layout宽高,导航栏(虚拟按键栏)高度的方法 目录顺序为 代码测试的机型 状态栏高度 actionbar高度 屏幕高度 导航 ...

  2. 修改bootstrap导航栏样式(颜色,高)

    提示:记录bootstrap导航栏样式(颜色,高)的修改 文章目录 前言 一.bootstrap导航栏样式 (颜色,高) 的修改 前言 在写自适应网页时想使用bootstrap实现,但与原稿的有一些差 ...

  3. H5导航栏被IOS系统状态栏覆盖问题解决

    问题描述 在开发h5小程序时发现安卓系统中页面正常显示,但在iPhone中导航栏被系统状态栏覆盖. 解决方法 env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定 ...

  4. 导航栏样式HTML,[JavaScript 实例] 导航栏几种常见样式

    这里记录下导航栏几种常见的样式,仅供大家参考. 导航栏1 (原生 JS 代码) 比较常见也比较简单的导航栏 ,用的 JavaScript 原生代码,大致思路是通过改变 li 元素的 className ...

  5. 直播系统代码,自行更改导航栏样式

    直播系统代码,自行更改导航栏样式实现的相关代码 1.添加导航栏的UI引用 app.module.tsimport { MatToolbarModule } from '@angular/materia ...

  6. 陈旿 计算机网络视频,一种新的实时半实物网络仿真方法

    仿真方法的应用最早可追溯到1773年,法国自然学家用仿真方法做物理实验估计π值.经过200多年的发展,仿真技术已经成为科学实验的有效手段,对科学技术的发展起到了巨大的推动作用.1992年美国提出22项 ...

  7. React-Native 之 GD (二)自定义共用导航栏样式

    1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Naviga ...

  8. React Navigation 导航栏样式调整+底部角标消息提示

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...

  9. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...

最新文章

  1. 衡量微型计算机的性能指标参数有哪些,衡量计算机性能的主要技术指标有哪些?...
  2. 配置jdk相关的记录
  3. CFCC百套计划4 Codeforces Round #276 (Div. 1) E. Sign on Fence
  4. icmp消息类型报告传输_ICMP消息的类型和ICMP消息格式
  5. 再添一所!华中科技大学成立人工智能与自动化学院
  6. Thymeleaf模板如何获取springMVC返回的model值
  7. NTV Media Server G3流媒体服务器搭建经验
  8. linux搭建.net开发环境,ASP.NET Core知多少(5): Linux上搭建.Net Core开发环境
  9. 今日芯声 | 印度 “真香”?苹果三家制造商及三星申请印度智能手机生产计划...
  10. 利用python和Sen2cor对Sentinel2进行批量大气校正
  11. 2021十大杰出现货黄金交易平台排名
  12. 过压过流保护芯片完整篇
  13. 有符号和无符号整型的临界点
  14. Windows7系统使用技巧(如何让你的win7用的更酷)
  15. 精准引流怎么推广:免费的引流推广营销技巧
  16. 数字化时代下,智能运维全栈监控解决方案及案例盘点
  17. 阅读真题 | 真题阅读 做题记录 一
  18. 比swagger更好用的工具?强烈推荐这款零代码侵入的接口管理神器
  19. 微信裂变分销系统是什么?有什么优势?
  20. Python--蚂蜂窝游记爬取代码

热门文章

  1. 自由的百科全书 Wikipedia 18 周岁了
  2. Qt入门学习之美化与样式设置
  3. Web版操作系统:EyeOS、YouOS、ORCA、Desktoptwo、goowy http://blog.sina.com.cn/s/blog_4af93f1b010006fe.html
  4. 如何调整Magic mouse的鼠标灵敏度
  5. uniapp生成pdf文件
  6. 千千静听扩展包(TTPlus) v2007 Build 1001 公测版
  7. Carthage的使用
  8. mosaic系列板卡,通用针脚与诺瓦塔OEM板卡天宝MB2、BD990及常见20pin、24pin、28pin底板轻松适配
  9. echarts 3D折线图应用
  10. 在线画思维导图的工具推荐--Coggle、drawio