투명 네비게이션 바 ios


121

나는 앱을 만들고 인터넷에서 탐색 했으며이 투명한 navigationBar를 다음과 같이 만드는 방법이 궁금합니다.

여기에 이미지 설명 입력

내 appdelegate에서 다음과 같이 추가했습니다.

UINavigationBar.appearance().translucent = true

그러나 이것은 다음과 같이 보입니다.

여기에 이미지 설명 입력

첫 번째 이미지처럼 navigationBar를 투명하게 만드는 방법


코드로는 모르겠지만 CSS에 능숙하다면 프레임 워크 (Pixate : freestyle.org )를 사용하고 navbar에 CSS 스타일을 적용 할 수 있습니다. :)!
Nicolas Charvoz 2014 년

답변:


286

Translucent는 아래와 같이 Navigation Bar Image를 적용 할 수 있습니다.

목표 -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
내가 setBackgroundImage하면 barTintColor를 제거합니까?
Peter Pik 2014 년

내비게이션 바의 이미지를 얻을 수 있습니다 .. 필요에 따라 .. 위와 같이 내비게이션 바에 적용합니다 .. (내비게이션 바에 적용하려는 이미지)
Vidhyanand

1
navigationController의 backgroundColor 설정은 필요하지 않습니다
matt bezark 2015

4
이 솔루션을 사용하면 검정색 navigationBar, 어떤 아이디어가 있습니까?
Carlos del Blanco 2016

1
예상과 다릅니다. 당신이 그것을 할 때, 당신은 0.7의 알파와 같이 투명한 벽을 가지지 않을 것입니다. iOS 13에서이 작업을 수행하면 멋지게 보이는 사각형과 그 위에있는 THE STATUS BAR CRYSTAL CLEAR 만 표시됩니다. 질문의 작성자는 명확하고 구체적입니다.
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
}

스위프트 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 분 밖에 걸리지 않습니다.
Dan Beaulieu

2
나는 또한 일반 흰색 navibar없이 투명 navibar 있어요
Kingalione

잘 작동합니다. 감사합니다! 원하는 ViewController의 내비게이션 바만 투명하도록 구현할 수있는 방법을 알고 있습니까?
RufusV

@JoseRamirez 아마도 당신이 보는 viewController의 배경 일 것입니다. 안전 영역이나 여백이 아닌 수퍼 뷰에 맞게 첫 번째보기의 상단 제한을 변경해야합니다.
turingtested

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합니까?
Sergey Gamayunov

navBar여기서 @SergeyGamayunov 는 UINavigationBar의 개체를 나타냅니다.
Ümañg ßürmån

자신이 무엇을 의미하는지 그의 ...하자 네비게이션 바 = 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
}

이것이 최고의 답변이어야합니다!
Mihail Salari

7

나를 위해 일한 것 :

    let bar:UINavigationBar! =  self.navigationController?.navigationBar
    self.title = "Whatever..."
    bar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    bar.shadowImage = UIImage()
    bar.alpha = 0.0 

5

navigationBar의 배경 속성을 설정하십시오.

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

(내비게이션 컨트롤러가없는 경우 약간 변경해야 할 수 있지만이를 통해 수행 할 작업에 대한 아이디어를 얻을 수 있습니다.)

또한 아래보기가 실제로 막대 아래로 확장되는지 확인하십시오.


:이 다음 나에게주는 i.stack.imgur.com/GT3WV.png 내가 조금 더 붉은 내가 게시 된 첫 번째 링크 (이미지)처럼 할 수있는 방법
피터 PIK

알파 값을 사용하여 0.5에서 0.0에서 1.0 사이의 값으로 변경할 수 있습니다. 그리고 내가 말했듯이, 아래보기가 내비게이션 바 아래에 있는지 확인하십시오. 그렇지 않으면 바를 통해 빛나는 콘텐츠를 볼 수 없습니다. Interface Builder를 사용하는 경우 해당보기의 상단 가장자리를 화면의 상단 가장자리로 끌어서 정렬 할 수 있습니다.
Atomix 2014 년

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

내비게이션 바에 설정하고자하는 navigationController와 색상을 전달하여 호출하는 유틸리티 메소드입니다. 들어 투명 당신은 사용할 수 clearColorUIColor클래스입니다.

목적 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

이 작업을 진행 중이 었는데 여기에서 다른 사용자가 제공 한 응답을 사용하는 데 문제가있었습니다. 문제는 iOS 13+에서 내 NavigationBar 투명 이미지 뒤에있는 흰색 상자였습니다.

여기에 이미지 설명 입력

내 해결책은 이것입니다

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()
}

이것이 같은 문제를 가진 사람에게 도움이되기를 바랍니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.