Изменение оттенка / цвета фона UITabBar


87

У UINavigationBar и UISearchBar есть свойство tintColor, которое позволяет вам изменять цвет оттенка (удивительно, я знаю) обоих этих элементов. Я хочу сделать то же самое с UITabBar в моем приложении, но теперь нашел способ изменить его с черного цвета по умолчанию. Любые идеи?


Это отличные ответы. Если вы разрешаете автоповорот, полезно настроить маску autoresizingMask для subview, чтобы иметь гибкие поля и размер, иначе размер нового фона не будет изменяться вместе с панелью вкладок.
pmdj 02

Ответы:


47

Мне удалось заставить его работать, создав подкласс 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

1
Это своего рода странное решение, поскольку оно просто помещает полупрозрачный коричневый прямоугольник поверх панели вкладок. Проблема в том, что все кнопки стали коричневыми, а не только фон. Однако это, кажется, лучший вариант, который когда-либо был представлен.
Иона

это частный API? если бы я использовал это в своем приложении, мне отказали бы?
Frank

там, кажется, нет никаких частных звонков
Энтони Мэйн

свойство панели вкладок раньше было недоступно.
coneybeare

это изменяет фон панели вкладок, а не выделение «выбранного элемента», что меня больше интересует
smdvlpr

105

iOS 5 добавила несколько новых методов внешнего вида для настройки внешнего вида большинства элементов пользовательского интерфейса.

Вы можете настроить таргетинг на каждый экземпляр 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;

3
Неа. Как я уже отмечал, они предназначены для iOS 5. Вы всегда можете настроить таргетинг на определенные версии с помощью операторов условной компиляции: cocoawithlove.com/2010/07/…
imnk

Спасибо, это было полезно :) Никогда не знал, что такое есть.
Veeru

Для iOS 7 используйте [UITabBar appearance] setBarTintColor, если вы хотите изменить цвет фона
Zeezer

34

У меня есть дополнение к окончательному ответу. Хотя основная схема верна, трюк с использованием частично прозрачного цвета можно улучшить. Я предполагаю, что это только для того, чтобы позволить градиенту по умолчанию просвечивать. Да, также, высота 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];

}

1
если вы хотите сделать его красивым с помощью фонового изображения, см. это: duivesteyn.net/2010/01/16/iphone-custom-tabbar-background-image
oberbaum

1
Я думаю, это должно быть: [[self tabBar] insertSubview: v atIndex: 0];
Вибхор Гоял

Я знаю, что ответ старый, но у меня это сработало. Поскольку мне нужно было собственное изображение вместо цвета, я смешал ваш ответ с этим оттенком на столбцах - часть
UITabBar

27

Когда вы просто используете addSubview, ваши кнопки теряют возможность нажатия, поэтому вместо

[[self tabBar] addSubview:v];

использование:

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

7

Нет простого способа сделать это, вам в основном нужно создать подкласс UITabBar и реализовать собственный рисунок, чтобы делать то, что вы хотите. Для достижения эффекта потребуется немало усилий, но оно того стоит. Я рекомендую зарегистрировать ошибку в Apple, чтобы добавить ее в будущий iPhone SDK.


4
Сэр, вы залили жучок яблоком?
Сагар Р. Котари

7

Следующее - идеальное решение для этого. У меня это отлично работает для 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];
}

что такое tabBarcontroller, это контроллер, который соответствует UITabarDelegate. Вы можете объяснить, пожалуйста?
The iCoder

7

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

Стиль панели устанавливает тонкий разделитель между содержимым представления и панелью вкладок.



5

для меня очень просто изменить цвет панели вкладок, например: -

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


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

Попробуй это!!!


Работает нормально! +1 для вас.
Поклонник

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

2

только для цвета фона

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

1

В существующих ответах есть несколько хороших идей, многие работают немного по-другому, и то, что вы выберете, также будет зависеть от того, на какие устройства вы нацеливаетесь и какой внешний вид вы стремитесь достичь. 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).



0

Другое решение (которое представляет собой взлом) - установить альфа-канал tabBarController на 0,01, чтобы он был практически невидимым, но все же был доступен для нажатия. Затем установите элемент управления ImageView в нижней части пера MainWindow с вашим настраиваемым изображением панели вкладок под альфа-элементом tabBarCOntroller. Затем поменяйте местами изображения, измените цвета или выделите, когда tabbarcontroller переключает представления.

Однако вы теряете «... еще» и настраиваете функциональность.


0

Привет, я использую iOS SDK 4, и я смог решить эту проблему всего двумя строками кода, и это выглядит так

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

Надеюсь это поможет!


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

0

Swift 3.0 ответ: (от Вайбхава Гайквада)

Для изменения цвета значков отмены выбора на панели вкладок:

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)

0

Swift 3, используя внешний вид вашего, AppDelegateсделайте следующее:

UITabBar.appearance().barTintColor = your_color

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.