设置导航栏全透明效果

关注

转载最新推荐文章于 2026-03-29 00:15:00 发布 2.7k 阅读 AI 写同款· GEO 优化 ›

Android 12.0 framework关于systemUI定制之导航栏透明背景的功能实现在12.0的系统rom产品定制化开发中，在对于系统原生SystemUI的导航栏背景在沉浸式导航栏的情况下默认是会随着背景颜色的变化而改变的，在一些特定背景下导航栏的背景也是会改变的，所以由于产品开发需要要求需要设置导航栏背景为透明的，所以就需要在Activity创建的时候设置导航栏的背景色来完成功能的开发阅读详情

前言

本篇是iOS开发技巧系列博客的第五篇，本篇主要和大家一起分享如何设置导航栏全透明效果。在实际开发中也经常会有这样的需求，比如iPhone版本的QQ音乐，其播放音乐界面的导航栏就是透明的，如下所示：

这里写图片描述

实现

为简化操作，这里我们使用 storyboard 简单搭建界面，为视图控制器添加导航栏，并为其添加两个 item 属性（具体实现这里不再阐述），如下所示：

这里写图片描述

运行工程，效果如下：

这里写图片描述

接下来，在 ViewController.Swift 文件中添加如下代码：

import UIKit

class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()

    // 1、设置视图背景颜色
    self.view.backgroundColor = UIColor(white: 0.25, alpha: 1.0)

    // 2、设置导航栏标题属性：设置标题颜色
    self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName:UIColor.whiteColor()]
    // 3、设置导航栏前景色：设置item指示色
    self.navigationController?.navigationBar.tintColor = UIColor.whiteColor()

    // 4、设置导航栏半透明
    self.navigationController?.navigationBar.translucent = true

    // 5、设置导航栏背景图片
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)

    // 6、设置导航栏阴影图片
    self.navigationController?.navigationBar.shadowImage = UIImage()
}

}
现在导航栏全透明效果已经实现了，为了看起来效果更佳，我们还需要修改下状态栏的样式，大家可参考这篇博客，此处不再阐述。运行工程，我们即可看到如下效果了：

这里写图片描述

Tips

1、如果在导航栏全透明效果下，你需要导航栏的分界线，你可以不设置导航栏的shadowImage属性，即上述代码中的第6步可不要。

2、通过同样的方法，我们也可以设置标签栏的全透明效果。
文章转自：http://blog.youkuaiyun.com/Hierarch_Lee/article/details/50823575

收录于