【Android】XMLでボタンを書く

今回はAndroid編です。
Androidの解説は順番が難しいですねぇ。
プログラムの解説は多々あるので、今回はビューの解説です。

XMLでボタンを描画するのと画像を用意するのでは何が違うか
1.軽い
2.手間が掛からない。
3.他言語対応がしやすい

などのメリットばかりなXMLですが、知識が無いと難しい。
今回は簡単なボタンから解説します。

まず、ボタンを作成するには
1.on状態のXML
2.off状態のXML
3.onとoffにどちらのXMLを描画するかを決めるXML
の3つが必要になります。

まずon状態のXMLを書きましょう。
btn_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
>
    <!-- 角を丸める -->
    <corners
        android:radius="5dip" />
    <!-- グラデーション -->
    <gradient
        android:angle="270"
        android:startColor="@color/cornflowerblue"
        android:endColor="@color/royalblue"/>
    <!-- パディング -->
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />
    <!-- 枠線 -->
    <stroke
        android:width="2px"
        android:color="@color/black" />
</shape>

次にoff状態のXMLを作成します。
btn_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
>
    <!-- 角を丸める -->
    <corners
        android:radius="5dip" />
    <!-- グラデーション -->
    <gradient
        android:angle="270"
        android:startColor="@color/royalblue"
        android:endColor="@color/cornflowerblue"/>
    <!-- パディング -->
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />
    <!-- 枠線 -->
    <stroke
        android:width="2px"
        android:color="@color/black" />
</shape>

onとoffの違いは分かりますか？
グラデーションの色がstartとend逆です。
それぐらいな方が自然に見えます。

次に、状態遷移を制御するXMLを記述します。
btn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
>
<item
    android:state_pressed="true"
    android:drawable="@drawable/btn_on" />
<item
    android:drawable="@drawable/btn_off" />
</selector>

このXMLで[android:state_pressed="true"]とされている部分が
押されている間は[btn_on]を描画するとしています。

これらをdrawableに入れて、
layoutのXMLでbtn部分の背景として指定すれば完成です。

これを使ったアプリOneClickHomeもよろしくお願いします。