【iOS】Tabbar メニューの画像のサイズや解像度に関して


Objc

先月から開発に着手したiPhoneアプリですが、なかなか時間をがっつりとる事ができず未だAppStoreへ申請できていなくてくやしい!(*_*;
ちなみに今回タブバーメニューを初めて入れてみたのですが、メニューに表示されるアイコンに関してサイズや解像度はどうすればよかったのか最初わからなかったのでエントリです。

今回の話は後輩の@wi__iw氏が全部知ってて教えてくれました。感謝です。


タブバーアイテムのサイズ

まず、ネットでタブバーのアイコンにすぐ使えそうな素材がたくさん配布されているので落としてみたのですが64pxとか32pxとかのサイズのものが多かったので、32pxの幅なのかと勘違いしていました。
なので、Xcode等で32pxの画像を指定したところ、どうも表示してみるとアイコンが大きく表示されて
「あれ、このアイコン周りの余白が小さいやつだ。編集ソフトで小さくしないといけないのかー」
とか盛大に勘違いしていました

タブバーアイテムは 30px × 30px で用意するんだそうです。 けど、意外とネットで調べてものってない気がするんですけども。。


BeautifulSushi Main storyboard

Retina用解像度と2種類用意します

通常解像度は30ですが、もちろん出回ってる端末はほぼRetina解像度ですので倍のサイズも用意します。
このあたりはxcassetsなどの話になるので、既にご存知の人もいるかもしれませんが逆に今回はじめて知ったのは、xcasstesを使わなくても Supporting Files内に @2x.png を放り込めばRetina対応してくれるらしいww

iOS5か6(忘れた)以降は、Xcodeのimage.xcassetsの中に2つの解像度の画像を登録して複数解像度Imageを管理するものだとばかり思っていました。 (というかそれが本流な気もするのですが)。 しかし今回SupportingFilesの中に@2.pngを放り込んでおけば自動で使い分けてくれるという事をしりました。
これも@wi__iw氏が教えてくれた(*´ω`*)

これだと開発途中で「まぁとりあえずこの魚の画像を仮で置いておこう!」みたいな時に捗る!
とくに今回tabbar itemを4個使うので、使うかどうかよく分からない画像を全部image.xcassetsに突っ込むのが面倒。


BeautifulSushi Images xcassets

まとめ

タブバーメニューの画像は、基本 30×30

Retina解像度も含めて、30×30と60×60 の2種類用意する

image.xcassets使わなくても、hoge@2.pngのファイルもsupporting filesに入れておくとよしなにやってくれる

最近メッキメキとお寿司に関して詳しくなってきております。
いまのマイブームは小鰭です(・∀・)♪

おわり

2014-07-28 | Posted in Objective-CNo Comments » 


関連記事

Comment





Comment



*