コールアウト

メモでも、Safariでサイト閲覧時でも、文字列を選択した時に出現するメニューです。
その時に有効なメニューが表示されます。

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

コールアウト特有かと思いますが、シャドウ部分のみの画像が存在します。
吹き出し部分を移動させるためでしょうね。


参考にしてください。

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

テーマ名/UIImages/
UICalloutBarArrowBottom@2x.png

(48×34)


UICalloutBarArrowBottomHi@2x.png

(48×34)


UICalloutBarArrowLeft@2x.png

(52×76)


UICalloutBarArrowLeftHi@2x.png

(52×76)


UICalloutBarArrowRight@2x.png

(52×76)


UICalloutBarArrowRightHi@2x.png

(52×76)


UICalloutBarArrowSingleLeft@2x.png

(94×76)


UICalloutBarArrowSingleLeftHi@2x.png

(94×76)


UICalloutBarArrowSingleRight@2x.png

(94×76)


UICalloutBarArrowSingleRightHi@2x.png

(94×76)


UICalloutBarArrowTop@2x.png

(48×24)


UICalloutBarArrowTopHi@2x.png

(48×24)


UICalloutBarBIU@2x.png

(60×28)


UICalloutBarCut@2x.png

(4×76)


UICalloutBarLeft@2x.png

(42×76)


UICalloutBarLeftHi@2x.png

(42×76)


UICalloutBarMiddle@2x.png

(2×76)


UICalloutBarMiddleHi@2x.png

(2×76)


UICalloutBarNextArrow@2x.png

(26×28)


UICalloutBarPreviousArrow@2x.png

(26×28)


UICalloutBarRight@2x.png

(42×76)


UICalloutBarRightHi@2x.png

(42×76)


UICalloutBarShadowLeft@2x.png

(22×34)


UICalloutBarShadowMiddle@2x.png

(2×34)


UICalloutBarShadowRight@2x.png

(22×34)


UICalloutBarSingle@2x.png

(46×76)


UICalloutBarSingleHi@2x.png

(46×76)


UICalloutBarSingleMatte@2x.png

(46×76)


UICalloutBarTextLtoR@2x.png

(48×44)


UICalloutBarTextRtoL@2x.png

(48×44)


UICalloutViewBackground@2x.png

(2×114)


UICalloutViewBottomAnchor@2x.png

(82×140)


UICalloutViewLeftCap@2x.png

(34×114)


UICalloutViewRightCap@2x.png

(34×114)


UICalloutViewTopAnchor@2x.png

(82×140)


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

ページトップへ

作ってみた

基本色が「黒」のコールアウトですので、オリジナルデザインをそのままに、カラーバリエーションを増やしてみました。
<注意>
作った画像は、Retina用の画像のみで、iPhone4からの転載です。
そのままwinterboardで適用できるファイル構成にはしていますが、Retinaディスプレイではないデバイスで適用するときは、リサイズして下さい。
コールアウトタップ時の青色画像は触っていません。


boke_blue_callout.zipのダウンロード



boke_brown_callout.zipのダウンロード



boke_green_callout.zipのダウンロード



boke_lightblue_callout.zipのダウンロード



boke_orange_callout.zipのダウンロード



boke_pink_callout.zipのダウンロード



boke_red_callout.zipのダウンロード



boke_violet_signal.zipのダウンロード



boke_yellow_callout.zipのダウンロード


ページトップへ

2012/01/21