たじぶろ: switch

2012年6月12日火曜日

AndroidのToggleButtonをiPhoneのスイッチ風に本気でカスタマイズする（XML編）

カスタマイズした結果は以前示した通りです。
かなりiPhoneに近くなりました。

実際に用いたXMLを以下に示す。
ON・OFFの画像は私の作品ではないので著作権の問題を考慮し、
公開しません。ご自分で用意してください。

なにかツッコミ、質問がありましたらよろしくお願いします。

--------------以下XML----------------
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false"><layer-list>
            <item><shape>
                    <size android:height="27dp" android:width="80dp" />
                    <corners android:radius="25dp" />
                    <solid android:color="#dcdcdc" />
                    <stroke android:width="1dip" android:color="#808080" />
                </shape></item>
            <item android:bottom="1.5dp" android:left="5dp" android:right="8dp" android:top="13dp"><shape>
                    <corners android:radius="15dp" />
                    <gradient android:angle="270" android:centerColor="#ededed" android:centerX="0.5" android:centerY="0.5" android:endColor="#ededed" android:gradientRadius="10" android:startColor="#ededed" android:type="linear" />
                </shape></item>
            <item android:right="52dp"><shape>
                    <size android:height="27dp" android:width="28dp" />
                    <corners android:radius="25dp" />
                    <solid android:color="#ffffff" />
                    <gradient android:angle="270" android:centerColor="#dcdcdf" android:centerX="0.5" android:centerY="0.3" android:endColor="#ffffff" android:gradientRadius="10" android:startColor="#dcdcdc" android:type="linear" />
                    <stroke android:width="1dip" android:color="#808080" />
                </shape></item>
            <item android:left="27dp"><bitmap android:gravity="center" android:src="@drawable/off" />
            </item>
        </layer-list></item>
    <item android:state_checked="true"><layer-list>
            <item><shape>
                    <size android:height="27dp" android:width="80dp" />
                    <corners android:radius="25dp" />
                    <solid android:color="#0099ff" />
                    <stroke android:width="1dip" android:color="#808080" />
                </shape></item>
            <item android:bottom="1.5dp" android:left="8dp" android:right="5dp" android:top="13dp"><shape>
                    <corners android:radius="15dp" />
                    <gradient android:angle="270" android:centerColor="#33aaff" android:centerX="0.5" android:centerY="0.5" android:endColor="#33aaff" android:gradientRadius="10" android:startColor="#33aaff" android:type="linear" />
                </shape></item>
            <item android:left="52dp"><shape>
                    <size android:height="27dp" android:width="28dp" />
                    <solid android:color="#ffffff" />
                    <gradient android:angle="270" android:centerColor="#dcdcdf" android:centerX="0.5" android:centerY="0.3" android:endColor="#ffffff" android:gradientRadius="10" android:startColor="#dcdcdc" android:type="linear" />
                    <corners android:radius="25dp" />
                    <stroke android:width="1dip" android:color="#808080" />
                </shape></item>
            <item android:right="27dp"><bitmap android:gravity="center" android:src="@drawable/on" />
            </item>
        </layer-list></item>
</selector>

2012年4月16日月曜日

AndroidでiPhone風のスイッチを作る

普通のAndroidのToggleButtonを使ってもつまらないですね！

デザインならiPhoneが今のところ一番だと考えます。

なるべく近づけてみましょう。

論より証拠ということで以下のコードを参考にしてみてください。

←普通のToggleButton

←これがカスタマイズした後のToggleButton

手順は以下の通りです。

１、以下のコードをres/drawable/customtoggle.xmlとでもして保存して下さい。

２、backgroundプロパティに指定して下さい。
３、on textとoff textにそれぞれ半角スペースを指定して下さい。

<?xml version="1.0" encoding="utf-8"?>

<layer-list>

<item>

<shape>

</shape>

</item>

<shape>

</shape>

</item>

</item>

</layer-list>

</item>

<layer-list>

<item>

<shape>

</shape>

</item>

<shape>

</shape>

</item>

</item>

</layer-list>

</item>

</selector>