прозора панель навігації ios


121

Я створюю додаток, і я переглянув Інтернет, і мені цікаво, як вони роблять цей прозорий навігаційний бар таким чином:

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

Я додав наступне, як у своєму додатку:

UINavigationBar.appearance().translucent = true

але це просто виглядає так:

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

Як я можу зробити навігаційний бар прозорим, як перше зображення


З кодом я не знаю, але якщо ви добре працюєте з CSS, ви можете скористатись фреймворком (Pixate: freestyle.org ), а також просто застосувати CSS-стиль до вашого навбару :)!
— Ніколас Чарвоз

Відповіді:


286

Ви можете застосувати зображення на панелі навігації, як показано нижче, для «Прозорого».

Завдання-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];

Швидкий 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

Сподіваюся, це допоможе вам ..!


4
коли я встановлююBackgroundImage, він видаляє barTintColor?
— Пітер Пік

Ви можете отримати зображення панелі навігації .. Відповідно до ваших потреб..і застосувати до панелі навігації, як зазначено вище .. (Зображення, яке ви хочете застосувати до панелі навігації)
— Vidhyanand

1
встановити
— фонКолір

4
За допомогою цього рішення я отримую чорний навігаційний бар, якісь ідеї?
— Карлос дель Бланко

1
Не так, як очікувалося. Коли ви це зробите, у вас не буде настільки напівпрозорого стіни, як альфа 0,7 вправо, PLUS покриває і рядок стану. Якщо ви зробите це на iOS 13, у вас буде просто прямокутник приємного вигляду, а над ним - СТАТУС БАР КРИСТАЛЬНИЙ ЧИСТИЙ. який автор питання її чіткий і конкретний.
— Марлхекс

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
}

Швидкий 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

Це чудово працює, дякую! Чи знаєте ви, як ви могли це реалізувати таким чином, що єдині панелі навігації на потрібних ViewControllers прозорі?
— РуфусV

@JoseRamirez Це, мабуть, фон перегляду viewController, який ви бачите. Потрібно змінити верхнє обмеження першого виду, щоб вирівняти його з оглядом, а не безпечною зоною чи запасом.
— turingtest

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
    
    }

Сподіваюся, що це корисно.


З яким об’єктом ви посилаєтесь navBar?
— Сергій

@SergeyGamayunov navBarтут посилається на об'єкт UINavigationBar.
— Ümañg ßürmån

Ось що він має на увазі ... нехай 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

Встановіть властивість фону вашого навігаційного бара, наприклад

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

(Можливо, вам доведеться трохи змінити, якщо у вас немає навігаційного контролера, але це повинно дати вам уявлення про те, що робити.)

Також переконайтесь, що поданий нижче перегляд дійсно поширюється під смужкою.


Це дає мені наступне: 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];

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;

1

Якщо ви хочете мати можливість це робити програмно в швидкій 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
    }

Одне важливе, що потрібно пам’ятати, це натиснути цю кнопку у вашій розкадровці. У мене виникли проблеми із стрибковим дисплеєм тривалий час. Переконайтесь, що ви встановили це:введіть тут опис зображення

Тоді, коли ви зміните прозорість навігаційної панелі, це не призведе до стрибків поглядів, оскільки погляди поширюються до верху, незалежно від видимості навігаційної панелі.


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

Утилітний метод, який ви викликаєте, передаючи навігаційний контроль та колір, який ви хочете встановити на навігаційній панелі. Для прозорих ви можете використовувати 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()
}

Сподіваюся, це допоможе всім, хто має таку ж проблему

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.