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

121

Я создаю приложение, просматриваю Интернет, и мне интересно, как они делают эту прозрачную панель навигации следующим образом:

введите описание изображения здесь

Я добавил следующее, как в моем приложении:

UINavigationBar.appearance().translucent = true

но это просто выглядит следующим образом:

введите описание изображения здесь

Как сделать панель навигации прозрачной, как первое изображение

Питер Пик
источник
С кодом, который я не знаю, но если вы хорошо разбираетесь в CSS, вы можете использовать фреймворк (Pixate: freestyle.org ) и просто применить стиль CSS к своей панели навигации :)!
Николас Чарвоз

Ответы:

286

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

Objective-C:

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                     forBarMetrics:UIBarMetricsDefault]; //UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.shadowImage = [UIImage new];////UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor clearColor];

Swift 3:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) //UIImage.init(named: "transparent.png")
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = .clear

Надеюсь, это поможет вам ..!

Vidhyanand
источник
4
когда я устанавливаю BackgroundImage, он удаляет barTintColor?
Питер Пик
Вы можете получить изображение панели навигации .. В соответствии с вашими потребностями .. и примените к панели навигации, как указано выше .. (Изображение, которое вы хотите применить к панели навигации)
Видхянанд
1
установка backgroundColor для navigationController не обязательна
мэтт безарк
4
Благодаря этому решению я получаю черную панель навигации, есть идеи?
Карлос дель Бланко
1
Не так, как ожидалось. Когда вы это сделаете, у вас не будет прозрачной стены, как с альфой 0,7 вправо, ПЛЮС, закрывающей строку состояния. Если вы сделаете это на iOS 13, у вас будет только красивый красивый прямоугольник, а над ним СТАТУС КРИСТАЛЛИЧЕСКАЯ ОЧИСТКА. что у автора вопрос свой ясный и конкретный.
Marlhex
122

Быстрое решение

Это лучший способ, который я нашел. Вы можете просто вставить его в свой метод appDelegate didFinishLaunchingWithOptions :

Свифт 3/4

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = .clear
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().isTranslucent = true
    return true
}

Swift 2.0

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().translucent = true

    return true
}

источник: Сделайте панель навигации прозрачной относительно изображения ниже в iOS 8.1

Дэн Больё
источник
4
Ваше решение Swift 3 просто делает мою панель просто белой.
Хосе Рамирес
@JozemiteApps попробуйте создать новый проект Xcode и вставить код. Требуется всего 3 минуты, чтобы убедиться, что это мой код выше или что-то в вашем проекте, которое вызывает это.
Дэн Болье
2
У меня также есть простой белый навибар и без прозрачного навибара
Kingalione
Это отлично работает, спасибо! Знаете ли вы, как это реализовать, чтобы прозрачными были только панели навигации на желаемых ViewController?
RufusV
@JoseRamirez Это, вероятно, фон viewController, который вы видите. Вам нужно изменить верхнее ограничение первого представления, чтобы выровнять его с супервизором, а не с безопасной областью или полем.
проверено
27

Swift 5 применяется только к текущему контроллеру представления

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    // Make the navigation bar background clear
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    // Restore the navigation bar to default
    navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
    navigationController?.navigationBar.shadowImage = nil
}
Крис Чут
источник
13

Swift 3: расширение для прозрачной панели навигации

extension UINavigationBar {
    func transparentNavigationBar() {
    self.setBackgroundImage(UIImage(), for: .default)
    self.shadowImage = UIImage()
    self.isTranslucent = true
    }
}
Анкит Кумар Гупта
источник
12

Swift 4.2 Решение: для прозрачного фона:

  1. Для общего подхода:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
    
    }
  2. Для конкретного объекта:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        navBar.shadowImage = UIImage()
        navBar.navigationBar.isTranslucent = true
    
    }

Надеюсь, это будет полезно.

Ümañg ßürmån
источник
С каким объектом вы имеете в виду navBar?
Сергей Гамаюнов
@SergeyGamayunov navBarздесь, ссылается на объект UINavigationBar.
Ümañg ßürmån
Вот что он имеет в виду ... let navBar = self.navigationController? .NavigationBar
Marlhex
8

Мне удалось сделать это быстро:

let navBarAppearance = UINavigationBar.appearance()
let colorImage = UIImage.imageFromColor(UIColor.morselPink(), frame: CGRectMake(0, 0, 340, 64))
navBarAppearance.setBackgroundImage(colorImage, forBarMetrics: .Default)

где я создал следующий служебный метод в UIColorкатегории:

imageFromColor(color: UIColor, frame: CGRect) -> UIImage {
  UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
  color.setFill()
  UIRectFill(frame)
  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return image
}
Джулиан Б.
источник
Это должен быть главный ответ!
Михаил Салари
7

Что у меня сработало:

    let bar:UINavigationBar! =  self.navigationController?.navigationBar
    self.title = "Whatever..."
    bar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    bar.shadowImage = UIImage()
    bar.alpha = 0.0 
Хавьер Калатрава Ллаверия
источник
5

Установите свойство background вашего navigationBar, например

navigationController?.navigationBar.backgroundColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.5)

(Возможно, вам придется немного изменить это, если у вас нет контроллера навигации, но это должно дать вам представление о том, что делать.)

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

Atomix
источник
Это дает мне следующее: i.stack.imgur.com/GT3WV.png Как я могу сделать немного более красным, как первая ссылка (изображение), которую я опубликовал
Питер Пик
Вы можете поиграть со значением альфа и изменить его с 0,5 на любое значение от 0,0 до 1,0. И, как я уже сказал, убедитесь, что представление ниже находится под панелью навигации, иначе вы не увидите, что какой-либо контент просвечивает через панель. Если вы используете Interface Builder, вы можете перетащить и выровнять верхний край этого представления с верхним краем экрана.
Atomix
2

Попробуйте это, у меня это работает, если вам также нужно поддерживать ios7, он основан на прозрачности UItoolBar:

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                                                  forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.translucent = YES;
    self.navigationController.view.backgroundColor = [UIColor clearColor];
    UIToolbar* blurredView = [[UIToolbar alloc] initWithFrame:self.navigationController.navigationBar.bounds];
    [blurredView setBarStyle:UIBarStyleBlack];
    [blurredView setBarTintColor:[UIColor redColor]];
    [self.navigationController.navigationBar insertSubview:blurredView atIndex:0];
EmilDo
источник
2

Для тех, кто ищет решение OBJC, для добавления в метод App Delegate didFinishLaunchingWithOptions:

[[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[UINavigationBar appearance].shadowImage = [UIImage new];
[UINavigationBar appearance].backgroundColor = [UIColor clearColor];
[UINavigationBar appearance].translucent = YES;
david72
источник
1

Если вы хотите иметь возможность делать это программно в swift 4, оставаясь в том же представлении,

if change {
        navigationController?.navigationBar.isTranslucent = false
        self.navigationController?.navigationBar.backgroundColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
        navigationController?.navigationBar.barTintColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
    } else {
        navigationController?.navigationBar.isTranslucent = true
        navigationController?.navigationBar.setBackgroundImage(backgroundImage, for: .default)
        navigationController?.navigationBar.backgroundColor = .clear
        navigationController?.navigationBar.barTintColor = .clear
    }

Однако следует помнить одну важную вещь - нажать эту кнопку в раскадровке. У меня долгое время была проблема с прыгающим дисплеем. Убедитесь, что вы установили это:введите описание изображения здесь

Затем, когда вы изменяете прозрачность панели навигации, это не приведет к скачку представлений, поскольку представления расширяются до самого верха, независимо от видимости панели навигации.

paul_f
источник
1

Добавьте это в свой груз

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.0)
//adjust alpha according to your need 0 is transparent 1 is solid
Абхишек Маурья
источник
0

Служебный метод, который вы вызываете, передавая navigationController и цвет, который вы хотите установить на панели навигации. Для прозрачных вы можете использовать clearColorвUIColor классе.

Для цели c -

+ (void)setNavigationBarColor:(UINavigationController *)navigationController 
                               color:(UIColor*) color {
   [navigationController setNavigationBarHidden:false animated:false];
   [navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
   [navigationController.navigationBar setShadowImage:[UIImage new]];
   [navigationController.navigationBar setTranslucent:true];
   [navigationController.view setBackgroundColor:color];
   [navigationController.navigationBar setBackgroundColor:color];
}

Для Swift 3.0 -

class func setNavigationBarColor(navigationController : UINavigationController?, 
                                 color : UIColor) {
    navigationController?.setNavigationBarHidden(false, animated: false)
    navigationController?.navigationBar .setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.translucent = true
    navigationController?.view.backgroundColor = color
    navigationController?.navigationBar.backgroundColor =  color
}
Рахул
источник
0

Я работал над этим и столкнулся с проблемой, используя ответы, предоставленные здесь разными пользователями. Проблема заключалась в белом квадрате позади прозрачного изображения NavigationBar на iOS 13+

введите описание изображения здесь

Мое решение это одно

if #available(iOS 13, *) {
    navBar?.standardAppearance.backgroundColor = UIColor.clear
    navBar?.standardAppearance.backgroundEffect = nil
    navBar?.standardAppearance.shadowImage = UIImage()
    navBar?.standardAppearance.shadowColor = .clear
    navBar?.standardAppearance.backgroundImage = UIImage()
}

Надеюсь, это поможет любому, у кого такая же проблема

Рейнир Мелиан
источник