การเปลี่ยนสี Tint / Background ของ UITabBar

UINavigationBar และ UISearchBar ทั้งสองมีคุณสมบัติ tintColor ที่ช่วยให้คุณเปลี่ยนสีของสี (น่าแปลกใจฉันรู้) ของทั้งสองรายการ ฉันต้องการทำสิ่งเดียวกันกับ UITabBar ในแอปพลิเคชันของฉัน แต่ตอนนี้พบวิธีเปลี่ยนจากสีดำเริ่มต้นแล้ว ความคิดใด ๆ ?

ฉันสามารถทำให้มันทำงานได้โดยการคลาสย่อย UITabBarController และใช้คลาสส่วนตัว:

@interface UITabBarController (private)
- (UITabBar *)tabBar;
@end

@implementation CustomUITabBarController


- (void)viewDidLoad {
    [super viewDidLoad];

    CGRect frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, 48);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    [v setBackgroundColor:kMainColor];
    [v setAlpha:0.5];
    [[self tabBar] addSubview:v];
    [v release];

}
@end

iOS 5 ได้เพิ่มวิธีการปรากฏใหม่สำหรับการปรับแต่งรูปลักษณ์ขององค์ประกอบ UI ส่วนใหญ่

คุณสามารถกำหนดเป้าหมายทุกอินสแตนซ์ของ UITabBar ในแอปของคุณได้โดยใช้พร็อกซีลักษณะที่ปรากฏ

สำหรับ iOS 5 + 6:

[[UITabBar appearance] setTintColor:[UIColor redColor]];

สำหรับ iOS 7 ขึ้นไปโปรดใช้สิ่งต่อไปนี้:

[[UITabBar appearance] setBarTintColor:[UIColor redColor]];

การใช้พร็อกซีลักษณะที่ปรากฏจะเปลี่ยนอินสแตนซ์แถบแท็บใด ๆ ทั่วทั้งแอป สำหรับอินสแตนซ์เฉพาะให้ใช้หนึ่งในคุณสมบัติใหม่ในคลาสนั้น:

UIColor *tintColor; // iOS 5+6
UIColor *barTintColor; // iOS 7+
UIColor *selectedImageTintColor;
UIImage *backgroundImage;
UIImage *selectionIndicatorImage;

ฉันมีข้อมูลเพิ่มเติมสำหรับคำตอบสุดท้าย แม้ว่ารูปแบบที่สำคัญจะถูกต้อง แต่เคล็ดลับในการใช้สีโปร่งใสบางส่วนสามารถปรับปรุงได้ ฉันคิดว่าเป็นเพียงการปล่อยให้การไล่ระดับสีเริ่มต้นแสดงเท่านั้น นอกจากนี้ความสูงของ TabBar คือ 49 พิกเซลแทนที่จะเป็น 48 อย่างน้อยใน OS 3

ดังนั้นหากคุณมีภาพ 1 x 49 ที่เหมาะสมพร้อมการไล่ระดับสีนี่คือเวอร์ชันของ viewDidLoad ที่คุณควรใช้:

- (void)viewDidLoad {

    [super viewDidLoad]; 

    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    UIImage *i = [UIImage imageNamed:@"GO-21-TabBarColorx49.png"];
    UIColor *c = [[UIColor alloc] initWithPatternImage:i];
    v.backgroundColor = c;
    [c release];
    [[self tabBar] addSubview:v];
    [v release];

}

เมื่อคุณใช้ addSubview ปุ่มของคุณจะสูญเสียความสามารถในการคลิกดังนั้นแทนที่จะใช้

[[self tabBar] addSubview:v];

ใช้:

[[self tabBar] insertSubview:v atIndex:0];

ไม่มีวิธีง่ายๆในการทำสิ่งนี้โดยพื้นฐานแล้วคุณต้องซับคลาส UITabBar และใช้การวาดแบบกำหนดเองเพื่อทำสิ่งที่คุณต้องการ มันค่อนข้างทำงานสำหรับเอฟเฟกต์ แต่มันอาจจะคุ้มค่า ฉันแนะนำให้ยื่นข้อบกพร่องกับ Apple เพื่อเพิ่มลงใน iPhone SDK ในอนาคต

ต่อไปนี้เป็นทางออกที่สมบูรณ์แบบสำหรับสิ่งนี้ สิ่งนี้ใช้ได้ดีกับฉันสำหรับ iOS5 และ iOS4

//---- For providing background image to tabbar
UITabBar *tabBar = [tabBarController tabBar]; 

if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) {
    // ios 5 code here
    [tabBar setBackgroundImage:[UIImage imageNamed:@"image.png"]];
} 
else {
    // ios 4 code here
    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *tabbg_view = [[UIView alloc] initWithFrame:frame];
    UIImage *tabbag_image = [UIImage imageNamed:@"image.png"];
    UIColor *tabbg_color = [[UIColor alloc] initWithPatternImage:tabbag_image];
    tabbg_view.backgroundColor = tabbg_color;
    [tabBar insertSubview:tabbg_view atIndex:0];
}

บน iOS 7:

[[UITabBar appearance] setBarTintColor:[UIColor colorWithRed:(38.0/255.0) green:(38.0/255.0) blue:(38.0/255.0) alpha:1.0]];

ฉันขอแนะนำให้ตั้งค่าก่อนโดยขึ้นอยู่กับความต้องการภาพของคุณ:

[[UITabBar appearance] setBarStyle:UIBarStyleBlack];

ลักษณะของแท่งจะเป็นตัวคั่นที่ละเอียดอ่อนระหว่างเนื้อหามุมมองของคุณและแถบแท็บของคุณ

[[self tabBar] insertSubview:v atIndex:0]; ทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน

สำหรับฉันมันง่ายมากที่จะเปลี่ยนสีของ Tabbar เช่น: -

[self.TabBarController.tabBar setTintColor:[UIColor colorWithRed:0.1294 green:0.5686 blue:0.8353 alpha:1.0]];


[self.TabBarController.tabBar setTintColor:[UIColor "YOUR COLOR"];

ลองนี่ !!!

 [[UITabBar appearance] setTintColor:[UIColor redColor]];
 [[UITabBar appearance] setBarTintColor:[UIColor yellowColor]];

สำหรับสีพื้นหลัง

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

หรือสิ่งนี้ใน App Delegate

[[UITabBar appearance] setBackgroundColor:[UIColor blackColor]];

สำหรับการเปลี่ยนสีของไอคอนยกเลิกการเลือกของแถบแท็บ

สำหรับ iOS 10:

// this code need to be placed on home page of tabbar    
for(UITabBarItem *item in self.tabBarController.tabBar.items) {
    item.image = [item.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

เหนือ iOS 10:

// this need to be in appdelegate didFinishLaunchingWithOptions
[[UITabBar appearance] setUnselectedItemTintColor:[UIColor blackColor]];

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

1). หากคุณต้องการกำจัดภาพซ้อนทับมันเพื่อให้ดูเรียบขึ้นให้ทำ:

tabBar.backgroundColor = [UIColor darkGrayColor]; // this will be your background
[tabBar.subviews[0] removeFromSuperview]; // this gets rid of gloss

2). ในการตั้งค่ารูปภาพที่กำหนดเองให้กับปุ่ม tabBar ให้ทำดังนี้:

for (UITabBarItem *item in tabBar.items){
    [item setFinishedSelectedImage:selected withFinishedUnselectedImage:unselected];
    [item setImageInsets:UIEdgeInsetsMake(6, 0, -6, 0)];
}

ที่ไหนselectedและunselectedเป็นUIImageวัตถุที่คุณเลือก หากคุณต้องการให้เป็นสีเรียบวิธีแก้ปัญหาที่ง่ายที่สุดที่ฉันพบคือการสร้างUIViewด้วยสิ่งที่ต้องการbackgroundColorจากนั้นแสดงเป็นสีUIImageด้วยความช่วยเหลือของ QuartzCore ฉันใช้วิธีการต่อไปนี้ในหมวดหมู่UIViewเพื่อรับUIImageเนื้อหาของมุมมอง:

- (UIImage *)getImage {
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, [[UIScreen mainScreen]scale]);
    [[self layer] renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return viewImage;
}

3) สุดท้ายคุณอาจต้องการปรับแต่งสไตล์ของชื่อปุ่ม ทำ:

for (UITabBarItem *item in tabBar.items){
    [item setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                [UIColor redColor], UITextAttributeTextColor,
                [UIColor whiteColor], UITextAttributeTextShadowColor,
                [NSValue valueWithUIOffset:UIOffsetMake(0, 1)], UITextAttributeTextShadowOffset,
                [UIFont boldSystemFontOfSize:18], UITextAttributeFont,
            nil] forState:UIControlStateNormal];
}

วิธีนี้ช่วยให้คุณทำการปรับเปลี่ยนบางอย่างได้ แต่ยังค่อนข้าง จำกัด โดยเฉพาะอย่างยิ่งคุณไม่สามารถปรับเปลี่ยนตำแหน่งที่วางข้อความภายในปุ่มได้อย่างอิสระและไม่สามารถมีสีที่แตกต่างกันสำหรับปุ่มที่เลือก / ไม่ได้เลือก หากคุณต้องการจัดรูปแบบข้อความที่เฉพาะเจาะจงมากขึ้นเพียงตั้งค่าUITextAttributeTextColorให้ชัดเจนและเพิ่มข้อความของคุณลงในselectedและunselectedรูปภาพจากส่วนที่ (2)

[v setBackgroundColor ColorwithRed: Green: Blue: ];

อีกวิธีหนึ่ง (ซึ่งเป็นการแฮ็ก) คือการตั้งค่าอัลฟ่าบน tabBarController เป็น 0.01 เพื่อให้แทบมองไม่เห็น แต่ก็ยังคลิกได้ จากนั้นตั้งค่าตัวควบคุม ImageView ที่ด้านล่างของหัวปากกา MainWindow โดยใช้รูปภาพแถบแท็บที่กำหนดเองของคุณใต้ tabBarCOntroller alpha'ed จากนั้นสลับรูปภาพเปลี่ยนสีหรือไฮไลท์เมื่อตัวควบคุมแท็บเปลี่ยนมุมมอง

อย่างไรก็ตามคุณสูญเสีย "... เพิ่มเติม" และปรับแต่งฟังก์ชันการทำงาน

สวัสดีฉันใช้ iOS SDK 4 และฉันสามารถแก้ปัญหานี้ได้ด้วยโค้ดเพียงสองบรรทัดและมันก็เป็นเช่นนี้

tBar.backgroundColor = [UIColor clearColor];
tBar.backgroundImage = [UIImage imageNamed:@"your-png-image.png"];

หวังว่านี่จะช่วยได้!

if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) {
    // ios 5 code here
    [tabBar setBackgroundImage:[UIImage imageNamed:@"image.png"]];
} 
else {
    // ios 4 code here
    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *tabbg_view = [[UIView alloc] initWithFrame:frame];
    UIImage *tabbag_image = [UIImage imageNamed:@"image.png"];
    UIColor *tabbg_color = [[UIColor alloc] initWithPatternImage:tabbag_image];
    tabbg_view.backgroundColor = tabbg_color;
    [tabBar insertSubview:tabbg_view atIndex:0];
}

คำตอบ Swift 3.0: (จาก Vaibhav Gaikwad)

สำหรับการเปลี่ยนสีของไอคอนยกเลิกการเลือกของแถบแท็บ:

if #available(iOS 10.0, *) {
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
    } else {
        // Fallback on earlier versions
        for item in self.tabBar.items! {
            item.image = item.image?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        }
}

สำหรับการเปลี่ยนสีข้อความเท่านั้น:

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.white], for: .normal)

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.red, for: .selected)

Swift 3 โดยใช้รูปลักษณ์จากAppDelegateสิ่งต่อไปนี้:

UITabBar.appearance().barTintColor = your_color