自定義 UITabBar 圖標 iOS

Question

我正在開發一個選項卡式應用程序，我想集成自定義 UITabbar 背景和圖標。 我已經插入了自定義背景，但圖標有問題。

這是圖標的外觀：

但是在為故事板中的每個視圖添加圖標后，我會得到這樣的灰色圖標：

有誰知道為什么以這種方式顯示圖標？

非常感謝你！

Answer 1

使用 Xcode 6，為了能夠直接從 Storyboard 更改圖像，您可以這樣做：

@IBDesignable class CustomizedTabBarItem: UITabBarItem {
    @IBInspectable var finalImage:UIImage = UIImage() {
        didSet {
            self.image = finalImage.imageWithRenderingMode(.AlwaysOriginal)
        }
    }
    @IBInspectable var finalSelectedImage:UIImage = UIImage() {
        didSet {
            self.selectedImage = finalSelectedImage.imageWithRenderingMode(.AlwaysOriginal)
        }
    }
}

之后，您只需在故事板中設置圖像

Answer 2

我還不能發表評論，所以我會添加為答案。

由於 iOS 7 setFinishedSelectedImage:withFinishedUnselectedImage:已棄用。

要解決這個問題，您可以這樣做：

UIImage *selectedImage = [UIImage imageNamed:@"tabbar-highlight"];
selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *unselectedImage = [UIImage imageNamed:@"tabbar"];
unselectedImage = [unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tabBarItem = [[UITabBarItem alloc] initWithTitle:@"TabBarItem1" image:unselectedImage selectedImage:selectedImage];
//
//OR
//
UIImage *selectedImage = [UIImage imageNamed:@"tabbar-highlight"];
selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *unselectedImage = [UIImage imageNamed:@"tabbar"];
unselectedImage = [unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[yourTabBarItem setImage:unselectedImage];
[yourTabBarItem setSelectedImage:selectedImage];

希望這有助於澄清 iOS7+。

Answer 3

這就是我在我的一個應用程序中的做法。 在你的 AppDelegates didFinishLaunchingWithOptions:方法中，添加這個並填寫你的圖像名稱：

    UITabBarController *tabController = (UITabBarController *)self.window.rootViewController;

    //tab1
    UIImage *selectedImage = [UIImage imageNamed:@"home-tab-selected"];
    UIImage *unselectedImage = [UIImage imageNamed:@"home2-tab"];
    MyTabBar *tabBar = (MyTabBar *)tabController.tabBar;
    UITabBarItem *item1 = [tabBar.items objectAtIndex:0];
    [item1 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];

    //tab2
    selectedImage = [UIImage imageNamed:@"customers-tab-selected"];
    unselectedImage = [UIImage imageNamed:@"customers-tab"];
    UITabBarItem *item2 = [tabBar.items objectAtIndex:1];
    [item2 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];

    //tab3
    selectedImage = [UIImage imageNamed:@"maps-tab-selected"];
    unselectedImage = [UIImage imageNamed:@"maps-tab"];
    UITabBarItem *item3 = [tabBar.items objectAtIndex:2];
    [item3 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];

    //tab4
    selectedImage = [UIImage imageNamed:@"reports-tab-selected"];
    unselectedImage = [UIImage imageNamed:@"reports-tab"];
    UITabBarItem *item4 = [tabBar.items objectAtIndex:3];
    [item4 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];

    //tab5
    selectedImage = [UIImage imageNamed:@"orders-tab-selected"];
    unselectedImage = [UIImage imageNamed:@"orders-tab"];
    UITabBarItem *item5 = [tabBar.items objectAtIndex:4];
    [item5 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];


    if ([tabBar respondsToSelector:@selector(setBackgroundImage:)])
    {
        // ios 5 code here
        [tabBar setBackgroundImage:[UIImage imageNamed:@"tab-bg"]];

    }   

非常適合我。

Answer 4

Julien 關於 IBInspectable 的回答的更新版本如下

import UIKit

@IBDesignable
class CustomTabBarItem: UITabBarItem {
    @IBInspectable var finalImage: UIImage = UIImage() {
        didSet {
            self.image = finalImage.withRenderingMode(.alwaysOriginal)
            }
        }
    @IBInspectable var finalSelectedImage: UIImage = UIImage() {
       didSet {
            self.selectedImage = finalSelectedImage.withRenderingMode(.alwaysOriginal)
            }
        }
}

Answer 5

您可以使用setFinishedSelectedImage:withFinishedUnselectedImage: on UITabBarItem設置標簽欄圖標的完成圖像

檢查此處的文檔（在外觀下查看）

UITabBarItem的默認行為是根據您的圖標創建一個蒙版，然后它應用該特殊的藍色處理作為您的視線。

Answer 6

你也可以保持簡單;)

    [tabBarItemName setSelectedImage:[UIImage imageNamed:@"image name"]];

您必須在 ViewController.h 中聲明 tabBarItemName