2012年4月16日月曜日

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

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

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

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

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

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

手順は以下の通りです。
1、以下のコードをres/drawable/customtoggle.xmlとでもして保存して下さい。
2、backgroundプロパティに指定して下さい。
3、on textとoff textにそれぞれ半角スペースを指定して下さい。


<?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="60dp" />

                    <gradient android:angle="270" android:centerColor="#c0c0c0" android:centerX="0.5" android:centerY="0.5" android:endColor="#c0c0c0" android:gradientRadius="10" android:startColor="#c0c0c0" android:type="linear" />

                    <corners android:radius="8dp" />

                    <solid android:color="#c0c0c0" />

                    <stroke android:width="1dip" android:color="#808080" />
                </shape>
            </item>
            <item android:left="30dp">
                <shape>
                    <size android:height="27dp" android:width="30dp" />
                    <corners android:radius="8dp" />
<gradient android:angle="270" android:centerColor="#B0C4DE" android:centerX="0.5" android:centerY="0.5" android:endColor="#778899" android:gradientRadius="10" android:startColor="#ADD8E6" android:type="linear" />


                    <stroke android:width="1dip" android:color="#808080" />
                </shape>
            </item>
            <item android:left="-30dp">
                <bitmap android:src="@drawable/off" android:gravity="center" />
            </item>
        </layer-list>
    </item>
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape>
                    <size android:height="27dp" android:width="60dp" />

                    <corners android:radius="8dp" />

                    <solid android:color="#ffffff" />

                    <stroke android:width="1dip" android:color="#808080" />
                </shape>
            </item>
            <item android:right="30dp">
                <shape>
                    <size android:height="27dp" android:width="30dp" />
<gradient android:angle="270" android:centerColor="#B0C4DE" android:centerX="0.5" android:centerY="0.5" android:endColor="#778899" android:gradientRadius="10" android:startColor="#ADD8E6" android:type="linear" />
                    <corners android:radius="8dp" />

                    <stroke android:width="1dip" android:color="#808080" />
                </shape>
            </item>
            <item android:right="-29dp">
                <bitmap android:src="@drawable/on" android:gravity="center" />
            </item>
        </layer-list>
    </item>

</selector>

0 件のコメント:

コメントを投稿