Swift - 去掉导航栏的半透明效果（元素被导航栏遮挡问题）

2017-08-25 发布：hangge 阅读：6130

一、取消导航栏的半透明效果

我们知道默认情况下，导航栏（navigationBar）的背景是半透明的。

如果想要让导航栏背景不透明，通常有如下两种修改方法：

方法1：在 StoryBoard 中设置

（1）选中 Navigation Bar，然后在其属性面板中去掉“Translucent”的勾选。

（2）运行效果如下：

方法二：在代码中设置

（1）下面代码通过 isTranslucent 属性关闭导航栏的半透明效果，并且将其背景色设为橙色。

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //关闭导航栏半透明效果
        self.navigationController?.navigationBar.isTranslucent = false
        //修改导航栏背景色
        self.navigationController?.navigationBar.barTintColor = .orange
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

（2）运行效果如下：

二、解决控件被导航栏遮住的问题

默认情况下，即使视图中上有 navigationBar，那么视图仍会延伸覆盖到四周的区域。也就是说默认的布局仍然是从顶部开始。

比如我们在 (0,0) 位置处添加一个 UISwitch 开关组件：

import UIKit

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

        let uiswitch = UISwitch()
        uiswitch.frame.origin = CGPoint(x:0, y:0)
        uiswitch.isOn = true
        self.view.addSubview(uiswitch)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

默认结果如下，UISwitch 会被导航栏遮挡：

要解决这个问题通常有两种做法。

方法1：修改 edgesForExtendedLayout 属性

通过该属性可以指定边缘要延伸的方向，我之前已经写过一篇相关的文章，有兴趣的可以点击查看：Swift - edgesForExtendedLayout属性介绍（元素被导航栏遮挡问题）

方法2：将导航栏设为不透明

（1）我们只要将导航栏的半透明属性设置为 false，这样布局就会从导航栏下面开始了。

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //关闭导航栏半透明效果
        self.navigationController?.navigationBar.isTranslucent = false
        
        let uiswitch = UISwitch()
        uiswitch.frame.origin = CGPoint(x:0, y:0)
        uiswitch.isOn = true
        self.view.addSubview(uiswitch)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

（2）运行效果如下：