カテゴリー別アーカイブ: Android XML

Android レイアウトファイルでボタンのデザイン

Androidでは, レイアウトファイルのXMLを役割ごとに定義して順に読み込んでいくことで, 画像をできる限り利用しない, CSS3のような感じでボタンをデザインできる.

例えば, まずは, トップのレイアウトXMLを定義する.

button_background.xml

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

とりあえず, 通常状態とpresss時に読み込むレイアウトXML (layer-list) を定義する.

次に, 読み込まれるレイアウトXML (layer-list) を定義する.

button_layer_list.xml

<?xml version="1.0"encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_shadow" />
<item android:drawable="@drawable/button_round_rect" android:bottom="2dp" />
</layer-list>

bottomに2dpを設定しているのは, 通常時は下方向にシャドウを見せたいので.

次は, press時のlayer-listを定義.

button_layer_list_press.xml

<?xml version="1.0"encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_shadow" />
<item android:drawable="@drawable/button_round_rect" android:top="2dp"android:left="2dp"android:right="2dp" />
</layer-list>

top, left, rightに2dpを設定しているのは, ボタンを押した状態を表現したいので.

layer-listにより, ボタンのレイヤーを定義しました. 通常時とpress時は共通して, まず, シャドウを描画してその上に角丸の長方形 (ボタン本体) を描画するという定義になっています.

あとは, シャドウの定義と角丸の長方形をXMLで定義すればOKです,

button_shadow.xml

<?xml version="1.0"encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

     <solid android:color="#AAAAAA" />
     <size
          android:width="5dp"
          android:height="5dp" />
     <corners
         android:topLeftRadius="5dp"
         android:topRightRadius="5dp"
         android:bottomLeftRadius="5dp"
         android:bottomRightRadius="5dp" />

</shape>

button_round_rect.xml

<?xml version="1.0"encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners
    android:topLeftRadius="2dp"
    android:topRightRadius="2dp"
    android:bottomLeftRadius="2dp"
     android:bottomRightRadius="2dp" />

</shape>

これで, ボタンの定義は完了です. これらのXMLはdrawableディレクトリ以下に置いておきます.

あとは, Buttonウィジェットなどの定義で, ボタン定義のトップとなるbutton_background.xmlを読み込めば完成です.

 <Button
     android:layout_width="match_parent"
     android:layout_height="wrap_content"   
     android:background="@drawable/button_background"
     android:textColor="#666666"
     android:textSize="18sp"
     android:text="Button" />

今回は, 通常時とpress時は共通のシャドウとシェイプを利用しましたが, これらを別々のデザインにすることも可能です. そのためのXMLを定義して読み込むだけです.

慣れれば, CSS3でデザインするような感覚で簡単にかつ自由度の高いデザインが可能になると思います.

ちなみに, こちらのサイトが非常に参考になりました.