スイッチ
iPhoneの設定でよく見かけるスイッチです。
オン・オフを切り替えるスイッチなのですが、アップルらしいデザインに仕上がっていると思います。
オリジナル画像サイズ詳細
iOS4.xにあった画像も残っているため、ここにも載せておきました。
iOS5のファイルでは、マスクが追加されているので、元画像＋マスクによって丸く見せているのかもしれません。
参考にしてください。
テーマ構成ファイル一覧 ＆ オリジナル画像
| テーマ名/UIImages/ | ||
|
UISwitchButtonFullShadowed@2x.png （34×54） |
 |
|
|
UISwitchButtonFullShadowedDown@2x.png （34×54） |
 |
|
|
UISwitchButtonLeftShadowed@2x.png （34×54） |
 |
|
|
UISwitchButtonLeftShadowedDown@2x.png （34×54） |
 |
|
|
UISwitchButtonOff@2x.png （28×32） |
 |
|
|
UISwitchButtonOn@2x.png （4×32） |
 |
|
|
UISwitchButtonRightShadowed@2x.png （34×54） |
 |
|
|
UISwitchButtonRightShadowedDown@2x.png （34×54） |
 |
|
|
UISwitchLeftCapOrange@2x.png （10×54） |
 |
|
|
UISwitchOnColorMask@2x.png （158×54） |
 |
|
|
UISwitchShapeMask@2x.png （158×54） |
 |
|
|
UISwitchShapeShadow@2x.png （158×54） |
 |
|
|
UISwitchThumb@2x.png （58×54） |
 |
|
|
UISwitchThumbPressed@2x.png （58×54） |
 |
|
|
UISwitchTrackBlue@2x.png （22×54） |
 |
|
|
UISwitchTrackClear@2x.png （22×54） |
 |
|
|
UISwitchTrackCustomEffects@2x.png （22×54） |
 |
|
|
UISwitchTrackCustomMask@2x.png （22×54） |
 |
|
|
UISwitchTrackOrange@2x.png （22×54） |
 |
|
＜注意＞
ここで紹介しているファイル名や画像サイズは、Retinaディスプレイ用です。
iOS4.xの時と違い、iOS5に対応したwinterboardでは「@2xファイル」と「@2xを省いたファイル」をセットで用意する必要がなくなりました。
参考までにこちらをご覧下さい。ーー＞ artworkファイルについて
遊んでみた
上にも書きましたが、iOS5のスイッチ画像は、丸いスイッチ画像に変更されているのではなく、iOS4のスイッチ画像群にマスクなどの画像がいくつか追加されています。
ここで１つ仮説を立てました。
iOS5のスイッチは、マスクで丸く見せているだけ
という訳で、マスクを１つ１つ変更し、その挙動を確認してみましょう。
UISwitchThumb@2x.pngを変更する
 |
スイッチャーのオリジナルサウンドノブ転用画像 （58×54） |
 |
 |
鉄板入れ替えをしてみました。
鉄板だけあって、確実に入れ替わりましたね。
このサンプルテーマのダウンロードはこちらーー＞boke_switch_thumb.zip
UISwitchTrackBlue@2x.pngを変更する
 |
色を変えたオリジナル画像（青ー＞緑） （22×54） |
 |
 |
オン時の色は、この青色かと思ったので緑色で試してみたのですが、関係なかったようです。
この画像をマスクして丸くしていると思ったのですが、仮説が間違っているみたいですね。
UISwitchOnColorMask@2x.pngを変更する
 |
透過率50％のオリジナル画像 （158×54） |
 |
 |
 |
色をつけたオリジナルマスク （158×54） |
 |
 |
 |
上記テスト画像の2/3サイズ（上付き） （158×54） |
 |
 |
 |
上記テスト画像の2/3サイズ（下付き） （158×54） |
 |
 |
 |
オリジナルサイズいっぱいの三角画像 （158×54） |
 |
 |
色を付けてもマスクはマスクなので、色は関係ないですね。
マスクとしては上下反転して機能することが分かりました。
UISwitchShapeMask@2x.pngを変更する
 |
オリジナルサイズいっぱいの真っ黒画像 （158×54） |
 |
 |
 |
色をつけたオリジナルマスク （158×54） |
 |
 |
 |
オリジナルサイズいっぱいの何もない画像 （158×54） |
 |
 |
 |
オリジナルサイズいっぱいの三角画像（赤） （158×54） |
 |
 |
 |
オリジナルサイズいっぱいの三角画像（緑） （158×54） |
 |
 |
スイッチの輪郭を司るマスクのようですね。
色を付けたマスクは、今後メインで使いそうな感じです。
色付き三角画像で面白い結果が出ていますね。
上下反転してマスクが機能することはiPhone全体で言えそうですが、オフ時の背景ではそのまま使われ、マスクされているという状態です。
いろいろやってみているのですが、確認に時間がかかりそうです。
どうやら仮説は間違っているようです。
テーマ以外に脱獄アプリなどの更新やウィジェットを作っているので、
このスイッチの挙動確認は、気長にやっていこうと思います。
オリジナルの半分ではどうか？
倍のサイズは必要か？
角ばったスイッチ
