2012/03/26 更新
2012/06/22 たくさん見て頂いているページなのに冒頭文章がぐちゃぐちゃだったので修正...恥ずかしい。文字の体裁を整えました
2012/10/19 更新
iPhone5、iPodTouch第5世代の解像度対応も記述しました。
こんにちわわん。ぴぃ~です。
iPad3 新しいiPadがでたことで
iOS端末の基本画像のサイズが多くなったため忘れっぽくてしょうがないのと
お気に入りに入れてたサイトのページが消えちゃったため
しょうがない、備忘録として書いちゃいますだ。
これらの内容は全て公式ドキュメントの
『iPhoneヒューマンインターフェイスガイドライン』に記述されています。
『iOS Human Interface Guidelines』および
『iOS App Programming Guide』
に記述されています。
リンク - 日本語ドキュメント - Apple Developer
※日本語は大抵古いので日本語ドキュメント下の英語ドキュメントを読んだほうが良いです
日本語版にも記述されてありました。
できればそちらも合わせて読んで頂いた方が良いかと。
4インチ端末に関する記述は2012/10/19現在日本語ドキュメントに記述されていませんでした。
4インチ端末の画像に関しては
[email protected]
のように記述してね。とガイドラインでは決まっているのですが、
これを
// 画像ファイルをベース名ででパス指定
NSString* path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"xxxx.png"];
// UIImageとして読み込み
UIImage* img = [UIImage imageWithContentsOfFile:path];
とかやっても4インチ端末では
[email protected]
を読み込んでくれません。
残念ながら
[email protected]
を読み込みます。
「んじゃどうすんのさ」って言われたら何が正解か不明ですけれどいろんな所で記述されている
// 引数でファイル名、拡張子をもらった事にする
NSString* modFileName = @"";
NSString* fileName = @"xxxx";
NSString* fileType = @"png";
// 画面の縦をチェックして568.0なら4インチ端末という
if ([UIScreen mainScreen].bounds.size.height==568.0) {
fileName = [fileName stringByAppendingString:@"-568h"];
}
modFileName = [NSString stringWithFormat:@"%@.%@",fileName,fileType];
// 変換したファイル名を返してあげる
return modFileName;
とかのメソッドを作ってあげるのが今の所良いんじゃないでしょうか?
ファイル名指定する時に必ずこれを通してあげればとりあえず対応できるかも。
プログラムはいいけど問題はInterfaceBuilderですよ!
3.5インチまでと4インチまでのViewかxibを作ってあげないと対応できないですわ。
「そんな面倒な事しなくてもいけるよっ!」っていう情報を知っている人がいたら教えて頂きたいです。
あわせてこちらの記事もどうぞ
iPhone5、iPodTouch第5世代の解像度にアプリ対応する方法
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
~~~ 画像種類別 ~~~
・アプリケーションアイコン(横*縦)[ファイル名]
iPhone:57 * 57px[Icon.png]
iPhone(Retina):114 * 114px[[email protected]]
iPad:72 * 72px[Icon-72.png]
iPad(Retina):144 * 144px[[email protected]]
・小さいアイコン(Spotlight/『設定』内アイコン)(横*縦)[ファイル名]
iPhone:29 * 29px[Icon-Small.png]
iPhone(Retina):58 * 58px[[email protected]]
iPad:50 * 50px[Icon-Small-50.png]
iPad(Retina):100 * 100px[[email protected]]
※画像がない場合はアイコンがそのまま縮小されて表示される
※見た目が違わないのならほぼ不要
・起動画像(横*縦)(縦向き)[ファイル名]
iPhone:320 * 480px[Default.png]
iPhone(Retina):640 * 960px[[email protected]]
iPad:768 * 1004px[Default-Portrait.png]
iPad:1024 * 748px[Default-Landscape.png]
iPad(Retina):1536 * 2008px[[email protected]]
iPad(Retina):2048 * 1496px[[email protected]]
~~~ 機種別 ~~~
○iPhone
57 * 57px[Icon.png]
29 * 29px[Icon-Small.png]
320 * 480px[Default.png]
○iPhone(Retina)
114 * 114px[[email protected]]
58 * 58px[[email protected]]
640 * 960px[[email protected]]
640 * 1136px[[email protected]]
○iPad
72 * 72px[Icon-72.png]
50 * 50px[Icon-Small-50.png]
768 * 1004px[Default-Portrait.png]
1024 * 748px[Default-Landscape.png]
○iPad(Retina)
144 * 144px[[email protected]]
100 * 100px[[email protected]]
1536 * 2008px[[email protected]]
2048 * 1496px[[email protected]]
~~~おまけ~~~
・iTunesArtwork
全端末:512 * 512px[iTunesArtwrok(拡張子なし)]
※全ての端末で共通
※pngで画像をつくって『拡張子』を取っ払うとできあがり
※アドホック配布用(と思っている
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
これらをつくるのが大変。。。
ベクター形式で画像を保存しとかないと労力が半端ないです。
いや。すでに画像数的に労力が半端ないです。
アプリ内の画像は基本的に全部対応した方が見た目はいいので
上記ファイル以外の画像も作らないといけないですし・・。
たまに高解像度画像を入れ忘れてそこだけ『ボヤん』として見えたり・・。
テストしてる人は気づかなかったり・・。
Androidはより複雑でアスペクト比がバラバラになっており
画像だけではなくソースにも手を入れないといけないのでしんどいですや。
ちなみにそっちはこちらで書いていますので是非ご参考に。
以上、ちゃんおつです!!
・・本家サイトカジノバもよろしくです。
2012/06/22 たくさん見て頂いているページなのに冒頭文章がぐちゃぐちゃだったので修正...恥ずかしい。文字の体裁を整えました
2012/10/19 更新
iPhone5、iPodTouch第5世代の解像度対応も記述しました。
こんにちわわん。ぴぃ~です。
iOS端末の基本画像のサイズが多くなったため忘れっぽくてしょうがないのと
お気に入りに入れてたサイトのページが消えちゃったため
しょうがない、備忘録として書いちゃいますだ。
これらの内容は全て公式ドキュメントの
『iOS Human Interface Guidelines』および
『iOS App Programming Guide』
に記述されています。
リンク - 日本語ドキュメント - Apple Developer
※日本語は大抵古いので日本語ドキュメント下の英語ドキュメントを読んだほうが良いです
できればそちらも合わせて読んで頂いた方が良いかと。
4インチ端末に関する記述は2012/10/19現在日本語ドキュメントに記述されていませんでした。
4インチ端末の画像に関しては
[email protected]
のように記述してね。とガイドラインでは決まっているのですが、
これを
// 画像ファイルをベース名ででパス指定
NSString* path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"xxxx.png"];
// UIImageとして読み込み
UIImage* img = [UIImage imageWithContentsOfFile:path];
とかやっても4インチ端末では
[email protected]
を読み込んでくれません。
残念ながら
[email protected]
を読み込みます。
「んじゃどうすんのさ」って言われたら何が正解か不明ですけれどいろんな所で記述されている
// 引数でファイル名、拡張子をもらった事にする
NSString* modFileName = @"";
NSString* fileName = @"xxxx";
NSString* fileType = @"png";
// 画面の縦をチェックして568.0なら4インチ端末という
if ([UIScreen mainScreen].bounds.size.height==568.0) {
fileName = [fileName stringByAppendingString:@"-568h"];
}
modFileName = [NSString stringWithFormat:@"%@.%@",fileName,fileType];
// 変換したファイル名を返してあげる
return modFileName;
とかのメソッドを作ってあげるのが今の所良いんじゃないでしょうか?
ファイル名指定する時に必ずこれを通してあげればとりあえず対応できるかも。
プログラムはいいけど問題はInterfaceBuilderですよ!
3.5インチまでと4インチまでのViewかxibを作ってあげないと対応できないですわ。
「そんな面倒な事しなくてもいけるよっ!」っていう情報を知っている人がいたら教えて頂きたいです。
あわせてこちらの記事もどうぞ
iPhone5、iPodTouch第5世代の解像度にアプリ対応する方法
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
~~~ 画像種類別 ~~~
・アプリケーションアイコン(横*縦)[ファイル名]
iPhone:57 * 57px[Icon.png]
iPhone(Retina):114 * 114px[[email protected]]
iPad:72 * 72px[Icon-72.png]
iPad(Retina):144 * 144px[[email protected]]
・小さいアイコン(Spotlight/『設定』内アイコン)(横*縦)[ファイル名]
iPhone:29 * 29px[Icon-Small.png]
iPhone(Retina):58 * 58px[[email protected]]
iPad:50 * 50px[Icon-Small-50.png]
iPad(Retina):100 * 100px[[email protected]]
※画像がない場合はアイコンがそのまま縮小されて表示される
※見た目が違わないのならほぼ不要
・起動画像(横*縦)(縦向き)[ファイル名]
iPhone:320 * 480px[Default.png]
iPhone(Retina):640 * 960px[[email protected]]
iPad:768 * 1004px[Default-Portrait.png]
iPad:1024 * 748px[Default-Landscape.png]
iPad(Retina):1536 * 2008px[[email protected]]
iPad(Retina):2048 * 1496px[[email protected]]
~~~ 機種別 ~~~
○iPhone
57 * 57px[Icon.png]
29 * 29px[Icon-Small.png]
320 * 480px[Default.png]
○iPhone(Retina)
114 * 114px[[email protected]]
58 * 58px[[email protected]]
640 * 960px[[email protected]]
640 * 1136px[[email protected]]
○iPad
72 * 72px[Icon-72.png]
50 * 50px[Icon-Small-50.png]
768 * 1004px[Default-Portrait.png]
1024 * 748px[Default-Landscape.png]
○iPad(Retina)
144 * 144px[[email protected]]
100 * 100px[[email protected]]
1536 * 2008px[[email protected]]
2048 * 1496px[[email protected]]
~~~おまけ~~~
・iTunesArtwork
全端末:512 * 512px[iTunesArtwrok(拡張子なし)]
※全ての端末で共通
※pngで画像をつくって『拡張子』を取っ払うとできあがり
※アドホック配布用(と思っている
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
これらをつくるのが大変。。。
ベクター形式で画像を保存しとかないと労力が半端ないです。
いや。すでに画像数的に労力が半端ないです。
アプリ内の画像は基本的に全部対応した方が見た目はいいので
上記ファイル以外の画像も作らないといけないですし・・。
たまに高解像度画像を入れ忘れてそこだけ『ボヤん』として見えたり・・。
テストしてる人は気づかなかったり・・。
Androidはより複雑でアスペクト比がバラバラになっており
画像だけではなくソースにも手を入れないといけないのでしんどいですや。
ちなみにそっちはこちらで書いていますので是非ご参考に。
以上、ちゃんおつです!!
・・本家サイトカジノバもよろしくです。