【Android】ViewStubの使い方を徹底解説！遅延インフレートで表示・非表示を切り替える方法

ViewStubとは？

具体例に入る前に、まずAndroidにおけるViewStubとは何かを簡単に確認しておきましょう。ViewStubはサイズゼロの「遅延インフレート（Lazy Inflate）」用ビューです。レイアウトファイルに記述しても初期状態では画面に何も描画されず、実行時にinflate()メソッドを呼び出したタイミングで初めて、WindowManagerやViewGroupへ展開（追加）されます。

また、一度インフレートした後はsetVisibility(int)メソッドを使うことで、ビューの表示・非表示を自由に切り替えられます。不要なビューを最初から読み込まないため、起動時のパフォーマンス向上にも役立つ便利な仕組みです。

この記事では、AndroidアプリでViewStubを使用する具体的な手順を、サンプルコード付きでわかりやすく解説します。

実装手順

ステップ1：新規プロジェクトを作成する

Android Studioを開き、「File」→「New Project」から新しいプロジェクトを作成します。必要な項目をすべて入力して、プロジェクトのセットアップを完了させてください。

ステップ2：res/layout/activity_main.xmlにコードを追加

メインレイアウトファイルに以下のコードを記述します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/layout"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="show"/>
    <Button
        android:id="@+id/hide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide"/>
    <ViewStub
        android:id="@+id/viewStub"
        android:layout_width="match_parent"
        android:layout="@layout/childlayout"
        android:layout_height="300dip" >
    </ViewStub>
</LinearLayout>

上記のコードでは、「show」と「hide」という2つのボタンを作成しています。これらのボタンで、ViewStubに定義したレイアウトの表示・非表示を切り替えます。さらに、以下のようにViewStubを宣言し、表示したい子レイアウトを紐付けています。

android:layout="@layout/childlayout"

このandroid:layout属性で指定されたchildlayoutが、ViewStubによって遅延読み込みされます。重要なポイントとして、子レイアウトを指定しただけでは自動的にインフレートされません。必ずActivityクラス側でinflate()メソッドを呼び出す必要があります。

ステップ3：src/MainActivity.javaにコードを追加

次に、MainActivityに以下のコードを記述します。

package com.example.andy.myapplication;
import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewStub;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
    @TargetApi(Build.VERSION_CODES.O)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ViewStub viewStub = findViewById(R.id.viewStub);
        viewStub.inflate();
        Button show = findViewById(R.id.show);
        show.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewStub.setVisibility(View.VISIBLE);
            }
        });
        Button hide = findViewById(R.id.hide);
        hide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewStub.setVisibility(View.GONE);
            }
        });
}
}

上記のコードでは、IDを使ってViewStubを取得し、以下のようにinflate()メソッドを呼び出してレイアウトを展開しています。

final ViewStub viewStub = findViewById(R.id.viewStub);
viewStub.inflate();

「show」ボタンをクリックするとViewStubが表示され、「hide」ボタンをクリックすると非表示になります。

補足：inflate()を呼び出した後、ViewStub自体はビュー階層から取り除かれます。そのため、より安全な実装としては、inflate()の戻り値として返されるインフレート済みビューを保持し、以降の表示・非表示の操作はそのビューに対して行う方法も覚えておくとよいでしょう。

ステップ4：AndroidManifest.xmlは変更不要

マニフェストファイルに変更を加える必要はありません。

アプリの実行と動作確認

それでは、実際にアプリを実行してみましょう。ここでは、Android端末をPCに接続しているものとします。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの実行アイコン をクリックしてください。デバイス選択画面から自分のモバイルデバイスを選択すると、端末にアプリの初期画面が表示されます。

初期状態では上記のような画面が表示されます。「hide」ボタンをクリックすると、以下のように画像が消えます。

続いて「show」ボタンをクリックすると、ImageViewが再び表示されます。