簡體   English   中英

改變UITabBar的色調/背景顏色

[英]Changing Tint / Background color of UITabBar

UINavigationBar和UISearchBar都有一個tintColor屬性,允許你改變這兩個項目的色調(我知道)。 我想在我的應用程序中對UITabBar做同樣的事情,但現在已經找到了從默認的黑色中改變它的方法。 有任何想法嗎?

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;

我已經能夠通過子類化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

我有一個最終答案的附錄。 雖然基本方案是正確的,但可以改進使用部分透明顏色的技巧。 我假設它只是讓默認漸變顯示出來。 哦,同樣,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];

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

條形樣式在視圖內容和標簽欄之間放置一個微妙的分隔符。

沒有簡單的方法可以做到這一點,你基本上需要子類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];
}

對我來說,改變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"];

試試這個!!!

[[self tabBar] insertSubview:v atIndex:0]; 適合我。

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

只是背景顏色

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

或者在App Delegate中

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

用於更改tabbar的取消選擇圖標的顏色

對於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)];
}

selectedunselected是您選擇的UIImage對象。 如果您希望它們是平面顏色,我發現最簡單的解決方案是使用所需的backgroundColor創建一個UIView ,然后在QuartzCore的幫助下將其渲染為UIImage 我在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要清楚,並添加文本到selectedunselected從部分(2)的圖像。

[v setBackgroundColor ColorwithRed: Green: Blue: ];
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)

要更改tabbar的取消選擇圖標的顏色:

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)

使用AppDelegate外觀的Swift 3執行以下操作:

UITabBar.appearance().barTintColor = your_color

另一個解決方案(這是一個hack)是將tabBarController上的alpha設置為0.01,這樣它幾乎不可見但仍然可以點擊。 然后使用alpha'ed tabBarCOntroller下面的自定義tabbar圖像在MainWindow筆尖的底部設置一個ImageView控件。 然后在tabbarcontroller切換視圖時交換圖像,更改顏色或高亮度。

但是,您失去了“...更多”和自定義功能。

嗨我在使用iOS SDK 4,我只用兩行代碼解決了這個問題,就像這樣

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

希望這可以幫助!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM