Сделайте UINavigationBar прозрачным


Ответы:


635

Если кому-то интересно, как этого добиться в iOS 7+, вот решение (совместимо с iOS 6)

В Objective-C

[self.navigationBar setBackgroundImage:[UIImage new]
                         forBarMetrics:UIBarMetricsDefault];
self.navigationBar.shadowImage = [UIImage new];
self.navigationBar.translucent = YES;

В Swift 3 (iOS 10)

self.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true

Свифт 2

self.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.translucent = true

обсуждение

Установка translucentна YESна панели навигации делает свое дело, из-за поведения, обсужденного в UINavigationBarдокументации. Я сообщу здесь соответствующий фрагмент:

Если вы установите это свойство YESна панели навигации с непрозрачным пользовательским фоновым изображением, панель навигации применит к изображению непрозрачность системы менее 1,0.


29
Отвечая на мой собственный комментарий здесь; чтобы отменить аффект, попробуйте:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;
Иоганн Берджесс

Мне нужен только один ВК, чтобы иметь прозрачную панель навигации. Как мне вернуться к первоначальному стилю после выхода из этого ВК?
Гильерме

2
чтобы достичь этого в Swift из ViewController, сделайте это так: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true
datayeah

Работает также с использованием внешнего вида (iOS7 / 8), см. Gist.github.com/mpycio/ddbdea1adb6b86cf02f6
Махакала

1
Отмена эффекта для меня работает только частично. Потому что после того, как я это сделаю, все мои табличные представления имеют слишком большие заголовки. Во всем приложении, что странно. (Мне нужен только этот эффект для одного контроллера, который я помещаю в стек.)
Henning

29

В iOS5 вы можете сделать это, чтобы сделать панель навигации прозрачной:

nav.navigationBar.translucent = YES; // Setting this slides the view up, underneath the nav bar (otherwise it'll appear black)
const float colorMask[6] = {222, 255, 222, 255, 222, 255};
UIImage *img = [[UIImage alloc] init];
UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];

[nav.navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault]; 
[img release];

6
В iOS 6 вы также захотите убрать тень навигационной панели, иначе это будет выглядеть странно. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
Роберт

23

От IOS7:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.view.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

14

Для тех, кто хочет сделать это в Swift 2.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.translucent = true

или Swift 3.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

2
navigationController - это необязательное свойство, поэтому его нужно развернуть. Просто добавьте self.navigationController? .NavigationBar, и все
готово

10

Это похоже на работу:

@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect {}
@end

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

6
Кажется, что в iOS 5 вы должны переопределить -drawRect:в собственном подклассе, а не в категории, а затем использовать этот подкласс в качестве панели навигации.
Ян Мейер

9

После того, как все остальные сказали выше, то есть:

navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.isTranslucent = true

... моя панель навигации была все еще белой . Поэтому я добавил эту строку:

navigationController?.navigationBar.backgroundColor = .clear

... и вуаля! Это, казалось, сделало трюк.


7

Если вы соберете последнюю бета-версию iOS 13.4 и XCode 11.4, принятый ответ больше не будет работать. Я нашел другой способ, может быть, это просто ошибка в бета-версии программного обеспечения, но я пишу это там, на всякий случай

(быстро 5)

import UIKit

class TransparentNavBar :UINavigationBar {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.setBackgroundImage(UIImage(), for: .default)
        self.shadowImage = UIImage()
        self.isTranslucent = true
        self.backgroundColor = .clear
        if #available(iOS 13.0, *) {
            self.standardAppearance.backgroundColor = .clear
            self.standardAppearance.backgroundEffect = .none
            self.standardAppearance.shadowColor = .clear
        }
    }
}

Потрясающие! Просто искал починку! Прекрасно работает! Спасибо!
Георг

5

Я знаю, что эта тема старая, но если люди хотят знать, как это делается, не перегружая метод drawRect.

Это то, что вам нужно:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

1
Извините, это не правильно. Вам все еще нужно переопределить метод drawRect
Сандер

Почему это не так? Вроде работает в IOS 6 сим. Это не работает в IOS 5? navigationBar.backgroundColor представляется недокументированным.
Кристи

5

Приведенный ниже код расширяет верхний ответ, выбранный для этой темы, чтобы избавиться от нижней границы и установить цвет текста:

  1. Последние две кодированные строки этого кода устанавливают прозрачность. Я позаимствовал этот код из этого потока, и он работал отлично!

  2. Свойство «clipsToBounds» было кодом, который я нашел, который избавился от нижней границы с помощью ИЛИ без установленной прозрачности (так что если вы решите использовать сплошной белый / черный / и т. Д. Фон, границы все равно не будет).

  3. Линия "tintColor" (2-я кодированная линия) установила для моей кнопки возврата светло-серый цвет

  4. Я сохранил barTintColor в качестве резервной копии. Я не знаю, почему прозрачность не будет работать, но если это не так, я хочу, чтобы мой BG белый, как раньше

    let navigationBarAppearace = UINavigationBar.appearance()
    navigationBarAppearace.tintColor = UIColor.lightGray
    navigationBarAppearace.barTintColor = UIColor.white
    navigationBarAppearace.clipsToBounds = true
    navigationBarAppearace.isTranslucent = true
    navigationBarAppearace.setBackgroundImage(UIImage(), for: .default)
    navigationBarAppearace.shadowImage = UIImage()

3

для Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

3

C # / Xamarin Solution

NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;

2

Попробуйте следующий фрагмент кода:

self.navigationController.navigationBar.translucent = YES;

1

Другой способ, который сработал для меня, - это создать подкласс UINavigationBar и оставить метод drawRect пустым !!

@IBDesignable class MONavigationBar: UINavigationBar {


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
    // Drawing code
}}

1

В Swift 4.2

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

(в viewWillAppear), а затем в viewWillDisappear, чтобы отменить его, поместите

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false

0

Вы имеете в виду полностью прозрачный или использующий полупрозрачно-черный стиль, который можно увидеть в приложении Photos? Последнее вы можете сделать, установив его barStyleсвойство в UIBarStyleBlackTranslucent. Бывший ... я не уверен в этом. Если вы хотите, чтобы элементы на нем все еще были видны, вам, возможно, придется покопаться в иерархии представлений панели и удалить представление, содержащее его фон.


2
Я имею в виду первое. Я попытался создать категорию и переопределить метод drawRect для UINavigationBar (вызывая CGContextClearRect), но это сделало его полностью черным. Элементы все еще были видны, хотя.
2010 года

0

Это работает для Swift 2.0.

navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true

0

Проверьте RRViewControllerExtension , которое предназначено для управления внешним видом UINavigation bar.

с RRViewControllerExtension в вашем проекте, вам просто нужно переопределить

-(BOOL)prefersNavigationBarTransparent;

у вас viewcontroller.

прозрачная панель навигации


-2
extension UINavigationBar {
var isTransperent: Bool {
        get {
            return false // Just to satisfy property
        }
        set {
            if newValue == true {
                self.shadowImage   = UIImage()
                self.isTranslucent = true
                self.setBackgroundImage(UIImage(), for: .default)
            }else{
                self.shadowImage   = UIImage()
                self.isTranslucent = false
                self.setBackgroundImage(nil, for: .default)
            }
        }
    }
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.