Зміна відтінку / кольору тла UITabBar


87

Обидва UINavigationBar та UISearchBar мають властивість tintColor, що дозволяє змінити колір відтінку (що дивно, я знаю) обох цих елементів. Я хочу зробити те ж саме з UITabBar у моїй програмі, але зараз знайшов спосіб змінити його із чорного кольору за замовчуванням. Будь-які ідеї?


Це чудові відповіді. Якщо ви дозволяєте авторотацію, корисно встановити для автоматичної зміни розміру підпрогляду гнучкі поля та розмір, інакше новий фон не змінить розмір на панелі вкладок.
— pmdj

Відповіді:


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? якби я використав це у своєму додатку, чи отримав би мені відмову?
— Френк

там, здається, немає приватних дзвінків
— Ентоні Мейн

властивість панелі вкладок раніше не було доступним.
— 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 зовнішній вигляд] 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];
— Vibhor Goyal

Я знаю, що відповідь стара, але це спрацювало для мене. Оскільки мені потрібне було власне зображення замість кольору, я змішав вашу відповідь із цим одним відтінком на смужках - частина
— 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 Чи можете пояснити plz?
— 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 для вас.
— Шанувальник YSR

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щоб отримати a 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. Потім міняйте місцями зображення, міняйте кольори або підсвічування, коли контролер панелі вкладок перемикає подання.

Однак ви втрачаєте "... більше" та налаштовуєте функціональність.


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: (від 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)

0

Свіфт 3, використовуючи зовнішній вигляд, AppDelegateзробіть наступне:

UITabBar.appearance().barTintColor = your_color

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.