インソースマーケティングデザイン
2012.09.10 システム
AndroidのUIメモ – ボタン その2
今回もAndroidのボタンネタです。
前回、XML指定形式によるボタンデザインがおススメだと前回紹介しましたが、XMLを駆使するとカッコいいデザインが作ることが出来ます。サンプルではボタンレイアウトにレイヤーを指定しています。色指定には透過率を指定することも出来ますので、ある程度複雑なボタンも手軽に作れてしまいます。
今回も一つのボタンデザインにつき一つのXMLで部品化していますので、サンプルをどうぞ。
↓画面イメージ
C:WorkspaceADR_UITest03resdrawablebtn_sample_01.xml
<selector xmlns_android=”http://schemas.android.com/apk/res/android”>
<!– ★ボタンが押されている状態 –>
<item android_state_pressed=”true”>
<layer-list>
<!– ☆レイヤー10(くぼみ) –>
<item>
<shape android_shape=”rectangle”>
<gradient
android:startColor=”#CCEEEEEE”
android:endColor=”#CC222222″
android:angle=”90″
android:type=”linear”/>
<corners
android:bottomRightRadius=”10dp”
android:bottomLeftRadius=”10dp”
android:topLeftRadius=”10dp”
android:topRightRadius=”10dp” />
</shape>
</item>
<!– ☆レイヤー20(下地) –>
<item
android:top=”2dp”
android:left=”2dp”
android:right=”2dp”
android:bottom=”2dp”>
<shape android_shape=”rectangle”>
<gradient
android:startColor=”#222222″
android:endColor=”#DDDDDD”
android:angle=”90″
android:type=”linear”/>
<corners
android:bottomRightRadius=”10dp”
android:bottomLeftRadius=”10dp”
android:topLeftRadius=”10dp”
android:topRightRadius=”10dp” />
</shape>
</item>
<!– ☆レイヤー25(点灯) –>
<item
android:top=”2dp”
android:left=”2dp”
android:right=”2dp”
android:bottom=”2dp”>
<shape android_shape=”rectangle”>
<gradient
android:startColor=”#CC222222″
android:endColor=”#22AAFFAA”
android:angle=”90″
android:type=”linear”/>
<corners
android:bottomRightRadius=”10dp”
android:bottomLeftRadius=”10dp”
android:topLeftRadius=”10dp”
android:topRightRadius=”10dp” />
</shape>
</item>
<!– ☆レイヤー30(光沢陰影) –>
<!– REM ボタンの高さは「64dp」で設計 –>
<item
android:top=”32dp”
android:left=”2dp”
android:right=”2dp”
android:bottom=”2dp”>
<shape android_shape=”rectangle”>
<solid android_color=”#40000000″ />
<corners
android:bottomRightRadius=”10dp”
android:bottomLeftRadius=”10dp”
android:topLeftRadius=”0dp”
android:topRightRadius=”0dp” />
</shape>
</item>
</layer-list>
</item>
<!– ★デフォルト状態 –>
<item>
<layer-list>
<!– ☆レイヤー10(くぼみ) –>
<item>
<shape android_shape=”rectangle”>
<gradient
android:startColor=”#CCEEEEEE”
android:endColor=”#CC222222″
android:angle=”90″
android:type=”linear”/>
<corners
android:bottomRightRadius=”10dp”
android:bottomLeftRadius=”10dp”
android:topLeftRadius=”10dp”
android:topRightRadius=”10dp” />
</shape>
</item>
<!– ☆レイヤー20(下地) –>
<item
android:top=”2dp”
android:left=”2dp”
android:right=”2dp”
android:bottom=”2dp”>
<shape android_shape=”rectangle”>
<gradient
android:startColor=”#222222″
android:endColor=”#DDDDDD”
android:angle=”90″
android:type=”linear”/>
<corners
android:bottomRightRadius=”10dp”
android:bottomLeftRadius=”10dp”
android:topLeftRadius=”10dp”
android:topRightRadius=”10dp” />
</shape>
</item>
<!– ☆レイヤー30(光沢陰影) –>
<!– REM ボタンの高さは「64dp」で設計 –>
<item
android:top=”32dp”
android:left=”2dp”
android:right=”2dp”
android:bottom=”2dp”>
<shape android_shape=”rectangle”>
<solid android_color=”#40000000″ />
<corners
android:bottomRightRadius=”10dp”
android:bottomLeftRadius=”10dp”
android:topLeftRadius=”0dp”
android:topRightRadius=”0dp” />
</shape>
</item>
</layer-list>
</item>
</selector>
C:WorkspaceADR_UITest03reslayoutmain.xml
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”#888888″
android:gravity=”center”
android:orientation=”vertical” >
<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:gravity=”left”
android:orientation=”vertical”
android:paddingBottom=”10px” >
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”XML指定パターン①(光沢陰影)” />
<Button
android:layout_width=”128dp”
android:layout_height=”64dp”
android:layout_margin=”1dp”
android:text=”ボタンですよ”
android:background=”@drawable/btn_sample_01″ />
</LinearLayout>
<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:gravity=”left”
android:orientation=”vertical”
android:paddingBottom=”10px” >
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”XML指定パターン②(光沢陰影)” />
<ImageButton
android:layout_width=”128dp”
android:layout_height=”64dp”
android:layout_margin=”1dp”
android:text=”ボタンですよ”
android:src=”@drawable/ic_lock_silent_mode_vibrate”
android:background=”@drawable/btn_sample_01″ />
</LinearLayout>
</LinearLayout>
ちなみに色指定で「#AAFFAA(6桁)」ではなく「#22AAFFAA(8桁)」となっているのは間違いではありません。
私は知らなかったのですが「#(透過率2桁)+(RGB6桁)」らしいです。
