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>

2 件のコメント:

  1. このXMLをレイアウトのXMLに如何書くのかを知りたいです。

    返信削除
  2. お返事が遅くなりました。
    ご質問頂きありがとうございました。

    以下の記事を参考にすると分かりやすいと思います。
    http://blog.livedoor.jp/tattyamm/archives/3109733.html

    drawableフォルダの下にcustom_switch.xmlなどと作成して上記のXMLを記述してください。
    あとカスタマイズしたいToggleButtonの背景に指定してください。

    OnとOffのテキスト表示を半角スペースにするか、@null(未検証)で消してください。
    代わりに画像を使いますので。
    ご不明な点があれば気軽に質問してください。

    返信削除