选择项目后,如何更改UITabItem的背景颜色

时间:2022-08-14 20:16:43

I would like a different background color when the user selects a tab bar item than when it is unselected.

当用户选择标签栏项目时,我想要一种不同的背景颜色,而不是取消选择它时。

11 个解决方案

#1


23  

Put this in the Appdelegate.m in application didFinishLaunchingWithOptions

将它放在应用程序didFinishLaunchingWithOptions中的Appdelegate.m中

UIImage *whiteBackground = [UIImage imageNamed:@"whiteBackground"];
[[UITabBar appearance] setSelectionIndicatorImage:whiteBackground];

#2


11  

if you use a storyboard or xibs, click "Tab Bar" and add "selectedImageTintColor" path into the Key Path Attributes tag. Like this :

如果您使用storyboard或xibs,请单击“Tab Bar”并将“selectedImageTintColor”路径添加到Key Path Attributes标记中。喜欢这个 :

选择项目后,如何更改UITabItem的背景颜色

#3


7  

UPDATE: As of iOS 7.1 this technique no longer works (if the user taps the same tab twice in succession, the background colour is cleared).

更新:从iOS 7.1开始,此技术不再有效(如果用户连续两次点击相同的选项卡,则清除背景颜色)。


UITabBarItem is a subclass of UIBarItem, everything is more painful because UIBarItem doesn't subclass UIView; however, UITabBarItem contains one. What follows manipulates that view, and therefore might be rejected if submitted to the AppStore.

UITabBarItem是UIBarItem的子类,一切都比较痛苦,因为UIBarItem不是UIView的子类;但是,UITabBarItem包含一个。以下内容操纵该视图,因此如果提交给AppStore可能会被拒绝。

1) Subclass UITabBarItem

1)子类UITabBarItem

Create a subclass of UITabBarItem and add a new selected property to its header, like so:

创建UITabBarItem的子类并向其标头添加新的选定属性,如下所示:

@interface ALDTabBarItem : UITabBarItem
@property (nonatomic, assign, getter = isSelected) BOOL selected;
@end

UITabBarItems have a view property, but it isn't exposed. We can extend the class to access it, and then create a custom setter on the selected property to change the background colour, like so:

UITabBarItems有一个view属性,但它没有公开。我们可以扩展类来访问它,然后在selected属性上创建一个自定义setter来更改背景颜色,如下所示:

#import "ALDTabBarItem.h"

@interface ALDTabBarItem (ALD)
@property (nonatomic, strong) UIView *view;
@end

@implementation ALDTabBarItem

- (void)setSelected:(BOOL)selected
{
    if(selected)
        self.view.backgroundColor = [UIColor redColor];
    else
        self.view.backgroundColor = [UIColor clearColor];
} 

@end

2) Update your UITabBarController delegate

2)更新您的UITabBarController委托

Add the following code to the delegate of your UITabBarController, which sets the selected states of the UITabBar:

将以下代码添加到UITabBarController的委托中,该委托设置UITabBar的选定状态:

- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
{
    for(ALDTabBarItem *myItem in tabBar.items)
        myItem.selected = (myItem == item);
}

#4


6  

In Swift

在斯威夫特

UITabBar.appearance().selectionIndicatorImage = UIImage(named: "tabSelected")

with an image tabSelected@2x.png of size 98x98 pixels

图像tabSelected@2x.png,大小为98x98像素

#5


3  

Follow this Steps:

请遵循以下步骤:

  1. Create SubClass of UITabBarController

    创建UITabBarController的SubClass

  2. Go to viewDidAppear of UITabBarController subclass

    转到UITabBarController子类的viewDidAppear

  3. Now Find the size of TabBarItem,

    现在找出TabBarItem的大小,

    UITabBar *tabBar = self.tabBar;
    CGSize imgSize = CGSizeMake(tabBar.frame.size.width/tabBar.items.count,tabBar.frame.size.height);
    
  4. Now Create the image with that size,

    现在创建具有该大小的图像,

    //Create Image
    UIGraphicsBeginImageContextWithOptions(imgSize, NO, 0);
    UIBezierPath* p =
    [UIBezierPath bezierPathWithRect:CGRectMake(0,0,imgSize.width,imgSize.height)];
    [[UIColor blueColor] setFill];
    [p fill];
    UIImage* finalImg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
  5. Now, Assign this image to TabBar's SelectionIndicatorImage

    现在,将此图像分配给TabBar的SelectionIndicatorImage

    [tabBar setSelectionIndicatorImage:finalImg];
    

Swift 4 Version:

Swift 4版本:

let imgSize = CGSize(width: tabBar.frame.size.width / CGFloat(tabBar.items!.count),
                     height: tabBar.frame.size.height)
UIGraphicsBeginImageContextWithOptions(imgSize, false, 0)
let p = UIBezierPath(rect: CGRect(x: 0, y: 0, width: imgSize.width,
                                  height: imgSize.height))
UIColor.blue.setFill()
p.fill()
let finalImg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
UITabBar.appearance().selectionIndicatorImage = finalImg

#6


1  

Please refer below URL's.

请参阅以下网址。

Changing Tint / Background color of UITabBar

改变UITabBar的色调/背景颜色

How To Change Tab bar color in Xcode

如何更改Xcode中的标签栏颜色

hope this will help you..

希望对你有帮助..

try this to change tabbar item color but it only work in ios5.

尝试此更改tabbar项目颜色,但它只适用于ios5。

if ([UITabBar instancesRespondToSelector:@selector(setSelectedImageTintColor:)])
{
    [tabBarController.tabBar setSelectedImageTintColor:[UIColor redColor]];
}

#7


1  

My answer is similar to @Mehul Thakkar but it is in Swift 4 and to improve on his answer I would say that if you place the code in viewDidAppear as he suggests users will see the change happening which is not good user experience.

我的答案类似于@Mehul Thakkar,但它是在Swift 4中并且为了改进他的答案我会说,如果你将代码放在viewDidAppear中,因为他建议用户将看到发生的变化,这不是良好的用户体验。

So create the custom class for your tabbar controller and in viewDidLoad place the following code:

因此,为tabbar控制器创建自定义类,并在viewDidLoad中放置以下代码:

let singleTabWidth: CGFloat = self.tabBar.frame.size.width / CGFloat((self.tabBar.items?.count)!)
let singleTabSize = CGSize(width:singleTabWidth , height: self.tabBar.frame.size.height)

let selectedTabBackgroundImage: UIImage = self.imageWithColor(color: .white, size: singleTabSize)
self.tabBar.selectionIndicatorImage = selectedTabBackgroundImage

The imageWithColor function is below for you:

imageWithColor函数如下:

//image with color and size
    func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        context!.setFillColor(color.cgColor)
        context!.fill(rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image!
    }

Hope this helps someone.

希望这有助于某人。

#8


0  

You can use tintcolor.

你可以使用tintcolor。

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

In AppDelegate.m, put the following code after // Override point for customization after application launch.

在AppDelegate.m中,将以下代码放在//覆盖点以便在应用程序启动后进行自定义。

#9


0  

Put this in your AppDelegate.m file:

把它放在你的AppDelegate.m文件中:

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
            // Override point for customization after application launch.

            [UITabBar appearance].selectionIndicatorImage = [UIImage imageNamed:@"activeTabBackgroundImage"];


            return YES;
        }

#10


0  

Currently in Xcode 8.3.2 you can do it inside the storyboard using an image that will represent the actual background.

目前在Xcode 8.3.2中,您可以使用代表实际背景的图像在故事板中完成。

Select the tab bar inside your tab bar controller:

选择标签栏控制器中的标签栏:

选择项目后,如何更改UITabItem的背景颜色

Inside the Utilities choose the Attributes Inspector and change the selection background image:

在Utilities内部选择Attributes Inspector并更改选择背景图像:

选择项目后,如何更改UITabItem的背景颜色

#11


0  

Answer in swift 4:

快速解答4:

setSelectedImageTintColor is deprecated on iOS 8.

在iOS 8上不推荐使用setSelectedImageTintColor。

Instead use this :

而是使用这个:

self.tabBar.tintColor = UIColor.white

self.tabBar.tintColor = UIColor.white

#1


23  

Put this in the Appdelegate.m in application didFinishLaunchingWithOptions

将它放在应用程序didFinishLaunchingWithOptions中的Appdelegate.m中

UIImage *whiteBackground = [UIImage imageNamed:@"whiteBackground"];
[[UITabBar appearance] setSelectionIndicatorImage:whiteBackground];

#2


11  

if you use a storyboard or xibs, click "Tab Bar" and add "selectedImageTintColor" path into the Key Path Attributes tag. Like this :

如果您使用storyboard或xibs,请单击“Tab Bar”并将“selectedImageTintColor”路径添加到Key Path Attributes标记中。喜欢这个 :

选择项目后,如何更改UITabItem的背景颜色

#3


7  

UPDATE: As of iOS 7.1 this technique no longer works (if the user taps the same tab twice in succession, the background colour is cleared).

更新:从iOS 7.1开始,此技术不再有效(如果用户连续两次点击相同的选项卡,则清除背景颜色)。


UITabBarItem is a subclass of UIBarItem, everything is more painful because UIBarItem doesn't subclass UIView; however, UITabBarItem contains one. What follows manipulates that view, and therefore might be rejected if submitted to the AppStore.

UITabBarItem是UIBarItem的子类,一切都比较痛苦,因为UIBarItem不是UIView的子类;但是,UITabBarItem包含一个。以下内容操纵该视图,因此如果提交给AppStore可能会被拒绝。

1) Subclass UITabBarItem

1)子类UITabBarItem

Create a subclass of UITabBarItem and add a new selected property to its header, like so:

创建UITabBarItem的子类并向其标头添加新的选定属性,如下所示:

@interface ALDTabBarItem : UITabBarItem
@property (nonatomic, assign, getter = isSelected) BOOL selected;
@end

UITabBarItems have a view property, but it isn't exposed. We can extend the class to access it, and then create a custom setter on the selected property to change the background colour, like so:

UITabBarItems有一个view属性,但它没有公开。我们可以扩展类来访问它,然后在selected属性上创建一个自定义setter来更改背景颜色,如下所示:

#import "ALDTabBarItem.h"

@interface ALDTabBarItem (ALD)
@property (nonatomic, strong) UIView *view;
@end

@implementation ALDTabBarItem

- (void)setSelected:(BOOL)selected
{
    if(selected)
        self.view.backgroundColor = [UIColor redColor];
    else
        self.view.backgroundColor = [UIColor clearColor];
} 

@end

2) Update your UITabBarController delegate

2)更新您的UITabBarController委托

Add the following code to the delegate of your UITabBarController, which sets the selected states of the UITabBar:

将以下代码添加到UITabBarController的委托中,该委托设置UITabBar的选定状态:

- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
{
    for(ALDTabBarItem *myItem in tabBar.items)
        myItem.selected = (myItem == item);
}

#4


6  

In Swift

在斯威夫特

UITabBar.appearance().selectionIndicatorImage = UIImage(named: "tabSelected")

with an image tabSelected@2x.png of size 98x98 pixels

图像tabSelected@2x.png,大小为98x98像素

#5


3  

Follow this Steps:

请遵循以下步骤:

  1. Create SubClass of UITabBarController

    创建UITabBarController的SubClass

  2. Go to viewDidAppear of UITabBarController subclass

    转到UITabBarController子类的viewDidAppear

  3. Now Find the size of TabBarItem,

    现在找出TabBarItem的大小,

    UITabBar *tabBar = self.tabBar;
    CGSize imgSize = CGSizeMake(tabBar.frame.size.width/tabBar.items.count,tabBar.frame.size.height);
    
  4. Now Create the image with that size,

    现在创建具有该大小的图像,

    //Create Image
    UIGraphicsBeginImageContextWithOptions(imgSize, NO, 0);
    UIBezierPath* p =
    [UIBezierPath bezierPathWithRect:CGRectMake(0,0,imgSize.width,imgSize.height)];
    [[UIColor blueColor] setFill];
    [p fill];
    UIImage* finalImg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
  5. Now, Assign this image to TabBar's SelectionIndicatorImage

    现在,将此图像分配给TabBar的SelectionIndicatorImage

    [tabBar setSelectionIndicatorImage:finalImg];
    

Swift 4 Version:

Swift 4版本:

let imgSize = CGSize(width: tabBar.frame.size.width / CGFloat(tabBar.items!.count),
                     height: tabBar.frame.size.height)
UIGraphicsBeginImageContextWithOptions(imgSize, false, 0)
let p = UIBezierPath(rect: CGRect(x: 0, y: 0, width: imgSize.width,
                                  height: imgSize.height))
UIColor.blue.setFill()
p.fill()
let finalImg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
UITabBar.appearance().selectionIndicatorImage = finalImg

#6


1  

Please refer below URL's.

请参阅以下网址。

Changing Tint / Background color of UITabBar

改变UITabBar的色调/背景颜色

How To Change Tab bar color in Xcode

如何更改Xcode中的标签栏颜色

hope this will help you..

希望对你有帮助..

try this to change tabbar item color but it only work in ios5.

尝试此更改tabbar项目颜色,但它只适用于ios5。

if ([UITabBar instancesRespondToSelector:@selector(setSelectedImageTintColor:)])
{
    [tabBarController.tabBar setSelectedImageTintColor:[UIColor redColor]];
}

#7


1  

My answer is similar to @Mehul Thakkar but it is in Swift 4 and to improve on his answer I would say that if you place the code in viewDidAppear as he suggests users will see the change happening which is not good user experience.

我的答案类似于@Mehul Thakkar,但它是在Swift 4中并且为了改进他的答案我会说,如果你将代码放在viewDidAppear中,因为他建议用户将看到发生的变化,这不是良好的用户体验。

So create the custom class for your tabbar controller and in viewDidLoad place the following code:

因此,为tabbar控制器创建自定义类,并在viewDidLoad中放置以下代码:

let singleTabWidth: CGFloat = self.tabBar.frame.size.width / CGFloat((self.tabBar.items?.count)!)
let singleTabSize = CGSize(width:singleTabWidth , height: self.tabBar.frame.size.height)

let selectedTabBackgroundImage: UIImage = self.imageWithColor(color: .white, size: singleTabSize)
self.tabBar.selectionIndicatorImage = selectedTabBackgroundImage

The imageWithColor function is below for you:

imageWithColor函数如下:

//image with color and size
    func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        context!.setFillColor(color.cgColor)
        context!.fill(rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image!
    }

Hope this helps someone.

希望这有助于某人。

#8


0  

You can use tintcolor.

你可以使用tintcolor。

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

In AppDelegate.m, put the following code after // Override point for customization after application launch.

在AppDelegate.m中,将以下代码放在//覆盖点以便在应用程序启动后进行自定义。

#9


0  

Put this in your AppDelegate.m file:

把它放在你的AppDelegate.m文件中:

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
            // Override point for customization after application launch.

            [UITabBar appearance].selectionIndicatorImage = [UIImage imageNamed:@"activeTabBackgroundImage"];


            return YES;
        }

#10


0  

Currently in Xcode 8.3.2 you can do it inside the storyboard using an image that will represent the actual background.

目前在Xcode 8.3.2中,您可以使用代表实际背景的图像在故事板中完成。

Select the tab bar inside your tab bar controller:

选择标签栏控制器中的标签栏:

选择项目后,如何更改UITabItem的背景颜色

Inside the Utilities choose the Attributes Inspector and change the selection background image:

在Utilities内部选择Attributes Inspector并更改选择背景图像:

选择项目后,如何更改UITabItem的背景颜色

#11


0  

Answer in swift 4:

快速解答4:

setSelectedImageTintColor is deprecated on iOS 8.

在iOS 8上不推荐使用setSelectedImageTintColor。

Instead use this :

而是使用这个:

self.tabBar.tintColor = UIColor.white

self.tabBar.tintColor = UIColor.white