質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 6,045

score 54

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

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

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

ご教示頂けると光栄です。
よろしお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

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

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/17 10:30

    回答ありがとうございます。
    おかげさまで解決できました。

    フォントの指定方法まで教えていただき感謝申し上げます。

    キャンセル

0

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

AppDelegate.m

- (void)initRootController
{
  _rootController = [[UITabBarController alloc] init];

  // タブの背景画像と選択時の背景画像を設定
  [[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tab_bar_background.png"]];
  [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tab_bar_selection_indicator.png"]];

  // タブメニュー選択時のビュー生成
  FirstViewController  *tabFirst  = [[FirstViewController alloc] init]
  SecondViewController *tabSecond = [[SecondViewController alloc] init];
  ThirdViewController  *tabThird  = [[ThirdViewController alloc] init];

  [tabFirst.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_bar_icon1_o.png"]
    withFinishedUnselectedImage:[UIImage imageNamed:@"tab_bar_icon1.png"]];
  [tabSecond.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_bar_icon2_o.png"]
    withFinishedUnselectedImage:[UIImage imageNamed:@"tab_bar_icon2.png"]];
  [tabThird.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_bar_icon3_o.png"]
    withFinishedUnselectedImage:[UIImage imageNamed:@"tab_bar_icon3.png"]];

  // タブのタイトル指定
  [tabFirst setTitle:@"First"];
  [tabSecond setTitle:@"Second"];
  [tabThird setTitle:@"Third"];

  // タブのタイトル色指定
  [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:0.733f green:0.733f blue:0.733f alpha:1.0f], UITextAttributeTextColor,nil] forState:UIControlStateNormal];

  // タブのタイトル色指定 (選択中)
  [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:0.886f green:0 blue:0.415f alpha:1.0f], UITextAttributeTextColor,nil] forState:UIControlStateSelected];

  // ビューを Controllerに追加
  NSArray *controllers = [NSArray arrayWithObjects:tabFirst, tabSecond, tabThird, nil];
  [(UITabBarController *)_rootController setViewControllers:controllers animated:NO];

  // windowに Controllerのビュー追加
  [_window addSubview:_rootController.view];
  [_window makeKeyAndVisible];

}

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

[UIImage imageNamed:@"tab_bar_icon1_o.png"]

//これを下記のように書き換える
[[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/17 10:34

    回答ありがとうございます。
    ご丁寧にソースまで載せていただいて感謝いたします。

    私はまだまだ初心者なので、Objective-Cが全く分かりません。
    しかし似ている箇所や、Swiftに置き換えて参考にさせていただきます。

    色々とご教示いただいて、本当に有難うございます。

    キャンセル

  • 2015/07/17 10:46

    タブアイテムのフォントは、tabBarItemのcustomAppearanceで個別に設定できます。
    ここ(http://qiita.com/yimajo/items/a7ed557d382077498181)が参考になるかと思います。
    カスタムフォントの導入はここ(http://www.sirochro.com/note/objc-using-custom-font/)で丁寧に解説されているので、参考にしてみてください。
    Objectvie-CとSwiftは比較的簡単に読み替えできると思うので、参考にしてください

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る