iOS 7 반투명 UI 탐색 모음을 위한 밝고 선명한 색상 구현

iOS 7 반투명 UI 탐색 모음을 위한 밝고 선명한 색상 구현

---

iOS 7.1 업데이트:이 업데이트에서는 UI 탐색 모음의 알파 채널 수정에 대한 해결 방법이 무시된 것 같습니다.현재로서는, 가장 좋은 해결책은 그저 '대처'하고 여러분이 어떤 색을 선택하든 반투명한 효과를 낼 수 있기를 바라는 것인 것 같습니다.나는 아직도 이것을 피할 방법을 찾고 있습니다.

---

iOS 7.0.3 업데이트:우리가 만든 GitHub 라이브러리는 iOS 7.0.3을 사용할 때 이 문제를 약간 해결하도록 업데이트되었습니다.안타깝게도 iOS 7.0.2 이전 버전과 iOS 7.0.3에서 생성된 두 가지 색상을 모두 지원하는 마법의 공식은 없습니다.Apple이 채도를 개선한 것처럼 보이지만 불투명도를 희생합니다(흐린 투명도는 불투명도 수준에 따라 달라지기 때문입니다).저는 다른 몇몇 사람들과 함께 이것에 대한 훨씬 더 나은 해결책을 만들기 위해 노력하고 있습니다.

---

이미 많은 사람들이 iOS 7이 반투명한 UI 탐색 막대의 색을 불포화시키는 경향이 있는 문제를 접했을 것이라고 확신합니다.

제 목표는 이 색조를 사용하지만 반투명한 UI 탐색 막대를 만드는 것입니다.

하지만, 반투명성으로, 저는 이것을 이해하고 있습니다.배경 보기는 흰색이므로 이 보기를 조금 더 가볍게 만들 수 있습니다.

투명도를 유지하면서 원래의 색을 얻을 수 있는 방법은 없을까요?Facebook은 여기에 표시된 바와 같이 풍부한 파란색 바를 사용할 수 있습니다.

뭔가 방법이 있을 거란 걸 압니다여기서 배경 보기는 분명히 차이가 있지만 대부분의 내용은 회색/흰색입니다.어떤 바틴트 색상을 넣든 간에 투명도에서는 선명한 색상을 얻을 수 없는 것 같습니다.

솔루션으로 업데이트됨.

이것이 제가 결국 생각해낸 해결책입니다.나는 프라토의 용액을 취한 다음 관습을 포함했습니다.UINavigationBar에.UINavigationController아류의저는 예제 앱과 함께 아래에 나열된 이 구현을 가진 저장소를 만들었습니다.

////////////////////////////
// CRNavigationBar.m
////////////////////////////

#import "CRNavigationBar.h"

@interface CRNavigationBar ()
@property (nonatomic, strong) CALayer *colorLayer;
@end

@implementation CRNavigationBar

static CGFloat const kDefaultColorLayerOpacity = 0.5f;
static CGFloat const kSpaceToCoverStatusBars = 20.0f;

- (void)setBarTintColor:(UIColor *)barTintColor {
    [super setBarTintColor:barTintColor];
    if (self.colorLayer == nil) {
        self.colorLayer = [CALayer layer];
        self.colorLayer.opacity = kDefaultColorLayerOpacity;
        [self.layer addSublayer:self.colorLayer];
    }
    self.colorLayer.backgroundColor = barTintColor.CGColor;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    if (self.colorLayer != nil) {
        self.colorLayer.frame = CGRectMake(0, 0 - kSpaceToCoverStatusBars, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + kSpaceToCoverStatusBars);

        [self.layer insertSublayer:self.colorLayer atIndex:1];
    }
}

@end

---

////////////////////////////
// CRNavigationController.m
////////////////////////////

#import "CRNavigationController.h"
#import "CRNavigationBar.h"

@interface CRNavigationController ()

@end

@implementation CRNavigationController

- (id)init {
    self = [super initWithNavigationBarClass:[CRNavigationBar class] toolbarClass:nil];
    if(self) {
        // Custom initialization here, if needed.    
    }
    return self;
}

- (id)initWithRootViewController:(UIViewController *)rootViewController {
    self = [super initWithNavigationBarClass:[CRNavigationBar class] toolbarClass:nil];
    if(self) {
        self.viewControllers = @[rootViewController];
    }

    return self;
}

@end

iOS 7.0.3 업데이트:위의 7.0.3에서 볼 수 있듯이 상황이 바뀌었습니다.제 요지를 업데이트했습니다.사람들이 업그레이드함에 따라 이것이 사라지기를 바랍니다.

원본 답변:저는 결국 다른 두 개의 답을 결합하는 해킹을 당했습니다.저는 UINavigationBar를 하위 분류하고 다양한 높이 상태 표시줄 중 하나가 올라 있는지 확인할 수 있는 여분의 공간이 있는 레이어를 뒤쪽에 추가하고 있습니다.도면층은 레이아웃 하위 뷰에서 조정되며 barTintColor를 설정할 때마다 색상이 변경됩니다.

요지: https://gist.github.com/aprato/6631390

막대 틴트 색상 설정

  [super setBarTintColor:barTintColor];
  if (self.extraColorLayer == nil) {
    self.extraColorLayer = [CALayer layer];
    self.extraColorLayer.opacity = self.extraColorLayerOpacity;
    [self.layer addSublayer:self.extraColorLayer];
  }
  self.extraColorLayer.backgroundColor = barTintColor.CGColor;

레이아웃:서브뷰

  [super layoutSubviews];
  if (self.extraColorLayer != nil) {
    [self.extraColorLayer removeFromSuperlayer];
    self.extraColorLayer.opacity = self.extraColorLayerOpacity;
    [self.layer insertSublayer:self.extraColorLayer atIndex:1];
    CGFloat spaceAboveBar = self.frame.origin.y;
    self.extraColorLayer.frame = CGRectMake(0, 0 - spaceAboveBar, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + spaceAboveBar);
  }

iOS 7.0에서는 막대에 대한 tintColor 동작이 변경되었습니다.이는 더 이상 막대의 배경에 영향을 주지 않으며 UIView에 추가된 tintColor 속성에 대해 설명된 대로 작동합니다.막대 배경에 색을 입히려면 -barTintColor를 사용하십시오.다음 코드를 사용하여 ios6와 ios7 모두에서 앱을 작동시킬 수 있습니다.

if(IS_IOS7)
{
    self.navigationController.navigationBar.barTintColor = [UIColor blackColor];
    self.navigationController.navigationBar.translucent = NO;
}
else
{
    self.navigationController.navigationBar.tintColor = [UIColor blackColor];
}

IS_IOS7은 다음과 같이 pch 파일에 정의된 매크로입니다.

#define IS_IOS7 ([[UIDevice currentDevice].systemVersion floatValue] >= 7.0)

저는 이 해결책을 생각해내지 못했지만 꽤 잘 작동하는 것 같습니다.방금 UINavigation Controller의 하위 클래스에서 DidLoad를 보기 위해 추가했습니다.

출처: https://gist.github.com/alanzeino/6619253

// cheers to @stroughtonsmith for helping out with this one

UIColor *barColour = [UIColor colorWithRed:0.13f green:0.14f blue:0.15f alpha:1.00f];
UIView *colourView = [[UIView alloc] initWithFrame:CGRectMake(0.f, -20.f, 320.f, 64.f)];
colourView.opaque = NO;
colourView.alpha = .7f;
colourView.backgroundColor = barColour;
self.navigationBar.barTintColor = barColour;
[self.navigationBar.layer insertSublayer:colourView.layer atIndex:1];

한 가지 로우파이 방식은 아마도 핀을 꽂는 것일 것입니다.UIView막대 뒤에 있는 보기의 맨 위에 있는 탐색 막대의 높이입니다.보기를 탐색 모음과 동일한 색상으로 하되 원하는 효과를 얻을 때까지 알파를 사용합니다.

UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.navigationController.navigationBar.frame), 64)];
    backgroundView.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:1 alpha:.5];

[self.navigationController.view insertSubview:backgroundView belowSubview:self.navigationController.navigationBar];

뒤의 UI보기

(낮은 예에서 투명성 강조로 색상 변경.이동 시 투명도/흐림 현상이 더 두드러집니다.)

위분의 하위 UINavigationBar그리고 배경 위에 같은 관점을 두지만 다른 모든 것 뒤에는 아마도 덜 촌스러운 동시에 비슷한 결과를 얻을 것입니다.

---

내가 본 또 다른 해결책은 알파를 가지고 노는 것입니다. UINavigationBar:

self.navigationController.navigationBar.alpha = 0.5f;

편집: 실제로 테스트 후에는 의도된 동작(또는 어떤 동작)을 제공하지 않는 것 같습니다.

.8 알파

조정되지 않은 알파

분명히, 당신은 iOS 7 기기에서만 이것을 하기를 원할 것입니다.따라서 이러한 버전을 구현하기 전에 몇 가지 버전 확인을 추가합니다.

RGB 형식으로 UIColor 개체를 만드는 대신 HSB를 사용하고 포화 매개 변수를 늘립니다. (이 방법을 설명하는 Sam Soffes의 공로)

navigationBar.barTintColor = [UIColor colorWithHue:0.555f saturation:1.f brightness:0.855f alpha:1.f];

참고: 이 솔루션은 절충형이므로 채도가 높은 색상에는 적합하지 않습니다.

디자인에서 HSB 색상을 선택하려면 UIColor HSB 형식을 복사하기만 하면 되는 ColorSnapper와 같은 도구를 사용할 수 있습니다.

David Keegan의 UIColor Category(GitHub Link)를 사용하여 기존 색상을 수정할 수도 있습니다.

새로운 7.0.3 릴리스에서 Apple이 이 문제를 해결되었습니다.

@aprato의 솔루션을 사용했지만 새로운 VC의 새 계층이 포함된 몇 가지 사례를 발견했습니다(예: UINavigationItemButtonViews,UINavigationItemViews등)는 자동으로 아래 위치에 삽입됩니다.extraColorLayer(이는 해당 제목 또는 버튼 요소가 다음의 영향을 받게 할 것입니다.extraColorLayer따라서 일반적인 경우보다 색이 옅어집니다.그래서 저는 @aprato의 용액을 강제로 조절했습니다.extraColorLayer인덱스 위치 1을 유지합니다.지수 위치 1에서,extraColorLayer바로 위에 머무릅니다._UINavigationBarBackground하지만 다른 모든 것들의 밑에.

다음은 클래스 구현입니다.

- (void)setBarTintColor:(UIColor *)barTintColor
{
    [super setBarTintColor:barTintColor];
    if (self.extraColorLayer == nil)
    {
        self.extraColorLayer = [CALayer layer];
        self.extraColorLayer.opacity = kDefaultColorLayerOpacity;
        [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
    }
    self.extraColorLayer.backgroundColor = barTintColor.CGColor;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    if (self.extraColorLayer != nil)
    {
        self.extraColorLayer.frame = CGRectMake(0, 0 - kSpaceToCoverStatusBars, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + kSpaceToCoverStatusBars);
    }
}

- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview
{
    [super insertSubview:view aboveSubview:siblingSubview];
    [self.extraColorLayer removeFromSuperlayer];
    [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
}

- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index
{
    [super insertSubview:view atIndex:index];
    [self.extraColorLayer removeFromSuperlayer];
    [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
}

- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview
{
    [super insertSubview:view belowSubview:siblingSubview];
    [self.extraColorLayer removeFromSuperlayer];
    [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
}

포크의 코드를 개선했습니다. https://github.com/allenhsu/CRNavigationController

내가 수정한 결과 화면의 결과 색상(흰색 배경에서 선택됨)은 전달된 값과 정확히 동일합니다.setBarTintColor저는 이것이 놀라운 해결책이라고 생각합니다.

이러한 해킹은 필요하지 않습니다 :).단순 설정:

self.navigationController.navigationBar.translucent = NO;

iOS 7의 경우 기본 반투명이 TRUE로 유지됩니다.

---

관련 노트에서 다음을 통해 제목 텍스트 색상(그림자 포함)을 쉽게 설정할 수 있습니다.

NSShadow *titleShadow = [[NSShadow alloc] init];
titleShadow.shadowOffset = CGSizeMake(0.0f, -1.0f);
titleShadow.shadowColor = [UIColor blackColor];
NSDictionary *navbarTitleTextAttributes = @{NSForegroundColorAttributeName: [UIColor whiteColor],
                                            NSShadowAttributeName: titleShadow};
[[UINavigationBar appearance] setTitleTextAttributes:navbarTitleTextAttributes];

iOS 7에서 투명도가 비활성화된 균일한 색상의 내비게이션 바를 설치하려다가 우연히 이 Q/A를 발견했습니다.

barTintColor로 잠시 실험한 후, 저는 불투명한 탐색 막대를 사용하는 매우 쉬운 방법이 원하는 색상의 단일 픽셀 이미지를 만들고, 그것으로 신축성 있는 이미지를 만들고, 탐색 막대의 배경 이미지로 설정하는 것이라는 것을 알게 되었습니다.

UIImage *singlePixelImage = [UIImage imageNamed:@"singlePixel.png"];
UIImage *resizableImage = [singlePixelImage resizableImageWithCapInsets:UIEdgeInsetsZero];
[navigationBar setBackgroundImage:resizableImage forBarMetrics:UIBarMetricsDefault]; 

세 줄의 코드가 매우 간단하며 iOS 6 및 iOS 7에서 모두 작동합니다(barTintColor는 iOS 6에서 지원되지 않습니다).

GitHub Here GitHub - C360 Navigation Bar에서 이용할 수 있는 사이먼 부스에서 이용 가능한 UIN 내비게이션 컨트롤러 대체품이 많이 있습니다.

iOS6를 이전 버전으로 지원하는 경우 루트 뷰 컨트롤러를 다음과 같이 확인합니다.

PatientListTableViewController *frontViewController = [[PatientListTableViewController alloc] init];

    UINavigationController *navViewController = [[UINavigationController alloc] initWithNavigationBarClass:[C360NavigationBar class] toolbarClass:nil];
if ([navViewController.view respondsToSelector:@selector(setTintColor:)]) {
    //iOS7
    [navViewController.view setTintColor:self.navBarTintColor];
    [[C360NavigationBar appearance] setItemTintColor:self.navBarItemTintColor];
} else {
    //iOS6
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:NO];
    navViewController.navigationBar.tintColor = self.navBarTintColor;
}
[navViewController pushViewController:frontViewController animated:NO];

self.window.rootViewController = navViewController;

위에서 언급한 @bernhard와 같이 원하는 탐색 막대 모양을 얻기 위해 막대 색상을 포화시킬 수 있습니다.

저는 그런 종류의 조정을 위해 BarTintColorOptimizer 유틸리티를 작성했습니다.반투명 막대 틴트 색상을 최적화하여 막대의 실제 색상이 iOS 7.x 이상에서 원하는 색상과 일치하도록 합니다.자세한 내용은 이 답변을 참조하십시오.

솔직히 위의 답변이 맞을 수도 있지만, 저는 쉽게 따라 할 수 있었습니다.

// this is complete 100% transparent image
self.imageBlack = [[UIImage imageNamed:@"0102_BlackNavBG"] 
           resizableImageWithCapInsets:UIEdgeInsetsMake(0, 2, 0, 2)  
                          resizingMode:UIImageResizingModeStretch];

// this is non-transparent but iOS7 
// will by default make it transparent (if translucent is set to YES)
self.imageRed = [[UIImage imageNamed:@"0102_RedNavBG"] 
         resizableImageWithCapInsets:UIEdgeInsetsMake(0, 2, 0, 2)  
                        resizingMode:UIImageResizingModeStretch];

// some navigation controller
[nvCtrLeft.navigationBar setBackgroundImage:self.imageRed 
                              forBarMetrics:UIBarMetricsDefault];

// some another navigation controller
[nvCtrCenter.navigationBar setBackgroundImage:self.imageRed 
                                forBarMetrics:UIBarMetricsDefault];

사용된 이미지는 다음과 같습니다.self.imageRed그리고.self.imageBlack.

<이 투명하기 때문에 않을 것입니다 :)> 검이미이괄안있습에니다호는지은색▁>다있습. 투명하기 때문에 보이지 않을 것입니다 :)

<> 빨간색 이미지는 이 괄호 안에 있습니다.

UINavigationBar를 하위 분류하지 않고 @aprato 솔루션을 사용할 수 있는 방법이 있습니까?

제 프로젝트에서 저의 주요 뷰는 UIView 컨트롤러입니다.

문제는 navigationController가 읽기 전용 속성이라는 것입니다. 제가 사용할 수 없기 때문에 제 프로젝트와 함께 당신의 클래스를 사용할 수 있는 방법이 있습니까?[[UINavigationController alloc] initWithNavigationBarClass:

감사해요.

원하는 색상을 쉽게 얻을 수 있는 방법은 사용하는 것입니다.

    [<NAVIGATION_BAR> setBackgroundImage:<UIIMAGE> forBarPosition:<UIBARPOSITION> barMetrics:<UIBARMETRICS>];

이미지에 알파가 있는 한 투명도가 작동하며 이미지를 변경하여 알파를 설정할 수 있습니다.이것은 방금 iOS7에 추가되었습니다.이미지의 너비와 높이는 수직의 경우 640x88px입니다(상태 표시줄 아래에 두려면 88에 20을 추가합니다).

언급URL : https://stackoverflow.com/questions/18897485/achieving-bright-vivid-colors-for-an-ios-7-translucent-uinavigationbar