[Swift]UITabBarのアイコンを画像にする方法

SwiftでUITabBarのアイコンを画像にする方法を教えてください。

画像にする場合はタブバー全体を画像にするのでしょうか？
それとも、アイコン単体での指定は可能なのでしょうか？

また、Font AwesomeのようなWebフォントを指定することは可能なのでしょう？

ご教示頂けると光栄です。
よろしお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

画像にする場合はタブバー全体を画像にするのでしょうか？
それとも、アイコン単体での指定は可能なのでしょうか？

アイコン単体で画像の指定ができますよ

iOSのタブバーは、全体となるUITabBarというクラスとタブのアイテム単体となるUITabBarItemクラスを組み合わせて作ります

単体の画像をセットするときはUITabBarItemに画像をセットすることで実現できますよ
ただ注意点として画像は全部塗りつぶされて単色のシルエットのような形でセットされてしまいます

また、Font AwesomeのようなWebフォントを指定することは可能なのでしょう？

フォントの指定は可能なんですが、UITabBarItemのappearanceに設定することになるのでアプリ内で使う全てのUITabBarItemのフォントが同時に変わってしまいます

アプリの仕様的に1つのフォントで問題ないのであれば以下のようなコードで変えることが可能ですよ

lang
1let appearance = UITabBarItem.appearance()
2let attributes = [NSFontAttributeName:UIFont(name: "American Typewriter", size: 20)]
3appearance.setTitleTextAttributes(attributes, forState: .Normal)

投稿2015/07/16 13:00

__moai

総合スコア264

RioNishino

2015/07/17 01:30

回答ありがとうございます。おかげさまで解決できました。フォントの指定方法まで教えていただき感謝申し上げます。

行動規範の内容に同意します

swiftはよくわかりませんが、UITabBarControllerを初期化するあたりで、アイコンのセットを作成するのですが、そこで画像やフォントを指定してあげればOKなようです。
サンプルはObjecti-Cですが。

lang
1AppDelegate.m
2
3- (void)initRootController
4{
5  _rootController = [[UITabBarController alloc] init];
6
7  // タブの背景画像と選択時の背景画像を設定
8  [[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tab_bar_background.png"]];
9  [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tab_bar_selection_indicator.png"]];
10
11  // タブメニュー選択時のビュー生成
12  FirstViewController  *tabFirst  = [[FirstViewController alloc] init]
13  SecondViewController *tabSecond = [[SecondViewController alloc] init];
14  ThirdViewController  *tabThird  = [[ThirdViewController alloc] init];
15
16  [tabFirst.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_bar_icon1_o.png"]
17    withFinishedUnselectedImage:[UIImage imageNamed:@"tab_bar_icon1.png"]];
18  [tabSecond.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_bar_icon2_o.png"]
19    withFinishedUnselectedImage:[UIImage imageNamed:@"tab_bar_icon2.png"]];
20  [tabThird.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_bar_icon3_o.png"]
21    withFinishedUnselectedImage:[UIImage imageNamed:@"tab_bar_icon3.png"]];
22
23  // タブのタイトル指定
24  [tabFirst setTitle:@"First"];
25  [tabSecond setTitle:@"Second"];
26  [tabThird setTitle:@"Third"];
27
28  // タブのタイトル色指定
29  [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:0.733f green:0.733f blue:0.733f alpha:1.0f], UITextAttributeTextColor,nil] forState:UIControlStateNormal];
30
31  // タブのタイトル色指定 (選択中)
32  [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:0.886f green:0 blue:0.415f alpha:1.0f], UITextAttributeTextColor,nil] forState:UIControlStateSelected];
33
34  // ビューを Controllerに追加
35  NSArray *controllers = [NSArray arrayWithObjects:tabFirst, tabSecond, tabThird, nil];
36  [(UITabBarController *)_rootController setViewControllers:controllers animated:NO];
37
38  // windowに Controllerのビュー追加
39  [_window addSubview:_rootController.view];
40  [_window makeKeyAndVisible];
41
42}
43

画像のセットに関しては、
tabBarItemのsetFinishedSelectedImageでセットする画像に、レンダリングモードを指定してあげると、画像そのままか、アルファチャンネルを利用した単色のものかを選べるようです。

lang
1[UIImage imageNamed:@"tab_bar_icon1_o.png"]
2
3//これを下記のように書き換える
4[[UIImage imageNamed:@"tab_bar_icon1_o.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]

objective-cになりますが、下記サイトがわかりやすいです。
http://lab.dolice.net/blog/2013/12/30/objc-ios7-ui-tab-bar-custom/

UITabBarController, UITabBarItem, UITabBarItem apparanceあたりでググると幸せになれるかもしれません。

投稿2015/07/14 15:00