2016-08-23 2 views
2

Я пытаюсь сделать прозрачную панель навигации, но когда я поставил его прозрачное Это выглядит следующим образом ...: transparentпанель навигация цвета не под статусной строкой

Я хочу, чтобы это выглядело как этот non-transparent

но прозрачный и размытый, как в App Store, но с цветом фона. Проблема заключается в том, что цвет фона navigationcontroller не находится под строкой состояния, как нормальный Моего кода здесь:

self.navigationItem.title = "label" 
self.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default) 
self.navigationBar.shadowImage = UIImage() 
self.navigationBar.isTranslucent = true 
self.navigationBar.backgroundColor = UIColor.init(red: 255/255, green: 0, blue: 0, alpha: 0.7) 

EDIT: У меня есть пользовательский класс для UINavigationController и контроллер представления встроен в UINavigationController

Swift 3, Xcode 8.0 beta 5.

+0

Является ли ваш контроллер представления в встроенный в 'UINavigationController' или же она есть' UINavigationBar' добавил как подвид в представлении? – keithbhunter

+0

Он встроен в UINavigationController – Phyber

+0

У вас есть пользовательский 'UINavigationController', встроенный в' UINavigationController'? Зачем? Можем ли мы увидеть код для пользовательского 'UINavigationController'? – keithbhunter

ответ

2

Давайте разложим эту проблему на части. Во-первых, вам нужно будет использовать UIVisualEffectView, созданный с помощью UIBlurEffect, чтобы получить размытый/прозрачный эффект, который вы хотите. Затем вам нужно будет выяснить, как отобразить это на панели навигации, чтобы заполнить всю панель навигации и эту строку состояния.

Часть 1

Я создал подкласс UIVisualEffectView, чтобы добавить градиент. Мы можем использовать это представление для создания желаемого размытого/прозрачного эффекта.

class GradientVisualEffectView: UIVisualEffectView { 

    private let gradient: CAGradientLayer = { 
     // You can tweak these colors and their alpha to get the desired gradient. 
     // You can also mess with the gradient's locations. 
     $0.colors = [ 
      UIColor.white.withAlphaComponent(0.3).cgColor, 
      UIColor(red: 1, green: 0, blue: 0, alpha: 0.7).cgColor 
     ] 
     return $0 
    } (CAGradientLayer()) 


    override init(effect: UIVisualEffect?) { 
     super.init(effect: effect) 
     layer.addSublayer(gradient) 
    } 

    override func layoutSubviews() { 
     super.layoutSubviews() 

     // Make sure the gradient's frame always matches the blur effect. 
     gradient.frame = bounds 
    } 

} 

Часть 2

Теперь мы должны использовать этот вид в навигационной панели. Я сделал это в UIViewController, который встроен в UINavigationController.

override func viewDidLoad() { 
    super.viewDidLoad() 

    // Remove the nav bar's background 
    let navBar = navigationController!.navigationBar 
    navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default) 
    navBar.backgroundColor = .clear 

    // Create the blur/transparent view. You can mess with styles here to get 
    // different effects. 
    let gradientBlur = GradientVisualEffectView(effect: UIBlurEffect(style: .light)) 
    gradientBlur.translatesAutoresizingMaskIntoConstraints = false 
    navBar.addSubview(gradientBlur) 

    // Constrain the view so that it always matches the nav bar. 
    // The top constraint has a -20 constant so that it will extend above 
    // the nav bar to the status bar. 
    gradientBlur.leftAnchor.constraint(equalTo: navBar.leftAnchor).isActive = true 
    gradientBlur.topAnchor.constraint(equalTo: navBar.topAnchor, constant: -20).isActive = true 
    gradientBlur.rightAnchor.constraint(equalTo: navBar.rightAnchor).isActive = true 
    gradientBlur.bottomAnchor.constraint(equalTo: navBar.bottomAnchor).isActive = true 
} 

Ниже приведено изображение результата моего симулятора. В левом верхнем углу изображения вы видите некоторый размытый текст, где белая часть строки состояния выглядит темнее.

blurred/transparent nav bar

+0

Прекрасно работает. Благодаря! – Phyber

Смежные вопросы