Cách tạo thanh điều hướng hoàn toàn trong suốt trong iOS 7


127

Tôi muốn UINavestionBar trong ứng dụng của mình hoàn toàn trong suốt và tuôn ra với trình điều khiển khung nhìn ngay bên dưới nó. Tuy nhiên, mã duy nhất tôi có thể tìm thấy làm cho nó mờ nhưng không minh bạch. Tôi biết điều này có thể được thực hiện trong iOS 7 vì nó được sử dụng trong ứng dụng ghi chú. Câu hỏi của tôi là, mã họ đã sử dụng để làm điều đó là gì?

Câu trả lời:


295

Từ câu trả lời này

[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];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

Ngoài ra, như được đề xuất bởi Josh trong các bình luận, để đặt thanh trở lại mặc định:

[self.navigationController.navigationBar setBackgroundImage:nil
                     forBarMetrics:UIBarMetricsDefault];

6
Ngoài ra hãy chắc chắn rằng bạn không cóself.edgesForExtendedLayout = UIRectEdgeNone;
daidai

25
Có cách nào để đảo ngược điều này?
Zorayr

12
@Zorayr [self.navlationControll.navlationBar setBackgroundImage: nil forBarMetrics: UIBarMetricsDefault]; sẽ đặt thanh trở lại mặc định.
Josh

7
Có cách nào để chuyển đổi hoạt hình trong suốt của thanh điều hướng bằng phương pháp này không?
JYC

3
Tôi thực hiện điều này trên scrollViewDidScroll và có một bước nhảy. Làm thế nào để khắc phục?
onmyway133

77

Dành cho Swift3 và Swift4

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

Dành cho Swift2.2

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

Đối với mục tiêu-C

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

1
Cảm ơn đây là một cách dễ dàng để đặt thanh điều hướng hoàn toàn trong suốt
Hong Zhou

39

Giải pháp khép kín dưới dạng Mục tiêu-C:

UINavestionControll + Trong suốtNavlationControll.h

@interface UINavigationController (TransparentNavigationController)
- (void)presentTransparentNavigationBar;
- (void)hideTransparentNavigationBar;
@end

UINavestionControll + Trong suốtNavlationControll.m

#import "UINavigationController+TransparentNavigationController.h"

@implementation UINavigationController (TransparentNavigationController)

- (void)presentTransparentNavigationBar
{
  [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
  [self.navigationBar setTranslucent:YES];
  [self.navigationBar setShadowImage:[UIImage new]];
  [self setNavigationBarHidden:NO animated:YES];
}

- (void)hideTransparentNavigationBar
{
  [self setNavigationBarHidden:YES animated:NO];
  [self.navigationBar setBackgroundImage:[[UINavigationBar appearance] backgroundImageForBarMetrics:UIBarMetricsDefault] forBarMetrics:UIBarMetricsDefault];
  [self.navigationBar setTranslucent:[[UINavigationBar appearance] isTranslucent]];
  [self.navigationBar setShadowImage:[[UINavigationBar appearance] shadowImage]];
}

@end

Bây giờ, bạn có thể nhập danh mục trong của bạn UIViewControllervà gọi các phương thức trên bộ điều khiển điều hướng của bạn - ví dụ:

#import "UINavigationController+TransparentNavigationController.h"

- (void)viewWillAppear:(BOOL)animated
{
  [super viewWillAppear:animated];
  [self.navigationController presentTransparentNavigationBar];
}

- (void)viewWillDisappear:(BOOL)animated
{
  [super viewWillDisappear:animated];
  [self.navigationController hideTransparentNavigationBar];
}

Và một giải pháp tương tự trong Swift :

import Foundation
import UIKit

extension UINavigationController {

  public func presentTransparentNavigationBar() {
    navigationBar.setBackgroundImage(UIImage(), forBarMetrics:UIBarMetrics.Default)
    navigationBar.translucent = true
    navigationBar.shadowImage = UIImage()
    setNavigationBarHidden(false, animated:true)
  }

  public func hideTransparentNavigationBar() {
    setNavigationBarHidden(true, animated:false)
    navigationBar.setBackgroundImage(UINavigationBar.appearance().backgroundImageForBarMetrics(UIBarMetrics.Default), forBarMetrics:UIBarMetrics.Default)
    navigationBar.translucent = UINavigationBar.appearance().translucent
    navigationBar.shadowImage = UINavigationBar.appearance().shadowImage
  }
}

Làm cách nào tôi có thể hiển thị lại (ví dụ: nếu tôi muốn làm cho nó trong suốt chỉ trong 1 chế độ xem trong NavigationContoder?) - tôi có thể đặt lại nó về các giá trị mặc định của mình không?
derdida

hideTransparentNavigationBar()nên đặt lại nó.
Zorayr

Gọi các phương thức hiện tại / ẩn trong viewWillAppear / biến mất gây ra một hình ảnh chuyển tiếp xấu giữa hai thanh điều hướng khác nhau! Bạn có thể thấy nó rất tốt bằng cách thực hiện cử chỉ vuốt (từ trái sang phải) trong PushViewContoder
andreacipriani

Hãy thử gọi nó trong viewDidHidetrình điều khiển xem cha.
Zorayr

1
Nền đen được hiển thị trên iOS 11 khi sử dụng LargeTitle khi ẩn thanh điều hướng trong suốt
Vrutin Rathod

15

Alan quên một dòng

self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

Vì vậy, tôi có:

[self.navigationController.navigationBar setTranslucent:YES];
self.navigationController.view.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [[UIImage alloc] init];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

5

Câu trả lời tuyệt vời của @ Zorayr được sửa đổi thành Swift 3:

import Foundation
import UIKit

extension UINavigationController {

    public func presentTransparentNavigationBar() {
        navigationBar.setBackgroundImage(UIImage(), for:.default)
        navigationBar.isTranslucent = true
        navigationBar.shadowImage = UIImage()
        setNavigationBarHidden(false, animated:true)
    }

    public func hideTransparentNavigationBar() {
        setNavigationBarHidden(true, animated:false)
        navigationBar.setBackgroundImage(UINavigationBar.appearance().backgroundImage(for: UIBarMetrics.default), for:.default)
        navigationBar.isTranslucent = UINavigationBar.appearance().isTranslucent
        navigationBar.shadowImage = UINavigationBar.appearance().shadowImage
    }
}

2

Swift 4.2 và iOS 12

Hóa ra tất cả những gì bạn thực sự cần là mã dưới đây. Nó hoạt động hoàn hảo khi bạn đặt nó vào viewDidLoad().

// removes line at bottom of navigation bar
navigationController?.navigationBar.shadowImage = UIImage()

// makes navigation bar completely transparent
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.isTranslucent = true


-4

[(UIView *) [self.navlationControll.navlationBar.subview objectAt Index: 0] setAlpha: 0.0f];

Đó là một dòng dường như hoạt động hoàn hảo cho tôi

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.