UITabBarの色が選択されていませんか？

Question

5つのアイテムを持つUITabBarがあります。すべてのアイテムの選択されていない色を変更したい。アイテムはUIViewControllerクラスで宣言されていません（私はそれらを構築し、ストーリーボードのビューをリンクしました）。

このようなコードはありますか：[[UITabBar appearance] set***UN***SelectedImageTintColor:[UIColor whiteColor]];？

Answer 1

だから、受け入れられた答えを削除することはできません（試しました）が、明らかに、これはiOS 7では機能しないというコメントに対する多くの賛成票があります.

さらに多くの賛成票がある下の別の回答、またはこの回答への@Liamのコメント内のリンクを参照してください。

---

iOS 6のみ

次のようにシンプルにする必要があります。

[[UITabBar appearance] setTintColor:[UIColor grayColor]]; // for unselected items that are gray
[[UITabBar appearance] setSelectedImageTintColor:[UIColor greenColor]]; // for selected items that are green

Answer 2

私が言える限り、これはiOS 7では動作しません。特に、タブバーのtintColorは、選択されていないタブの色ではなく、選択されたタブの色を定義します。 iOS 7でデフォルトを変更したい場合は、実際には異なるアイコン（選択されていないタブに使用したい色）を使用して、テキストの色を設定する必要があるようです。

この例では、選択したタブを赤に着色し、他のタブを緑でレンダリングする必要があります。 TabBarControllerで次のコードを実行します。

// set color of selected icons and text to red
self.tabBar.tintColor = [UIColor redColor];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor redColor], NSForegroundColorAttributeName, nil] forState:UIControlStateSelected];


// set color of unselected text to green
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor greenColor], NSForegroundColorAttributeName, nil]
                                         forState:UIControlStateNormal];

// set selected and unselected icons
UITabBarItem *item0 = [self.tabBar.items objectAtIndex:0];

// this way, the icon gets rendered as it is (thus, it needs to be green in this example)
item0.image = [[UIImage imageNamed:@"unselected-icon.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

// this icon is used for selected tab and it will get tinted as defined in self.tabBar.tintColor
item0.selectedImage = [UIImage imageNamed:@"selected-icon.png"];

ストーリーボードでのみアイコンを設定すると、選択したタブの色のみを制御できます（tintColor）。他のすべてのアイコンと対応するテキストは灰色で描画されます。

たぶん、iOS 7で色を採用する簡単な方法を誰かが知っていますか？

Answer 3

iOS 10以降では、3つの簡単な解決策があります：

A.コードからのインスタンス（Swift）：

self.tabBar.unselectedItemTintColor = unselectedcolor

B. IBからのインスタンス：

キーパスを追加：unselectedItemTintColorタイプ：Color

C.グローバルな外観（Swift）：

UITabBar.appearance().unselectedItemTintColor = unselectedcolor

Answer 4

IOS 7で@Sven Tiffeの答えを拡張すると、ストーリーボードに追加された未選択のUITabBar画像に自動的に色を付けるコードを取得できます。次の方法では、2組のアイコン画像（つまり、選択済みと非選択）を作成し、プログラムでそれらを読み込む必要がありません。カテゴリメソッドimageWithColorを追加します：（- iOSのimage tintColorおよびWatchKit ）をプロジェクトに追加し、カスタムUITabBarController viewDidLoadメソッドに次のコードを追加します。

// set the selected colors
[self.tabBar setTintColor:[UIColor whiteColor]];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], NSForegroundColorAttributeName, nil] forState:UIControlStateSelected];


UIColor * unselectedColor = [UIColor colorWithRed:184/255.0f green:224/255.0f blue:242/255.0f alpha:1.0f];

// set color of unselected text
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:unselectedColor, NSForegroundColorAttributeName, nil]
                                         forState:UIControlStateNormal];

// generate a tinted unselected image based on image passed via the storyboard
for(UITabBarItem *item in self.tabBar.items) {
    // use the UIImage category code for the imageWithColor: method
    item.image = [[item.selectedImage imageWithColor:unselectedColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

UIImage + OverlayおよびUIImage + Overlay.mというカテゴリを作成します（ this answer から抽出）：

@implementation UIImage(Overlay)

- (UIImage *)imageWithColor:(UIColor *)color1
{
        UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextTranslateCTM(context, 0, self.size.height);
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSetBlendMode(context, kCGBlendModeNormal);
        CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
        CGContextClipToMask(context, rect, self.CGImage);
        [color1 setFill];
        CGContextFillRect(context, rect);
        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return newImage;
}
@end

Answer 5

User3719695の回答をSwiftに翻訳しました。Swiftは現在拡張機能を使用しています。

IImage + Overlay.Swift

extension UIImage {
  func imageWithColor(color1: UIColor) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
    color1.setFill()

    let context = UIGraphicsGetCurrentContext()
    CGContextTranslateCTM(context, 0, self.size.height)
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextSetBlendMode(context, CGBlendMode.Normal)

    let rect = CGRectMake(0, 0, self.size.width, self.size.height) as CGRect
    CGContextClipToMask(context, rect, self.CGImage)
    CGContextFillRect(context, rect)

    let newImage = UIGraphicsGetImageFromCurrentImageContext() as UIImage
    UIGraphicsEndImageContext()

    return newImage
  }
}

customTabBar.Swift

override func viewDidLoad() {
  super.viewDidLoad()
  for item in self.tabBar.items! {
    item.image = item.selectedImage?.imageWithColor(unselectedColor).imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
    //In case you wish to change the font color as well
    let attributes = [NSForegroundColorAttributeName: unselectedColor]
    item.setTitleTextAttributes(attributes, forState: UIControlState.Normal)
  }
}

Answer 6

IOS 10以降のSwiftバージョン-

UITabBar.appearance().tintColor = UIColor.gray
UITabBar.appearance().unselectedItemTintColor = UIColor.gray

Answer 7

viewWillAppearでは画像がまだ設定されていないため、コードをviewDidLoadに移動する必要がありました。

Swift 4翻訳

import Foundation
import UIKit

extension UIImage {
    func with(color: UIColor) -> UIImage {
        guard let cgImage = self.cgImage else {
            return self
        }
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        let context = UIGraphicsGetCurrentContext()!
        context.translateBy(x: 0, y: size.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.setBlendMode(.normal)
        let imageRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        context.clip(to: imageRect, mask: cgImage)
        color.setFill()
        context.fill(imageRect)
        let newImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext();
        return newImage
    }
}

class MYTabBarController: UITabBarController {

    let unselectedColor = UIColor(red: 108/255.0, green: 110/255.0, blue: 114/255.0, alpha: 1.0)
    let selectedColor = UIColor.blue()

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        // Unselected state colors
        for item in self.tabBar.items! {
            item.image = item.selectedImage!.with(color: unselectedColor).withRenderingMode(.alwaysOriginal)
        }
        UITabBarItem.appearance().setTitleTextAttributes([.foregroundColor : unselectedColor], for: .normal)

        // Selected state colors
        tabBar.tintColor = selectedColor
        UITabBarItem.appearance().setTitleTextAttributes([.foregroundColor : selectedColor], for: .selected)
    }
}

Answer 8

ここからの答えを参照してください： iOS 7のUITabBar色合い

次のように、選択されたタブバーボタンと選択されていないタブバーボタンの色合いを設定できます。

[[UIView appearanceWhenContainedIn:[UITabBar class], nil] setTintColor:[UIColor redColor]];
[[UITabBar appearance] setSelectedImageTintColor:[UIColor greenColor]];

最初の行は、タブバーに含まれるUIViewのtintColorを設定することにより、選択されていない色（この例では赤）を設定します。これは、選択されていない画像の色合いを設定するだけであり、その下のテキストの色は変更されないことに注意してください。

2行目は、タブバーで選択した画像の色合いを緑に設定します。

Answer 9

IOS 10以降でこれをプログラムで行う新しい答えは、 unselectedItemTintColor APIを使用することです。たとえば、AppDelegate内でTab Bar Controllerを初期化した場合、次のようになります。

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        ...

        let firstViewController = VC1()
        let secondViewController = VC2()
        let thirdViewController = VC3()


        let tabBarCtrl = UITabBarController()
        tabBarCtrl.viewControllers = [firstViewController, secondViewController, thirdViewController]

        // set the color of the active tab
        tabBarCtrl.tabBar.tintColor = UIColor.white

        // set the color of the inactive tabs
        tabBarCtrl.tabBar.unselectedItemTintColor = UIColor.gray

        ...
    }

Answer 10

Swift 4バージョン（暗黙的にアンラップオプションなし）：

IImage + Overlay.Swift

import UIKit

extension UIImage {
    func with(color: UIColor) -> UIImage? {
        guard let cgImage = self.cgImage else {
            return self
        }
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        if let context = UIGraphicsGetCurrentContext() {
            context.translateBy(x: 0, y: size.height)
            context.scaleBy(x: 1.0, y: -1.0)
            context.setBlendMode(.normal)
            let imageRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
            context.clip(to: imageRect, mask: cgImage)
            color.setFill()
            context.fill(imageRect)
            if let newImage = UIGraphicsGetImageFromCurrentImageContext() {
                UIGraphicsEndImageContext();
                return newImage
            }
        }
        return nil;
    }
}

CustomTabBarController.Swift

class CustomTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        if #available(iOS 10.0, *) {
            self.tabBar.unselectedItemTintColor = UIColor.init(white: 1, alpha: 0.5)
        } else {
            // Fallback on earlier versions
            if let items = self.tabBar.items {
                let unselectedColor = UIColor.init(white: 1, alpha: 0.5)
                let selectedColor = UIColor.white
                // Unselected state colors
                for item in items {
                    if let selectedImage = item.selectedImage?.with(color: unselectedColor)?.withRenderingMode(.alwaysOriginal) {
                        item.image = selectedImage
                    }
                }
                UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor : unselectedColor], for: .normal)

                // Selected state colors
                tabBar.tintColor = selectedColor
                UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor : selectedColor], for: .selected)
            }
        }

        UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.font: UIFont(name: "overpass-light", size: 12)!, NSAttributedStringKey.foregroundColor: UIColor.white], for: UIControlState.normal)
    }
}

Answer 11

または、コーディングなしでのみ。 Swift 4、Xcode 10.1.

1. Interface Builderを使用して、View ControllerにUITabBarを追加します。
2. 左側のパネルで追加したビューを選択します。
3. タイプcmd + alt + 3またはShow the Identity Inspector右側のパネル。
4. セクションUser Defined Runtime Attributesplusボタンをクリックして、新しい属性を追加し、unselectedItemTintColorとして呼び出します（ here を参照） 。
5. Type列の下の前のステップ（番号4を参照）のセクションを残さずに、Colorタイプを選択します。
6. 最後に、Valueセクションの下に必要な色を設定します。
7. プロジェクトをコンパイルする
8. 終わった。おめでとうございます。 ????????

Answer 12

@JoeGalidのimageWithColor: Xamarinを使用したソリューション：

using CoreGraphics;
using UIKit;

namespace Example
{
    public static class UIImageExtensions
    {
        public static UIImage ImageWithColor(this UIImage image, UIColor color)
        {
            UIGraphics.BeginImageContextWithOptions(image.Size, false, image.CurrentScale);

            color.SetFill();

            var context = UIGraphics.GetCurrentContext();

            context.TranslateCTM(0, image.Size.Height);
            context.ScaleCTM(1.0f, -1.0f);
            context.SetBlendMode(CoreGraphics.CGBlendMode.Normal);

            var rect = new CGRect(0, 0, image.Size.Width, image.Size.Height);
            context.ClipToMask(rect, image.CGImage);
            context.FillRect(rect);

            var newImage = UIGraphics.GetImageFromCurrentImageContext() as UIImage;
            UIGraphics.EndImageContext();

            return newImage;
        }
    }
}

次に、タブバー項目を設定するときにそれを利用します。

var image = UIImage.FromBundle("name");
barItem.Image = image.ImageWithColor(UIColor.Gray).ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
barItem.SelectedImage = image.ImageWithColor(UIColor.Red).ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)