Thay đổi tông màu / màu nền của UITabBar

Cả UINavigationBar và UISearchBar đều có thuộc tính tintColor cho phép bạn thay đổi màu tint (đáng ngạc nhiên, tôi biết) của cả hai mục đó. Tôi muốn làm điều tương tự với UITabBar trong ứng dụng của mình, nhưng hiện đã tìm ra cách để thay đổi nó từ màu đen mặc định. Có ý kiến ​​gì không?

Tôi đã có thể làm cho nó hoạt động bằng cách phân lớp một UITabBarController và sử dụng các lớp riêng:

@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 đã thêm một số phương pháp giao diện mới để tùy chỉnh giao diện của hầu hết các phần tử giao diện người dùng.

Bạn có thể nhắm mục tiêu mọi phiên bản của UITabBar trong ứng dụng của mình bằng cách sử dụng proxy giao diện.

Đối với iOS 5 + 6:

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

Đối với iOS 7 trở lên, vui lòng sử dụng như sau:

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

Sử dụng proxy giao diện sẽ thay đổi bất kỳ phiên bản thanh tab nào trong ứng dụng. Đối với một trường hợp cụ thể, hãy sử dụng một trong các thuộc tính mới trên lớp đó:

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

Tôi có một phụ lục cho câu trả lời cuối cùng. Mặc dù sơ đồ cơ bản là chính xác, nhưng mẹo sử dụng màu trong suốt một phần có thể được cải thiện. Tôi giả định rằng nó chỉ để cho phép gradient mặc định hiển thị qua. Ngoài ra, chiều cao của TabBar là 49 pixel thay vì 48, ít nhất là trong OS 3.

Vì vậy, nếu bạn có hình ảnh 1 x 49 thích hợp với gradient, đây là phiên bản viewDidLoad bạn nên sử dụng:

- (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];

}

Khi bạn chỉ sử dụng addSubview, các nút của bạn sẽ mất khả năng nhấp, vì vậy thay vì

[[self tabBar] addSubview:v];

sử dụng:

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

Không có cách nào đơn giản để làm điều này, về cơ bản bạn cần phải phân lớp UITabBar và triển khai bản vẽ tùy chỉnh để làm những gì bạn muốn. Nó là khá nhiều công việc cho hiệu ứng, nhưng nó có thể đáng giá. Tôi khuyên bạn nên gửi lỗi cho Apple để được thêm vào SDK iPhone trong tương lai.

Sau đây là giải pháp hoàn hảo cho việc này. Điều này hoạt động tốt với tôi cho iOS5 và 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];
}

Trên iOS 7:

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

Tôi cũng khuyên bạn nên cài đặt trước tùy thuộc vào mong muốn thị giác của bạn:

[[UITabBar appearance] setBarStyle:UIBarStyleBlack];

Kiểu thanh đặt một dấu phân cách tinh tế giữa nội dung xem và thanh tab của bạn.

[[self tabBar] insertSubview:v atIndex:0]; hoạt động hoàn hảo cho tôi.

đối với tôi rất đơn giản để thay đổi màu của Tabbar như: -

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


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

Thử đi!!!

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

chỉ cho màu nền

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

hoặc cái này trong App Delegate

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

để thay đổi màu của các biểu tượng không được chọn của thanh tab

Đối với 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];
}

Trên iOS 10:

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

Có một số ý tưởng tốt trong các câu trả lời hiện có, nhiều ý tưởng hoạt động hơi khác một chút và những gì bạn chọn cũng sẽ phụ thuộc vào thiết bị bạn nhắm mục tiêu và kiểu dáng bạn muốn đạt được. UITabBarNổi tiếng là không trực quan khi tùy chỉnh diện mạo của nó, nhưng sau đây là một số thủ thuật khác có thể giúp ích:

1). Nếu bạn đang muốn loại bỏ lớp phủ bóng để có giao diện phẳng hơn, hãy làm:

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

2). Để đặt hình ảnh tùy chỉnh cho các nút tab Thanh, hãy làm như sau:

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

Ở đâu selectedvà unselectedlà UIImageđối tượng do bạn lựa chọn. Nếu bạn muốn chúng có màu phẳng, giải pháp đơn giản nhất mà tôi tìm thấy là tạo ra một màu UIViewtheo ý muốn backgroundColorvà sau đó chỉ cần kết xuất nó thành một màu UIImagevới sự trợ giúp của QuartzCore. Tôi sử dụng phương pháp sau trong một danh mục trên UIViewđể lấy UIImagenội dung của chế độ xem:

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

3) Cuối cùng, bạn có thể muốn tùy chỉnh kiểu dáng của tiêu đề các nút. Làm:

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];
}

Điều này cho phép bạn thực hiện một số điều chỉnh, nhưng vẫn còn khá hạn chế. Đặc biệt, bạn không thể tự do sửa đổi vị trí đặt văn bản trong nút và không thể có các màu khác nhau cho các nút đã chọn / không được chọn. Nếu bạn muốn bố trí văn bản cụ thể hơn, chỉ cần thiết lập UITextAttributeTextColorrõ ràng và thêm văn bản của bạn vào selectedvà unselectedhình ảnh từ phần (2).

[v setBackgroundColor ColorwithRed: Green: Blue: ];

Một giải pháp khác (đó là một cuộc tấn công) là đặt alpha trên tabBarController thành 0,01 để nó hầu như vô hình nhưng vẫn có thể nhấp được. Sau đó, đặt điều khiển ImageView ở cuối ngòi MainWindow với hình ảnh thanh tab tùy chỉnh của bạn bên dưới tabBarCOntroller alpha'ed. Sau đó, hoán đổi các hình ảnh, thay đổi màu sắc hoặc đánh dấu khi bộ điều khiển tab chuyển đổi chế độ xem.

Tuy nhiên, bạn mất chức năng '... thêm' và tùy chỉnh.

Xin chào Tôi đang sử dụng iOS SDK 4 và tôi đã có thể giải quyết vấn đề này chỉ với hai dòng mã và nó diễn ra như thế này

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

Hi vọng điêu nay co ich!

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];
}

Câu trả lời Swift 3.0: (từ Vaibhav Gaikwad)

Để thay đổi màu của các biểu tượng bỏ chọn của thanh tab:

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

Chỉ để thay đổi màu văn bản:

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

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

Swift 3 sử dụng giao diện của bạn AppDelegatelàm như sau:

UITabBar.appearance().barTintColor = your_color