Зміна відтінку / кольору тла 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.