美文网首页
iOS开发技巧:设置导航栏全透明效果

iOS开发技巧:设置导航栏全透明效果

作者: 一欧Yiou | 来源:发表于2018-05-16 16:37 被阅读62次

    前言

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


    20160307233347964.jpg

    实现

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


    20160308001055648.jpg

    运行工程,效果如下:


    20160308001721104.jpg

    接下来,在 ViewController.swift 文件中添加如下代码:(放在Base里面最好)

    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()
        }
    }
    

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

    20160308002418559.jpg

    相关文章

      网友评论

          本文标题:iOS开发技巧:设置导航栏全透明效果

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