返回 导航

Swift

hangge.com

Swift - 导航栏背景全透明效果的实现（沉浸式效果）

作者：hangge | 2018-05-21 08:10
    我们常常会发现一些 App 的导航栏背景是完全透明的，比如下面的 QQ 音乐播放界面：
  

    由于导航栏背景透明，那么整个视图的背景便会占据全部的可视区域，从而让用户有一种沉浸式的体验。下面通过样例演示如何实现这个效果。

1，实现原理 

（1）如果想让导航栏（navigationBar）透明，只需将导航栏背景图片（backgroundImage）设置为一个空的 image 即可。不过这样设置后，导航栏下方还是会有一条灰色色的分隔线。
//设置导航栏背景为空图片
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)

（2）如果要去除这个黑边，同样将导航栏的 shadowImage 设置为一个空的 image 即可。 
//设置导航栏阴影为空图片
self.navigationController?.navigationBar.shadowImage = UIImage()

2，完整样例

（1）我们在 viewWillAppear 方法中将导航栏背景设置为透明，同时在 viewWillDisappear 方法中又将其还原，这样保证导航栏透明这对当前页面有效，其他页面的导航栏不会变为透明。 
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //修改导航栏标题文字颜色
        self.navigationController?.navigationBar.titleTextAttributes =
            [.foregroundColor: UIColor.white]
        //修改导航栏按钮颜色
        self.navigationController?.navigationBar.tintColor = UIColor.white
        
        //设置视图的背景图片（自动拉伸）
        self.view.layer.contents = UIImage(named:"bg1.jpg")!.cgImage
    }
    
    //视图将要显示
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        //设置导航栏背景透明
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(),
                                                                    for: .default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
    }
    
    //视图将要消失
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        //重置导航栏背景
        self.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
        self.navigationController?.navigationBar.shadowImage = nil
    }
}

（2）运行效果如下：
评论

全部评论（0）

回到顶部