スポンサーサイト



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

UCCWとSwitchPro Widgetを組み合わせたスイッチのON/OFF画像切替について



UCCWとSwitchPro Widgetを組み合わせたスイッチのON/OFF画像切替についてです。

switch.png

詳細は「続きを読む」からどうぞ。





仕組みは単純です。
SwitchPro Widgetでトグルスイッチを作成します。
ON時には設定したスイッチ画像(ON)を表示。OFF時には非表示(完全透過)するよう設定しておきます。
次にUCCWでスイッチ画像(OFF)を配置したスキンを作成します。
後は作成したUCCWの上にSwitchPro Widgetのトグルスイッチを重ねるだけです。
スイッチONの状態では、SwitchPro Widgetが表示され、OFFの状態ではUCCWが表示されるといった具合です。

具体的な作成手順です。
まずSwitchPro Widgetでスイッチを作成しましょう。
ウィジェットを配置すると設定画面が表示されます。

switch2.png

Styleを「No Background」、Icon colorの「The transparency when disabled」透過バーを一番左にスライドします。
Indecator colorを「Not show」にしていったん終了です。

switch3.png

次にスイッチ画像を差し替えます。ドロワーからSwitchPro Widgetを起動して「Icon setteings」→
「Custom icons」を選択。

switch4.png switch5.png

使用する機能の画像を差し替えていきます。この時必ず"スイッチON"の状態の画像を選択するようにして下さい。
以上でSwitchPro Widgetの準備ができました。

次にUCCWですが特にこれといった設定はありません。
イメージオブジェクトを配置してスイッチOFFの画像を選択します。
SwitchPro Widgetを重ねた際、お互いのスイッチ画像もピッタリと重ねる必要がありますので、
実際にウィジェットを重ねてみて、UCCWでイメージのポジションを微調整していってください。

switch6.png

大まかな手順は以上となりますが3点注意があります。
1点目。ウィジェットを重ることが前提ですので、ホームアプリ(ADW EX、Apex(Pro)、Nova 等)が限定されます。
2点目はスイッチ画像の選定です。
OFF画像の上にON画像が重なるため、スイッチ画像の大きさはON≧OFFでないといけません。
(ON画像輪郭から一部でもはみ出すような画像をOFF画像に指定した場合、スイッチON時にOFF画像がはみ出して見えてしまうため)
どうしても使用した場合は、OFF画像を覆い隠せる程度の背景を含んだON画像を設定してください。
(エントリの掲載画像はそのように加工しています)

switch.png

3点目はSwitchPro Widgetで表示できる画像の大きさです。
1×1のアイコンサイズより二回りくらい小さいので、テキストが印字されているようなスイッチ画像を指定しても
ほとんど見えません。。ここは諦めて小さ目のスイッチを選定するようにしましょう。
関連記事
[ 2013/02/28 23:10 ] ホーム | TB(0) | CM(3)

いつも大変お世話になっております。

昔からホント参考にさせて戴いております。
今回のもわかりやすい解説で大変タメになります。
ところで、こちらのトグルアイコンは自作でしょうか?
配布場所などありましたら教えていただけると幸いですm(__)m
[ 2013/03/01 11:28 ] [ 編集 ]

Re: いつも大変お世話になっております。

こんばんは、いつもありがとうございます。

スイッチのアイコンはPSDの素材を多少加工して使用しています。
「PSD 素材」でググるとたくさんヒットしますよ。
PSDファイルはPhotoshopのファイル形式ですが、一応GIMP2など一部のフリーソフトでも読み込みが可能です。
(一部レイヤが欠落したり、正常に表示できないケースも多いですが・・・)

http://www.psdchest.com/
http://photoshopvip.net/archives/category/resource/resource-psd
[ 2013/03/01 19:45 ] [ 編集 ]

お返事

お返事ありがとうございます。
色々と探してみます♪
[ 2013/03/02 16:17 ] [ 編集 ]

コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://yukimushi119.blog136.fc2.com/tb.php/697-3ce7042b


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。