Androidアプリでレイアウトを作成するとき、ほとんどの方がXMLファイルを記述しているかと思います。 だた、ここから実際どのように表示されるのかをイメージするのは難しいのではないでしょうか？ そこで今回は、レイアウト作成時のデザイン確認時に便利なTools属性(Tools Attributes)の使い方について紹介したいと思います。
導入
下記は、レイアウトXMLの一例です。 まずはTools属性が使用できるようにXML名前空間を記述します。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
2行目の部分が対象の箇所になります。これでこのレイアウトファイル内ではTools属性が使用できるようになります。
Designtime Layout Attributes
一般的にandroid:で指定している名前空間をtools:に置き換えることによってPreview画面で確認することが可能です。 例えば以下のようなレイアウトの場合、Preview画面には何も表示されません。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:maxLines="3"/>
</LinearLayout>
</LinearLayout>
ここで以下のようにレイアウトファイルを変更します。ImageViewにはtools:srcを設定、TextViewにはtools:textを設定しています。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
tools:src="@drawable/cat"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textStyle="bold"
tools:text="ねこ"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:maxLines="3"
tools:text="ネコ（猫）は、狭義にはネコ目（食肉目）- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ（家猫、学名：Felis silvestris catus）の通称である。"/>
</LinearLayout>
</LinearLayout>
すると、以下のようにPreview画面に画像やテキストが表示されるようになります。
その他の属性
tools:ignore
この属性はLintで無視したいエラー(issue ID)をカンマで連結して記述します。 これは手動で記述するよりもAndroid StudioのInspect機能によって自動的に挿入してもらったほうが楽です。
例えばレイアウトXML内に以下のような記述があったとします。
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ほげほげ"
android:textSize="14dp"/>
この状態でAndroid Studioのメニューの Analyze | Inspect Code… からレイアウトXMLファイルをチェックします。 対象のエラーを選択した状態で右クリックして Suppress with @SuppressLint(Java) or tools:ignore(XML) を選択すると、自動的にtools:ignoreへ値が設定されます。
tools:layout
この属性はたいてい<fragment>タグで使用されます。 Preview画面で表示されるフラグメントのレイアウトファイルが指定できます。
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="@layout/fragment_main"/>
tools:listitem / listheader / listfooter
この属性は<ListView>、もしくはその他のAdapterViewのサブクラスである<GridView>や<ExpandableListView>に対して指定できます。 Preview画面に表示されるリスト項目のビュー、ヘッダー、フッターを指定するそれぞれ指定することができます。
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listheader="@layout/list_header"
tools:listitem="@layout/list_item"/>
tools:showIn
とあるレイアウトファイル(included_layout.xmlとします)が、別のレイアウトファイル(activity_main.xml)で<include>タグでインクルードされている場合、included_layout.xmlのルートのタグにtools:showIn属性を設定することでPreview画面ではactivity_main.xmlに含まれている状態で表示されます。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:showIn="@layout/activity_main">
tools:menu
ActionBarで表示されるメニューを設定する属性です。 設定した項目によってPreview画面にメニューが表示されます。
例えば以下のように定義されたmenu1.xmlがあるとします。
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/search"
android:icon="@android:drawable/ic_menu_search"
android:title="Search"
app:showAsAction="ifRoom"/>
<item android:id="@+id/add"
android:icon="@android:drawable/ic_menu_add"
android:title="Add"
app:showAsAction="ifRoom"/>
</menu>
そして以下のように、tools:menu 属性をレイアウトXMLファイルのルートに指定します。 指定する値はメニューのファイル名です。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:menu="menu1">
また、複数のメニューファイルを表示させたい場合は、以下のようにカンマ区切りでファイル名を記載します。
tools:menu="menu1,menu2"
tools:actionBarNavMode
ActionBarで使用される navigation mode を設定する属性です。 設定した値によってPreview画面のActionBarの見た目が変更されます。 以下の値から設定が可能です。
- standard
- list
- tabs
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:actionBarNavMode="tabs" />
まとめ
簡単ではありますが、Tools属性について紹介させていただきました。 特にDesigntime Layout Attributesはデザインの確認時には非常に便利ですのでぜひ使ってみてください。
また、今回紹介した以外の属性もあるので、詳細は参考サイトに記載されている公式ページを参照してください。
注意点として、Android Studioのバージョンによっては使用できない属性もあります。 0.8.0未満のAndroid Studioを使用されて開発しているという方は注意が必要です(おそらくいないと思いますが…)。
