includeタグでレイアウトを再利用する - musicLineアプリ開発日記

Android開発で、同じようなレイアウトを部品化して再利用する話。
今回はmusicLineで実装中の機能「アクティビティログ」を例に解説します。

いつでも、どこでも、気軽に作曲 ♪
musicLineをインストール

レイアウトを部品化

アクティビティログでは、6か所に同じようなレイアウトがあります。

各々のレイアウトの構成要素は4個あります。

これら4個の要素を変更できるようにレイアウトファイルに変数を定義します。変数は@{ }でDataBindingすることで使用します。

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <!--変数の定義-->
    <data>
        <!--タイトル-->
        <variable
            name="title"
            type="String" />

        <!--数字-->
        <variable
            name="number"
            type="String" />

        <!--単位-->
        <variable
            name="digits"
            type="String" />

        <!--画像-->
        <variable
            name="imageSrc"
            type="android.graphics.drawable.Drawable" />
    </data>
    ...
        
        <!--変数の使用-->
        <TextView
            android:id="@+id/title_text_view"
            android:text="@{title}"
            tools:text="再生"
            ...
             />
    ...

</layout>

全コードを表示

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <!--タイトル-->
        <variable
            name="title"
            type="String" />

        <!--数字-->
        <variable
            name="number"
            type="String" />

        <!--単位-->
        <variable
            name="digits"
            type="String" />

        <!--画像-->
        <variable
            name="imageSrc"
            type="android.graphics.drawable.Drawable" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/count_layout"
        android:layout_width="80dp"
        android:layout_height="50dp"
        android:layout_gravity="center">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:scaleType="centerInside"
            android:src="@{imageSrc}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:src="@drawable/play" />

        <TextView
            android:id="@+id/title_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{title}"
            android:textSize="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:text="再生" />

        <TextView
            android:id="@+id/count_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{number}"
            android:textSize="16dp"
            android:textStyle="bold|italic"
            app:layout_constraintBottom_toTopOf="@id/title_text_view"
            app:layout_constraintEnd_toStartOf="@id/zero_text_view"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            tools:text="3.5" />

        <TextView
            android:id="@+id/zero_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="2dp"
            android:text="@{digits}"
            android:textSize="10dp"
            android:textStyle="bold|italic"
            app:layout_constraintBaseline_toBaselineOf="@id/count_text_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/count_text_view"
            tools:text="K" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

こうすることで、レイアウトを再利用する時に文字や画像を変更でき、柔軟なレイアウト部品となります。
また、DataBindingだとデザイナーでプレビューした時に値が空のため、tools属性を使って、プレビュー時のみ使用する値を設定しておくことでデザインがしやすくなります。

部品化したレイアウトを張り付け

部品化したレイアウトを張り付ける時は、<include>タグを使用します。

<include
    layout="@layout/view_activity_log"
    android:layout_width="80dp"
    android:layout_height="50dp"
    app:title="@{`再生`}"
    app:number="@{viewModel.number}"
    app:digits="@{viewModel.digits}"
    app:imageSrc="@{@drawable/play}" />

こちらも値を代入する時は@{ }でDataBindingすることで使用します。テキストをDataBindingする時は``で囲む必要があります。