ได้สีที่สดใสและสดใสสำหรับ iOS 7 โปร่งแสง UINavigationBar

iOS 7.1 UPDATE : ดูเหมือนว่าวิธีแก้ไขปัญหาสำหรับการปรับเปลี่ยนช่องอัลฟาใน UINavigationBar นั้นถูกข้ามไปในการอัพเดทนี้ ตอนนี้ทางออกที่ดีที่สุดดูเหมือนจะเป็นเพียง 'จัดการกับมัน' และหวังว่าสีที่คุณเลือกจะทำให้เอฟเฟกต์โปร่งแสง ฉันยังคงมองหาวิธีในการแก้ไขปัญหานี้

iOS 7.0.3 UPDATE : ไลบรารี GitHub ที่เราสร้างได้รับการอัปเดตเพื่อแก้ไขปัญหานี้เล็กน้อยเมื่อใช้ iOS 7.0.3 น่าเสียดายที่ไม่มีสูตรเวทย์มนตร์ที่จะรองรับทั้งสีที่สร้างใน iOS 7.0.2 และก่อนหน้านี้และ iOS 7.0.3 ดูเหมือนว่าแอปเปิลจะปรับปรุงความอิ่มตัวของสี แต่ด้วยค่าความทึบ (เนื่องจากความโปร่งแสงเบลอนั้นขึ้นอยู่กับระดับความทึบ) ฉันพร้อมกับคนอื่นไม่กี่คนกำลังทำงานเพื่อสร้างการแก้ไขที่ดีกว่าสำหรับสิ่งนี้

ฉันแน่ใจว่าคนจำนวนมากได้เจอปัญหาที่ iOS 7 มีแนวโน้มที่จะทำให้สีของ UINavigationBar ที่โปร่งแสงหมดไป

เป้าหมายของฉันคือการบรรลุ UINavigationBar ด้วยสีอ่อนนี้ แต่โปร่งแสง:

อย่างไรก็ตามด้วยความโปร่งใสฉันได้รับสิ่งนี้ มุมมองพื้นหลังเป็นสีขาวซึ่งฉันเข้าใจจะทำให้มุมมองนี้เบาขึ้น:

มีวิธีใดบ้างที่จะทำให้ได้สีดั้งเดิมในขณะที่ยังมีความโปร่งแสงอยู่? ฉันสังเกตว่า Facebook สามารถทำให้แถบของพวกเขากลายเป็นสีฟ้าที่ร่ำรวยดังที่แสดงไว้ที่นี่:

.. ดังนั้นฉันรู้ว่าจะต้องมีวิธีใด เห็นได้ชัดว่าพื้นหลังสร้างความแตกต่างได้ที่นี่ แต่เนื้อหาส่วนใหญ่ของพวกเขายังเป็นสีเทา / ขาว ดูเหมือนว่าไม่ว่าคุณจะใส่แถบสีอะไรก็ตามคุณไม่สามารถรับสีสันที่สดใสภายใต้ความโปร่งแสงได้

อัปเดตด้วยโซลูชัน

นี่คือทางออกที่ฉันมาลงเอยด้วย ฉันใช้วิธีแก้ปัญหาของapratoจากนั้นรวมไปถึงการกำหนดเอง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 UPDATE:อย่างที่คุณเห็นด้านบน 7.0.3 เปลี่ยนแปลงสิ่งต่าง ๆ ฉันได้อัพเดทส่วนสำคัญของฉันแล้ว หวังว่านี่จะหายไปเมื่อผู้คนอัพเกรด

คำตอบเดิม: ฉันลงเอยด้วยการแฮ็ครวมคำตอบอีกสองข้อเข้าด้วยกัน ฉันกำลัง subclassing UINavigationBar และเพิ่มเลเยอร์ทางด้านหลังพร้อมพื้นที่เพิ่มเติมเพื่อให้ครอบคลุมถ้าแถบสถานะความสูงที่หลากหลายขึ้น เลเยอร์จะได้รับการปรับในหน้าย่อยย่อยของเค้าโครงและสีจะเปลี่ยนเมื่อใดก็ตามที่คุณตั้งค่า barTintColor

สรุปสาระสำคัญ: https://gist.github.com/aprato/6631390

setBarTintColor

  [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;

layoutSubviews

  [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);
  }

พฤติกรรมของ tintColor สำหรับแท่งมีการเปลี่ยนแปลงบน iOS 7.0 มันจะไม่ส่งผลกระทบต่อพื้นหลังของบาร์และทำงานตามที่อธิบายไว้สำหรับคุณสมบัติ tintColor ที่เพิ่มใน UIView ในการแต้มสีพื้นหลังของแถบโปรดใช้ -barTintColor.You สามารถใช้รหัสต่อไปนี้เพื่อให้แอปทำงานได้ทั้ง 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)

ฉันไม่ได้คิดวิธีแก้ปัญหานี้ แต่ดูเหมือนว่าจะทำงานได้ดีพอสมควร ฉันเพิ่งเพิ่มเข้าไปใน viewDidLoad บนคลาสย่อยของ UINavigationController

ที่มา: 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];

วิธี low-fi หนึ่งอาจจะเป็นการตรึง a 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];

UIView ด้านหลัง

(เปลี่ยนสีจากตัวอย่างด้านล่างเพื่อเน้นความโปร่งใสความโปร่งใส / การเบลอจะเห็นได้ชัดเจนขึ้นเมื่อเคลื่อนไหว)

การจัดคลาสย่อยUINavigationBarและวางมุมมองเดียวกันไว้เหนือพื้นหลัง แต่เบื้องหลังทุกอย่างอาจทำให้ได้ผลลัพธ์ที่คล้ายกันขณะที่แฮ็กน้อยลง

อีกวิธีหนึ่งที่ฉันเคยเห็นคือการเล่นกับอัลฟ่าของUINavigationBar:

self.navigationController.navigationBar.alpha = 0.5f;

แก้ไข: จริง ๆ แล้วหลังจากทดสอบดูเหมือนว่านี่ไม่ได้มีพฤติกรรมที่ตั้งใจ (หรือพฤติกรรมใด ๆ ):

.8 alpha

ปรับอัลฟ่า

เห็นได้ชัดว่าคุณจะต้องทำสิ่งนี้บนอุปกรณ์ iOS 7 เท่านั้น ดังนั้นเพิ่มการตรวจสอบรุ่นก่อนที่คุณจะใช้สิ่งเหล่านี้

แทนที่จะสร้างวัตถุ UIColor ของคุณในรูปแบบRGBให้ใช้HSBและเพิ่มพารามิเตอร์ความอิ่มตัว (เครดิตให้กับSam Soffesที่อธิบายวิธีการนี้ที่นี่ )

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

หมายเหตุ: วิธีนี้เป็นการแลกเปลี่ยนที่ไม่ดีสำหรับสีที่มีความอิ่มตัวสูง

ในการเลือกสี HSB จากการออกแบบของคุณคุณสามารถใช้เครื่องมือเช่นColorSnapperซึ่งช่วยให้คุณคัดลอกรูปแบบ UIColor HSB

คุณสามารถลองใช้หมวดหมู่ UIColor ( GitHub Link ) จากDavid Keeganเพื่อปรับเปลี่ยนสีที่มีอยู่

ปัญหาได้รับการแก้ไขแล้วโดย Apple ในเวอร์ชั่น 7.0.3 ใหม่

ผมใช้ @ แก้ปัญหา aprato แต่พบว่ามีกรณีมุมไม่กี่ที่ชั้นใหม่จาก VCs ใหม่ (เช่น. 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

หลังจากทดลองในขณะที่ใช้ barTintColor ฉันพบว่าวิธีที่ง่ายมากในการใช้แถบนำทางแบบทึบคือการสร้างภาพพิกเซลเดียวของสีที่ต้องการสร้างภาพที่ยืดหยุ่นออกมาและตั้งเป็นพื้นหลังภาพแถบการนำทาง .

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

โค้ดสามบรรทัดง่ายมากและใช้งานได้ทั้งบน iOS 6 และ iOS 7 (barTintColor ไม่รองรับบน iOS 6)

มีการแทนที่ Dropin UINavigationController ที่ยอดเยี่ยมได้จาก Simon บูธที่ GitHub ที่นี่GitHub - C360NavigationBar

หากคุณสนับสนุน iOS6 ย้อนหลังให้ตรวจสอบตัวควบคุมรูทมุมมองดังนี้:

PatientListTableViewController * frontViewController = [[PatientListTableViewController จัดสรร] 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.imageRedself.imageBlack

< > ภาพสีดำอยู่ในวงเล็บนี้จะมองไม่เห็นเนื่องจากมันโปร่งใส :)

< > ภาพสีแดงอยู่ในวงเล็บนี้

มีวิธีใช้โซลูชัน @aprato โดยไม่มีคลาสย่อย UINavigationBar

ในโครงการของฉันมุมมองหลักของฉันคือ UIViewController

ปัญหาคือ navigationController เป็นคุณสมบัติแบบอ่านอย่างเดียวมีวิธีใช้คลาสของคุณกับโปรเจ็กต์ของฉันเพราะฉันไม่สามารถใช้: [[UINavigationController alloc] initWithNavigationBarClass:

ขอบคุณ

วิธีง่ายๆในการรับสีที่คุณต้องการใช้

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

ตราบใดที่ภาพของคุณมีอัลฟ่าความโปร่งแสงจะใช้ได้และคุณสามารถตั้งค่าอัลฟ่าได้โดยการเปลี่ยนภาพ นี่เพิ่งเพิ่มเข้ามาใน iOS7 ความกว้างและความสูงของภาพคือ 640x88px สำหรับแนวตั้ง (เพิ่ม 20 ถึง 88 หากคุณต้องการให้อยู่ใต้แถบสถานะ)