ピッカービュー

個人的にはiPhoneのユーザーインターフェースの中でも、「これぞiPhone!」と思えるデザインに仕上がっているのが、このピッカービューです。
ただ、正式に「ピッカービュー」と呼ぶのかどうか分かりません。

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

上段にあるフレーム画像ですが、濃い背景色で紹介しています。
下段は、通常の薄い背景色で紹介しています。


参考にしてください。

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

テーマ名/UIImages/
UIPickerViewBackground-162@2x.png

(2×324)


UIPickerViewBackground-180@2x.png

(2×360)


UIPickerViewBackground@2x.png

(2×432)


UIPickerViewFrameLeft-162-Bar@2x.png

(30×324)


UIPickerViewFrameLeft-162@2x.png

(30×324)


UIPickerViewFrameLeft-180-Bar@2x.png

(30×360)


UIPickerViewFrameLeft-180@2x.png

(30×360)


UIPickerViewFrameLeft-Bar@2x.png

フレーム左側(30×432)


UIPickerViewFrameLeft@2x.png

(30×432)


UIPickerViewFrameMiddle-162@2x.png

(2×324)


UIPickerViewFrameMiddle-180@2x.png

(2×360)


UIPickerViewFrameMiddle@2x.png

フレーム中央(2×432)


UIPickerViewFrameRight-162-Bar@2x.png

(30×324)


UIPickerViewFrameRight-162@2x.png

(30×324)


UIPickerViewFrameRight-180-Bar@2x.png

(30×360)


UIPickerViewFrameRight-180@2x.png

(30×360)


UIPickerViewFrameRight-Bar@2x.png

フレーム右側(30×432)


UIPickerViewFrameRight@2x.png

(30×432)


UIPickerViewSelectionBar@2x.png

選択部のホイール部分(18×88)


UIPickerViewSelectionBarAboveDivider@2x.png

選択部のホイール横の画像(2×96)


UIPickerViewSelectionBarAboveWheel@2x.png

選択部全体を覆う画像(2×124)


UIPickerViewShadowsAboveWheel-162@2x.png

(2×324)


UIPickerViewShadowsAboveWheel-180@2x.png

(2×360)


UIPickerViewShadowsAboveWheel@2x.png

ホイール全体を覆う影画像(2×432)


UIPickerViewWheelBackground-162@2x.png

(18×324)


UIPickerViewWheelBackground-180@2x.png

(18×360)


UIPickerViewWheelBackground@2x.png

ホイールの背景画像(18×432)


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

ページトップへ

作ってみた

オリジナル画像のカラーバリエーションを増やしてみました。

<注意>
作った画像は、Retina用の画像のみです。
そのままwinterboardで適用できるファイル構成にはしていますが、Retinaディスプレイではないデバイスで適用するときは、リサイズして下さい。


boke_brown_pickerview.zipのダウンロード


boke_green_pickerview.zipのダウンロード


boke_lightblue_pickerview.zipのダウンロード


boke_orange_pickerview.zipのダウンロード


boke_pink_pickerview.zipのダウンロード


boke_red_pickerview.zipのダウンロード


boke_violet_signal.zipのダウンロード


boke_yellow_pickerview.zipのダウンロード


ページトップへ

2012/01/22