インソースマーケティングデザイン
2012.07.30 システム
AndroidのUIメモ – ボタン
Androidで画面のレイアウトを組む際、Javaのソース上に記述する方式とXMLファイルで定義する方式の2パターンありますが、Javaのソース上に画面定義と実処理が混在してしまうアプリは、メンテナンス性が低くなってしまうため開発者であれば常識的に「XMLでの定義」方式を選ぶかと思います。
この「XMLでの定義」出来る仕組みというのはなかなか自由度が高く、画面全体のレイアウトのみならず、画面に設置するコンポーネントも作れてしまう代物です。
今回はボタンのサンプルを紹介したいと思います。画面イメージとサンプルは下記の通り。
↓画面イメージ
C:WorkspaceADR_UITest01resdrawablebtn_sample_01.xml
<selector xmlns_android=”http://schemas.android.com/apk/res/android”>
android:shape=”rectangle”>
<!– ボタンが押されている状態 –>
<item android_state_pressed=”true”>
<shape android_shape=”rectangle”>
<gradient
android:startColor=”#333333″
android:endColor=”#F1A255″
android:angle=”90″ />
<corners
android:bottomRightRadius=”10dp”
android:bottomLeftRadius=”10dp”
android:topLeftRadius=”10dp”
android:topRightRadius=”10dp” />
<stroke
android:width=”4px”
android:color=”#9F9F9F” />
</shape>
</item>
<!– デフォルト状態 –>
<item>
<shape android_shape=”rectangle”>
<gradient
android:startColor=”#333333″
android:endColor=”#FFFFFF”
android:angle=”90″ />
<corners
android:bottomRightRadius=”10dp”
android:bottomLeftRadius=”10dp”
android:topLeftRadius=”10dp”
android:topRightRadius=”10dp” />
<stroke
android:width=”4px”
android:color=”#9F9F9F” />
</shape>
</item>
</selector>
C:WorkspaceADR_UITest01reslayoutmain.xml
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
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=”Android標準ボタン” />
<Button
android:layout_width=”128dp”
android:layout_height=”64dp”
android:layout_margin=”1dp”
android:text=”ボタンですよ” />
</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=”画像指定パターン” />
<ImageButton
android:layout_width=”128dp”
android:layout_height=”64dp”
android:layout_margin=”1dp”
android:src=”@drawable/ic_lock_silent_mode_vibrate” />
</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指定パターン①” />
<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>
私が調べた限りでは大体3パターンの実現方法がありますが、お勧めは「XML指定パターン」です。
細かい説明は例の如く割愛しますが、次回は「XML指定パターン」で実現できるデザインサンプルを紹介できればと思います。
