ピンストライプ

設定や連絡帳で見られる背景画像なのですが、特に目立つことのないストライプ画像が使われています。

オリジナル画像サイズ詳細

iOS4では14×2だったのですが、iOS5では1,024×１になりました。
上のオリジナル画像は、その特徴が分かる部分だけを抜き出し、拡大したものです。
実際の画像は、このパターンが横に繰り返されています。
そして、実際の表示では、その画像が縦に繰り返される訳です。

それにしても幅1,024ってことは、iOS5はiPadベースで考えているんでしょうかね・・・

参考にしてください。

テーマ構成ファイル一覧　＆　オリジナル画像

テーマ名/UIImages/
	UIPinstripe@2x.png （1×1,024）

＜注意＞
ここで紹介しているファイル名や画像サイズは、Retinaディスプレイ用です。
iOS4.xの時と違い、iOS5に対応したwinterboardでは「@2xファイル」と「@2xを省いたファイル」をセットで用意する必要がなくなりました。
参考までにこちらをご覧下さい。ーー＞　artworkファイルについて

ページトップへ

遊んでみた

困ったときのリンゴちゃんです。
さらに、掟破りのサイズオーバーです。
しかも、リンゴちゃんのオリジナルサイズです！

オリジナル画像をそのままぶち込みました。
この手の画像は中央部分を引き延ばす表示方法が多いのですが、「ストライプ」という名前だけの通り、画像を敷き詰める表示方法となっております。
「設定」でも確認できるのですが、私個人の設定画面も確認できてしまうため、連絡帳にある「アップルジャパン」の編集画面の画像を用意しました。
何か変ではないですか？

背景画像はきちんと敷き詰められています。
しかし、連絡先の項目の横にも同じ画像を敷き詰めようとするので、こんな表示になってしまうのです。
上下に移動させると、一緒に移動するので、画像を作成するなら、横方向のみの変化にし、縦方向は変化しない画像にするべきだと思います。

今回のテストテーマをこちらで配布しています。
boke_pinstripeのダウンロード

ページトップへ

2012/01/07

遊んでみた２

iOS5から画像が変更されています。
横幅1,024になったのですが、この1,024pxは、iPhone4の横幅ではなく、iPadの横幅なんですね。
では、iPad向けの画像をiPhone4で表示した場合、どのように表示されるかを調べるために以下のような画像で遊んでみました。

黒色の単色背景に、幅10pxの線を２本入れたものです。
そのうちの１本は画像中央である512pxの位置に、もう１本はiPhone4の横幅である960pxの位置に入れました。