Styleを使おう - ReDo

2010年9月26日

Styleを使おう

Androidでは大半のレイアウト、UI構造をXMLで記載しますが、きちんとStyleを使うとコードがすっきりする上に、同様の画面を複数つくった際の調整コストが大きく下がりますよ、と。

参考:
Android developers:Applying Styles and Themes
http://developer.android.com/guide/topics/ui/themes.html
mucchinのAndroid戦記:Androidアプリで使う文字列のスタイルを統一する方法
http://android.roof-balcony.com/resource/style/

以下の様な画面を「Styleなし」と「Styleあり」で作成した際にどうなるかを記します。

xml1.png

1.Styleを使わないパターン。

layout/main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<Button
		android:id="@+id/Menu1Button"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:padding="3pt"
		android:textSize="11pt"
		android:textColor="#000000"
		android:drawableLeft="@drawable/icon"
		android:text="1" />
	<Button
		android:id="@+id/Menu2Button"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:padding="3pt"
		android:textSize="11pt"
		android:textColor="#000000"
		android:drawableRight="@drawable/icon"
		android:text="2" />
	<Button
		android:id="@+id/Menu3Button"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:padding="3pt"
		android:textSize="11pt"
		android:textColor="#000000"
		android:drawableLeft="@drawable/icon"
		android:text="3" />
	<Button
		android:id="@+id/Menu4Button"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:padding="3pt"
		android:textSize="11pt"
		android:textColor="#000000"
		android:drawableRight="@drawable/icon"
		android:text="4" />
	<Button
		android:id="@+id/Menu5Button"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:padding="3pt"
		android:textSize="11pt"
		android:textColor="#000000"
		android:drawableLeft="@drawable/icon"
		android:text="5" />
	<LinearLayout
		android:id="@+id/BottomLinear"
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		>
		<Button
			android:id="@+id/BottomAButton"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:layout_gravity="bottom"
			android:padding="3pt"
			android:textSize="11pt"
			android:textColor="#000088"
			android:drawableTop="@drawable/icon"
			android:text="A" />
		<Button
			android:id="@+id/BottomBButton"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:layout_gravity="bottom"
			android:padding="3pt"
			android:textSize="11pt"
			android:textColor="#000088"
			android:drawableTop="@drawable/icon"
			android:text="B" />
		<Button
			android:id="@+id/BottomCButton"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:layout_gravity="bottom"
			android:padding="3pt"
			android:textSize="11pt"
			android:textColor="#000088"
			android:drawableTop="@drawable/icon"
			android:text="C" />
	</LinearLayout>
</LinearLayout>

2.Styleを使うパターン。

まずstyleを記載したファイルを別途に作成します。

values/styles.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="MenuButton">
		<item name="android:layout_width">fill_parent</item>
		<item name="android:layout_height">wrap_content</item>
		<item name="android:padding">3pt</item>
		<item name="android:textSize">11pt</item>
		<item name="android:textColor">#000000</item>
	</style>
	<style name="MenuButton.Bottom">
		<item name="android:layout_gravity">bottom</item>
		<item name="android:layout_weight">1</item>
		<item name="android:padding">3pt</item>
		<item name="android:textSize">11pt</item>
		<item name="android:textColor">#000088</item>
		<item name="android:drawableTop">@drawable/icon</item>
	</style>
</resources>

layout/main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	>
	<Button
		android:id="@+id/Menu1Button"
		style="@style/MenuButton"
		android:drawableLeft="@drawable/icon"
		android:text="1" />
	<Button
		android:id="@+id/Menu2Button"
		style="@style/MenuButton"
		android:drawableRight="@drawable/icon"
		android:text="2" />
	<Button
		android:id="@+id/Menu3Button"
		style="@style/MenuButton"
		android:drawableLeft="@drawable/icon"
		android:text="3" />
	<Button
		android:id="@+id/Menu4Button"
		style="@style/MenuButton"
		android:drawableRight="@drawable/icon"
		android:text="4" />
	<Button
		android:id="@+id/Menu5Button"
		style="@style/MenuButton"
		android:drawableLeft="@drawable/icon"
		android:text="5" />
	<LinearLayout
		android:id="@+id/BottomLinear"
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		>
		<Button
			android:id="@+id/BottomAButton"
			style="@style/MenuButton.Bottom"
			android:text="A" />
		<Button
			android:id="@+id/BottomBButton"
			style="@style/MenuButton.Bottom"
			android:text="B" />
		<Button
			android:id="@+id/BottomCButton"
			style="@style/MenuButton.Bottom"
			android:text="C" />
	</LinearLayout>
</LinearLayout>

  • メンテナンス性が向上します。
    • 特にAndorid標準UIからのカスタマイズ差分が大きいほど効果を発揮します。
  • 画面数(Activity、inflate/setContent対象のレイアウトxmlファイル数)が効率が上がります。
  • HTMLのCSSをいまさら別ファイルにしてない方はいないでしょ?

(過度にやりすぎるとメンテナンスが面倒ですが)values/colors.xmlとか、Magic Numberをなるべく@string/に追い出す対応と組み合わせると、「使いまわせる度」があぷします。

コメントする