高畑匡秀

2014.07.09

Androidでよく使うxmlまとめその1

こんにちは。高畑です。
最近Androidでxmlを書くことが非常に多いです。Androidのプログラムとは何なのかと自問自答しています。
という訳で一体自分が普段どれだけxmlを書いているのかまとめてみたくなりました。
Android Lやmaterial designが賑わっている中であえての原点回帰です。

今回紹介するのは基本的なものです

layout
string
array
style
color
dimen
menu

配置場所一覧

xml	配置場所
layout	res/layout/filename.xml
string	res/values/filename.xml
array	res/values/filename.xml
style	res/values/filename.xml
color	res/values/filename.xml
dimen	res/values/filename.xml
menu	res/menu/filename.xml

ちなみに、style.xmlやstring.xmlと良く表記されていますが
便宜上そう呼ばれるのであって、別にそのファイル名にする必要はないです。
中の記述によって~xmlが定義されます。
よくある例でViewのスタイルはstyles.xmlに記述し、アプリケーションやアクティビティのスタイルはthemes.xmlに記述することがあります。
ひとつのxmlファイルに全て定義せずに、用途によって分割すると可読性が上がります。

layout.xml

これがないと何も始まらないですね

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    android:src="@drawable/ic_launcher" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textView"
    android:layout_gravity="center_vertical" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal" android:layout_width="match_parent"

android:layout_height="wrap_content">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/imageView"

android:src="@drawable/ic_launcher" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/textView"

android:layout_gravity="center_vertical" />

</LinearLayout>

動的にViewを取得してtoastにカスタムViewを設定する

  LayoutInflater layoutInflater = getLayoutInflater();
        View view = inflater.inflate(R.layout.custom_toast,null);
        ((TextView)view.findViewById(R.id.textView)).setText("custom toast");
        Toast toast = new Toast(this);
        toast.setView(view);
        toast.show();

LayoutInflater layoutInflater = getLayoutInflater();

View view = inflater.inflate(R.layout.custom_toast,null);

((TextView)view.findViewById(R.id.textView)).setText("custom toast");

Toast toast = new Toast(this);

toast.setView(view);

toast.show();

このLayoutInflaterで動的にViewを取り出してセットする流れは
ToastやActionBarにカスタムレイアウトを適用するだけでなく
何かのアクションにあわせてaddViewしてViewを追加したりと
色々な場面で使います。

string.xml

普通の文字列だけではなく、置換パラーメーターを持った文字列やHTMLも文字列として持っておけます。
ただしHTMLの文字列はエスケープしたものを入れる必要があります。
ただし対応しているタグは以下の３つです。

<b> for bold text.
<i> for italic text.
<u> for underline text.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">アプリ名</string>
<string name="long_string">
      <![CDATA[
        いい感じの\n
        長い文章\n
        入れれます
          ]]>
</string>
<string name="point">%1$dポイント%2$s</string><!--置換パラメーターも指定できます-->
<string name="html_string">&lt;b&gt;強調&lt;/b&gt;&lt;i&gt;イタリック&lt;/i&gt;&lt;u&gt;アンダーライン&lt;/u&gt;</string>
<!--エスケープ前-->
<!--<string name="html_string"><b>強調</b><i>イタリック</i><u>アンダーライン</u></string>-->
</resources>

<?xml version="1.0" encoding="utf-8"?>

<![CDATA[

いい感じの\n

長い文章\n

入れれます

]]>

</string>

<string name="point">%1$dポイント%2$s</string>

<string name="html_string"><b>強調</b><i>イタリック</i><u>アンダーライン</u></string>

</resources>

String longString = getString(R.string.long_string);
String point = getString(R.string.point,100,"プラス"));//"100ポイントプラス"
String point2 =getString(R.string.point,50,"マイナス"));//"50ポイントマイナス"
textView.setText(Html.fromHtml(getString(R.string.html_string)));

String longString = getString(R.string.long_string);

String point = getString(R.string.point,100,"プラス"));//"100ポイントプラス"

String point2 =getString(R.string.point,50,"マイナス"));//"50ポイントマイナス"

textView.setText(Html.fromHtml(getString(R.string.html_string)));

置換パラメーターの「%1$d」や「%2$s」の1や2はgetStringで渡した引数の順番に対応しています。
多言語対応で、ここの順番が重要になってきます。
例えば日付を表示する場合に日本だと「年、月、日」の順番で
どこか別の国では「日、月、年」という順番になることもあります。
そういった場合でも

<string name="date">%1$s年%2$s月%3$s日</string><!--日本-->

1	<string name="date">%1$s年%2$s月%3$s日</string><!--日本-->

<string name="date">%3$sDay%2$sMonth%1$sYear</string><!--その他の国-->

1	<string name="date">%3$sDay%2$sMonth%1$sYear</string><!--その他の国-->

getStringで以下のような引数を指定したとき

getString(R.string.date,"2014","7","6"))

1	getString(R.string.date,"2014","7","6"))

言語設定が日本だと
「2014年7月6日」と表示され
その他の言語だと「6Day7Month2014Year」と表示されます。

array.xml

固定値で配列を用意しておきたい場合に使います。
使い道としてはListViewやSpinnerのAdapterに入れる値が固定の場合に用意しておくという感じでしょうか…
都道府県の配列をxmlで用意して

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="prefecture">
        <item>大阪</item>
        <item>東京</item>
        <item>愛知</item>
        <item>愛媛</item>
        <item>香川</item>
    </string-array>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<string-array name="prefecture">

</string-array>

</resources>

ListViewに使用したり

ListView listView = (ListView) findViewById(R.id.listView);
   ArrayAdapter<String> adapter = new ArrayAdapter<String>(
           this,
           android.R.layout.simple_list_item_1,
           getResources().getStringArray(R.array.prefecture)
   );
listView.setAdapter(adapter);

ListView listView = (ListView) findViewById(R.id.listView);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(

this,

android.R.layout.simple_list_item_1,

getResources().getStringArray(R.array.prefecture)

);

listView.setAdapter(adapter);

Spinnerに使用します

Spinner spinner = (Spinner) findViewById(R.id.spinner);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
           this,
           R.layout.support_simple_spinner_dropdown_item,
           getResources().getStringArray(R.array.prefecture)
    );
spinner.setAdapter(adapter);

Spinner spinner = (Spinner) findViewById(R.id.spinner);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(

this,

R.layout.support_simple_spinner_dropdown_item,

getResources().getStringArray(R.array.prefecture)

);

spinner.setAdapter(adapter);

intの配列も作ることができます。

<?xml version="1.0" encoding="utf-8"?>
<integer-array name="numbers">
    <item>1</item>
    <item>2</item>
    <item>3</item>
</integer-array>
<!--リソースのIDリストもできます-->
<integer-array name="drawable_array">
    <item>@drawable/ic_launcher</item>
    <item>@drawable/ic_launcher</item>
    <item>@drawable/ic_launcher</item>
</integer-array>

<?xml version="1.0" encoding="utf-8"?>

<integer-array name="numbers">

</integer-array>

<integer-array name="drawable_array">

<item>@drawable/ic_launcher</item>

</integer-array>

intの配列はあまり使う場面に出くわさないですね……

style.xml

htmlで言うところのcssファイルです。
スタイルは「parent」を指定することでスタイルを継承することができます。
継承したスタイルは親のスタイルを引き継いでいるので、子のスタイルでは必要なスタイルを追加したり、オーバーライドするだけで変更が済みます。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TextViewStyle">
        <item name="android:textSize">15sp</item>
        <item name="android:textColor">#ff0000</item>
        <item name="android:layout_margin">10dp</item>
    </style>

    <!--TextViewStyleを継承してlayout_marginをオーバーライドする-->
    <style name="TextViewStyleChild" parent="TextViewStyle">
        <item name="android:layout_margin">15dp</item>
    </style>
</resources>

<?xml version="1.0" encoding="utf-8"?>

</style>

</style>

</resources>

「TextViewStyle」をテキストビューに設定すると
textSize「15sp」
textColor「#ff0000」
margin「10dp」
が適用されます。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textView"
    style="@style/TextViewStyle" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/textView"

style="@style/TextViewStyle" />

アクティビティにスタイルを当てる

<!--android:Theme.Holo.Light.DarkActionBarを継承して、タイトルバーを消して、背景色を変える-->
<?xml version="1.0" encoding="utf-8"?>
<style name="CustomActivityStyle" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:background">@android:color/holo_blue_bright</item>
</style>

<?xml version="1.0" encoding="utf-8"?>

<item name="android:background">@android:color/holo_blue_bright</item>

</style>

applicationタグのthemeにスタイルを指定するとアプリケーション全体にスタイルが適用され、activityタグのthemeにスタイルを指定するとそのAcitivtyに対してのみ適用されます。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.co.aainc.enginner.blog" >
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/CustomActivityStyle" >
        <activity
            android:theme="@style/CustomActivityStyle"
            android:name="jp.co.aainc.enginner.blog.MainActivity"
            android:label="@string/app_name" >
        </activity>
    </application>
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="jp.co.aainc.enginner.blog" >

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/CustomActivityStyle" >

<activity

android:theme="@style/CustomActivityStyle"

android:name="jp.co.aainc.enginner.blog.MainActivity"

android:label="@string/app_name" >

</activity>

</application>

</manifest>

color.xml

色を変数で持っておけます。
使う色は多くても3,4色に抑えておくとアプリに統一感が出ます。
FacebookやTwitter、Google+などのアプリもテキストカラーを除けばほぼアクションバーにアプリの色を1色出しているだけです。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#ffffff</color>
    <color name="black">#000000</color>
    <color name="main_color">#45ff0e</color>
    <color name="sub_color">#ADF03B</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<color name="white">#ffffff</color>

</resources>

プログラム上で取り出したり

View view = new View(this);
view.setBackgroundColor(getResources().getColor(R.color.main_bg));

1 2	View view = new View(this); view.setBackgroundColor(getResources().getColor(R.color.main_bg));

layout.xmlで参照できます。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/main_bg">
</LinearLayout>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/main_bg">

</LinearLayout>

気分が変わってアプリのカラーを操作したい時でもcolors.xmlをいじれば全てに適用されるので、気軽に模様替えできます。

dimen.xml

基本的にデザインガイドラインに即したマージンやテキストサイズを用意して
必要に応じて足していくという感じでしょうか。
ただしあまり細かく分けすぎずに大まかに「大」「中」「小」とテキストやマージンのサイズを用意しておくのが良いと言われてます

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="text_size_micro">12sp</dimen>
    <dimen name="text_size_small">14sp</dimen>
    <dimen name="text_size_medium">18sp</dimen>
    <dimen name="text_size_large">22sp</dimen>
    <dimen name="margin_tiny">4dp</dimen>
    <dimen name="margin_small">8dp</dimen>
    <dimen name="margin_medium">16dp</dimen>
    <dimen name="margin_large">32dp</dimen>
    <dimen name="margin_huge">64dp</dimen>
    <dimen name="horizontal_page_margin">@dimen/margin_medium</dimen>
    <dimen name="vertical_page_margin">@dimen/margin_medium</dimen>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<dimen name="horizontal_page_margin">@dimen/margin_medium</dimen>

<dimen name="vertical_page_margin">@dimen/margin_medium</dimen>

</resources>

プログラム上で取り出したり

TextView textView = new TextView(this);
textView.setTextSize(getResources().getDimension(R.dimen.text_size_large));

1 2	TextView textView = new TextView(this); textView.setTextSize(getResources().getDimension(R.dimen.text_size_large));

layout.xmlで参照できます。

<TextView
    android:text="@string/long_string"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/text_size_large"/>

<TextView

android:text="@string/long_string"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="@dimen/text_size_large"/>

menu.xml

アクションバーで表示されるメニューです。
supprot-v7は使わない想定で書いてます。

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        android:showAsAction="ifRoom" />

    <item android:id="@+id/add"
        android:title="@string/add"
        android:icon="@android:drawable/ic_menu_add"
        android:orderInCategory="200"
        android:showAsAction="always" />
</menu>

<item android:id="@+id/action_settings"

android:title="@string/action_settings"

android:orderInCategory="100"

android:showAsAction="ifRoom" />

<item android:id="@+id/add"

android:title="@string/add"

android:icon="@android:drawable/ic_menu_add"

android:orderInCategory="200"

android:showAsAction="always" />

</menu>

アクティビティにメニューを適用させる

public class MainActivity extends Activity {

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //menu.xmlのメニューを取得
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    //各メニューを押した時の処理を書く
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            doSomeThing();
        }
        return super.onOptionsItemSelected(item);
    }

}

public class MainActivity extends Activity {

@Override

public boolean onCreateOptionsMenu(Menu menu) {

//menu.xmlのメニューを取得

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

@Override

//各メニューを押した時の処理を書く

public boolean onOptionsItemSelected(MenuItem item) {

int id = item.getItemId();

if (id == R.id.action_settings) {

doSomeThing();

}

return super.onOptionsItemSelected(item);

}

このまま続きを書くとすごい量になりそうだったので今回はここまでにしておきます。
ここで紹介したものはとても基本的なものですが、可能な限りxmlファイルにしておくことで
string.xmlでの多言語化だけでなく、国別、画面解像度別、OSのバージョン別に
デザインも変えることもできるので変更に強いアプリに仕上がります。
個人的にはstyle.xmlを綺麗に使えると感動します。

次回その２予告

selector
shape
anime
animation-list
layer-list

など……

高畑匡秀

iOSに浮気を始めたAndroidエンジニア？ Androidはほとんど書いてない…

RELATION ENTRY

高畑匡秀の記事一覧へ

▶︎

Androidでよく使うxmlまとめその1

Androidでよく使うxmlまとめその1

配置場所一覧

layout.xml

string.xml

array.xml

style.xml

color.xml

dimen.xml

menu.xml

RELATION ENTRY

HOT ENTRY

RECENT