【Android】スライドアップ／ダウンアニメーションでビューを表示・非表示にする方法

本記事では、Androidアプリでスライドアップ／スライドダウンのアニメーションを使ってビュー（View）を表示・非表示に切り替える方法を解説します。ボタンをタップするたびに、画面下部のLinearLayoutが滑らかに出入りするサンプルアプリを一緒に作っていきましょう。

手順1：新規プロジェクトを作成する

Android Studioで「File」→「New Project」を選択し、必要な項目を入力して新しいプロジェクトを作成します。

手順2：activity_main.xmlにレイアウトを定義する

res/layout/activity_main.xmlに以下のコードを追加してください。

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
    xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent">
    <Button
        android:id = "@+id/button"
        android:layout_centerHorizontal = "true"
        android:layout_marginTop = "100dp"
        android:layout_width = "150dp"
        android:text = "Click"
        android:layout_height = "wrap_content"/>
    <LinearLayout
        android:id = "@+id/view"
        android:background = "#a6e1aa"
        android:orientation = "vertical"
        android:layout_alignParentBottom = "true"
        android:layout_width = "match_parent"
        android:layout_margin = "20dp"
        android:layout_height = "200dp">
        <EditText
            android:hint = "User name"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content" />
        <EditText
            android:hint = "Password"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content" />
    </LinearLayout>
</RelativeLayout>

このレイアウトでは、アニメーション付きで表示／非表示を切り替える対象として、緑色の背景を持つLinearLayoutを画面下部に配置しています。中にはユーザー名とパスワードを入力するためのEditTextを2つ用意しました。上部のButtonが、LinearLayoutの表示切り替えのトリガーとなります。

手順3：MainActivity.javaを実装する

src/MainActivity.javaに以下のコードを追加します。

package com.example.andy.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {
    boolean opened;
    LinearLayout view;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view = findViewById(R.id.view);
        view.setVisibility(View.INVISIBLE);
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(!opened){
                    view.setVisibility(View.VISIBLE);
                    TranslateAnimation animate = new TranslateAnimation(
                        0,
                        0,
                        view.getHeight(),
                        0);
                    animate.setDuration(500);
                    animate.setFillAfter(true);
                    view.startAnimation(animate);
                } else {
                    view.setVisibility(View.INVISIBLE);
                    TranslateAnimation animate = new TranslateAnimation(
                        0,
                        0,
                        0,
                        view.getHeight());
                    animate.setDuration(500);
                    animate.setFillAfter(true);
                    view.startAnimation(animate);
                }
                opened = !opened;
            }
        });
    }
}

上記のコードでは、boolean型のフラグ「opened」で現在の表示状態を管理し、ボタンがタップされるたびに状態を反転させています。

ポイント：TranslateAnimationによる表示・非表示の切り替え

ビューをスライドアップで表示する場合：

TranslateAnimation animate = new TranslateAnimation(
    0,
    0,
    view.getHeight(),
    0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);

ビューをスライドダウンで非表示にする場合：

TranslateAnimation animate = new TranslateAnimation(
    0,
    0,
    0,
    view.getHeight());
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);

TranslateAnimationの引数は、それぞれX方向の開始位置・終了位置、Y方向の開始位置・終了位置を指定しています。表示時はY座標を「ビューの高さ→0」へ移動させることで下からせり上がるように見せ、非表示時はその逆を行います。また、setDuration(500)でアニメーション時間を500ミリ秒に設定し、setFillAfter(true)によりアニメーション終了後の状態を維持しています。

アプリを実行して動作を確認する

それでは実際にアプリを起動してみましょう。実機のAndroidスマートフォンをPCに接続していることを前提とします。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。接続した端末を選択すると、スマートフォンに以下の初期画面が表示されます。

ボタンをタップすると、上の画像のようにLinearLayoutが画面下部からスライドアップして表示されます。もう一度同じボタンをタップすれば、次の画像のようにビューがスライドダウンして非表示になります。