IOS 7のタブバーで非アクティブなアイコン/テキストの色を変更するにはどうすればよいですか?グレー色のもの。
各TabBarの最初のすべてのViewController:
- (void)viewDidLoad
{
[super viewDidLoad];
// changing the unselected image color, you should change the selected image
// color if you want them to be different
self.tabBarItem.selectedImage = [[UIImage imageNamed:@"yourImage_selectedImage"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.tabBarItem.image = [[UIImage imageNamed:@"yourImage_image"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
このコードの手がかりは「UIImageRenderingModeAlwaysOriginal」です。
Apple Documentationによるレンダリングモード:
UIImageRenderingModeAutomatic, // Use the default rendering mode for the context where the image is used
UIImageRenderingModeAlwaysOriginal, // Always draw the original image, without treating it as a template
UIImageRenderingModeAlwaysTemplate, // Always draw the image as a template image, ignoring its color information
テキストの色を変更するには:
AppDelegateの場合:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Add this if you only want to change Selected Image color
// and/or selected image text
[[UITabBar appearance] setTintColor:[UIColor redColor]];
// Add this code to change StateNormal text Color,
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor greenColor]}
forState:UIControlStateNormal];
// then if StateSelected should be different, you should add this code
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor purpleColor]}
forState:UIControlStateSelected];
return YES;
}
アセットカタログ内のタブバー画像のプロパティRender As
を直接設定することもできます。そこで、プロパティをDefault
、Original Image
、およびTemplate Image
に設定するオプションがあります。
タブバーの選択解除アイコンの色を変更するための
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]];
すべてのUIViewControllerに追加する代わりに、拡張機能を作成し、UITabBarControllerの外観を変更できます。
選択されていないアイコンの色を変更する
extension UITabBarController {
override public func viewDidLoad() {
super.viewDidLoad()
tabBar.items?.forEach({ (item) -> () in
item.image = item.selectedImage?.imageWithColor(UIColor.redColor()).imageWithRenderingMode(.AlwaysOriginal)
})
}
}
選択したアイコンの色を変更する
let tabBarAppearance = UITabBar.appearance()
tabBarAppearance.tintColor = UIColor.blackColor()
選択したタイトルの色を変更(選択しない)
let tabBarItemApperance = UITabBarItem.appearance()
tabBarItemApperance.setTitleTextAttributes([NSFontAttributeName: UIFont(name: "Edmondsans-Bold", size: 10)!, NSForegroundColorAttributeName:UIColor.redColor()], forState: UIControlState.Normal)
tabBarItemApperance.setTitleTextAttributes([NSFontAttributeName: UIFont(name: "Edmondsans-Bold", size: 10)!, NSForegroundColorAttributeName:UIColor.blackColor()], forState: UIControlState.Selected)
IImage拡張機能
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!, .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
}
}
Appdelegate.mのみを使用することにより、各ViewControllerを使用しないより良い方法があります。
AppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
関数で、これを試してください。
UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
UITabBar *tabBar = tabBarController.tabBar;
// repeat for every tab, but increment the index each time
UITabBarItem *firstTab = [tabBar.items objectAtIndex:0];
// also repeat for every tab
firstTab.image = [[UIImage imageNamed:@"someImage.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
firstTab.selectedImage = [[UIImage imageNamed:@"someImageSelected.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
IOS 10以降でSwift 3を使用してプログラムでこれを行う新しい答えは、 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
// set the text color
...
}
また、選択したテキストと選択していないテキストの色を設定するには:
let unselectedItem = [NSForegroundColorAttributeName: UIColor.green]
let selectedItem = [NSForegroundColorAttributeName: UIColor.red]
self.tabBarItem.setTitleTextAttributes(unselectedItem, for: .normal)
self.tabBarItem.setTitleTextAttributes(selectedItem, for: .selected)
Swift 3.0では、次のように記述できます。
選択されていないタブバー画像の場合
viewController.tabBarItem.image = UIImage(named: "image")?.withRenderingMode(.alwaysOriginal)
選択したタブバーの画像の場合
viewController.tabBarItem.selectedImage = UIImage(named: "image")?.withRenderingMode(.alwaysOriginal)
@ankaの答えは非常に良いと思います。また、強調表示されたアイテムの色合いを有効にする次のコードも追加しました。
let image = UIImage(named:"tab-account")!.imageWithRenderingMode(.AlwaysTemplate)
let item = tabBar.items![IC.const.tab_account] as! UITabBarItem
item.selectedImage = image
または1行で:
(tabBar.items![IC.const.tab_account] as! UITabBarItem).selectedImage = UIImage(named:"tab-account")!.imageWithRenderingMode(.AlwaysTemplate)
そのため、次のようになります。
TabBarItemの各viewControllerにレンダリングイメージコードを追加する代わりに、拡張機能を使用します
extension UITabBar{
func inActiveTintColor() {
if let items = items{
for item in items{
item.image = item.image?.withRenderingMode(.alwaysOriginal)
item.setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.green], for: .normal)
item.setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.white], for: .selected)
}
}
}
}
次に、UITabBarControllerクラスで次のように呼び出します
class CustomTabBarViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
tabBar.inActiveTintColor()
}
}
次のような出力が得られます。 注:ストーリーボードのTabBarControllerにCustomTabBarViewControllerクラスを割り当てることを忘れないでください。
TabBarViewController(ViewDidload)と呼ばれる最初のViewControllerにこのコードを配置するだけです。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self loadIconsTabBar];
}
-(void) loadIconsTabBar{
UITabBar *tabBar = self.tabBarController.tabBar;
//
UITabBarItem *firstTab = [tabBar.items objectAtIndex:0];
UITabBarItem *secondTab = [tabBar.items objectAtIndex:1];
firstTab.image = [[UIImage imageNamed:@"icono1.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
firstTab.selectedImage = [[UIImage imageNamed:@"icono1.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
secondTab.image = [[UIImage imageNamed:@"icono2.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
secondTab.selectedImage = [[UIImage imageNamed:@"icono2.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
}
IOS 11 Swift 4ソリューションを探している場合は、appDelegateでこのようなことをしてください。これは、選択されていないものをすべて黒に変更しています。
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
UITabBar.appearance().unselectedItemTintColor = UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 1)
return true
}
(didFinishLaunchingWithOptions)と呼ばれるこのコードをappDelegate.mに配置するだけです。
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor whiteColor]}
forState:UIControlStateNormal];
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor orangeColor]}
forState:UIControlStateSelected];
[[UITabBar appearance] setTintColor:[UIColor whiteColor]]; // for unselected items that are gray
[[UITabBar appearance] setUnselectedItemTintColor:[UIColor whiteColor]];
あなたはすべてインターフェースビルダーを通してそれを行うことができ、この答えをチェックアウトし、アクティブと非アクティブの両方を行う方法を示します、 「ストーリーボードでタブバーアイテムの選択色を変更する」
[選択]タブバー項目の色を変更する最良の方法は、appdelegateに単一のコードを追加することですdidFinishLaunchingWithOptions method
UITabBar.appearance().tintColor = UIColor(red: 242/255.0, green: 32/255.0, blue: 80/255.0, alpha: 1.0)
選択したアイテムのテキストの色を変更します
Swift 3の場合:
// both have to declare in view hierarchy method
//(i.e: viewdidload, viewwillappear) according to your need.
//this one is, when tab bar is selected
self.tabBarItem.selectedImage = UIImage.init(named: "iOS")?.withRenderingMode(.alwaysOriginal)
// this one is when tab bar is not selected
self.tabBarItem.image = UIImage.init(named: "otp")?.withRenderingMode(.alwaysOriginal)