Viewを点滅させよう ~ Android Studio の使い方解説【図解、サンプルコード付き】~

Android アプリ開発基礎 〜 java〜

※本記事は2021年7月2日に更新しました。

「簡単なアニメーションを実装したいな・・・」
「点滅ってどうやって実装するの?」

今回はそんな要望にお応えします。
まずはこちらの動画をご覧ください。

動画のアプリではボタンがチカチカと点滅しています。

本記事ではこの点滅アニメーションの実装の仕方について解説します。
ポイントを押さえれば意外と簡単ですよ。

前提として、本記事はAndroid Studio 4.2.1を対象に記載します。
また、筆者のAndroid Studioは日本語化しているため、日本語にて解説します。

本記事の使用言語はJavaとなります。
今回はProgate のJavaのレッスンがすべて理解できている、
という前提の上進めていきます。

では早速参りましょう!

前回の記事はこちら

点滅アニメーションの追加の仕方

Viewの点滅は、そのViewの透明度が上がったり下がったりで
表現することができます。

この点滅アニメーションの追加の仕方は以下の通りです。

  1. アニメーターXMLファイルを用意する
  2. アクティビティファイルでアニメーターを実装する
  3. アクティビティファイルでアニメーションの開始を宣言する

これらについて、一つ一つ解説していきます。

アニメーターXMLファイルを用意する

アニメーションの細かい設定は、アニメーターXMLファイルにて行います。
アニメーターXMLファイルは、resフォルダ内にanimatorフォルダを作成し、
その中に作成します。

Animatorフォルダの用意

resフォルダの上で右クリック⇒新規⇒Androidリソースディレクトリーを選択してください。

リソースタイプを「animator」にしてOKを押してください。
resフォルダにanimatorフォルダが作成されます。

アニメーターXMLファイルを用意する

animatorフォルダの中に、xmlファイルを作成します。
animatorフォルダの上で右クリック⇒新規⇒animatorリソース・ファイルを選択してください。

ファイルの名前は任意です。今回は『blink_animation』としてください。

アニメーターXMLファイルのソースコードは次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="0.5f"
        android:repeatCount="-1"
        android:repeatMode="reverse"/>
</set>

これが、アニメーションの設定ファイルとなります。
アニメーションの設定ファイルは『set』で囲む形で記載します。

『objectAnimator』にて1種類のアニメーションを定義します。

『android:propertyName』では、アニメーションの種類を定義します。
今回は透明度を上げたり下げたりで点滅を表現するため、
透明度を表す、『alpha』を設定しています。

『android:duration』は1個のアニメーションを何msで行うかの設定です。
今回は透明度高い⇒低いの間隔を500msで行うようにします。

『android:valueTo』はアニメーションをどの値まで変化させるかの設定です。
今回は0.5fとしています。(fはfloat型を表す語尾)

『android:repeatCount』は何回アニメーションを繰り返すかの設定です。
正の整数で回数を設定、-1で無限に繰り返すことを設定します。
今回は無限に繰り返すため、-1を設定しています。

『android:repeatMode』は最初から繰り返すか、逆方向に繰り返すかの設定です。
最初から繰り返す場合はrepeat、逆方向に繰り返す場合はreverseを設定します。
今回はreverseを設定します。

他にもXMLファイルではいろいろな設定が可能です。
下のサイトにて詳細書かれていますので、ぜひ参考にしてみてください。

アニメーション リソース  |  Android Developers

アクティビティファイルでアニメーターを実装する

アクティビティファイルでのアニメーターの実装方法です。
XMLファイルを用意しただけだと、アニメーションは画面に表示されません。
アクティビティファイルにて、アニメーションの実装を命令しなければなりません。

アニメーションはAnimatorSet オブジェクトで実装します。
実装の文は以下の通りです。

public class MainActivity extends AppCompatActivity {

    //アニメーションを定義するAnimatorSetオブジェクトを宣言する
    AnimatorSet set;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //ボタンオブジェクトをレイアウトから取得
        Button button = findViewById(R.id.button);
        //AnimatorInflaterで、AnimatorSetオブジェクトを取得
        //前もって作成したR.animator.blink_animationをインフレート
        set = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this,
                R.animator.blink_animation);
        //アニメーション対称のオブジェクトを設定
        set.setTarget(button);
    }
}

重要なのは15、16行目と18行目です。
15、16行目のAnimatorInflatorで現在のActivityに、
先に設定したblink_animation.xmlファイルをinflaterでインフレートして、
Animatorオブジェクトを作成しています。
これにより、先に設定したアニメーションがAnimatorオブジェクトに設定されます。

18行目、set.setTarget(・・・)で、・・・のオブジェクトにアニメーションをセットします。
これで、・・・のオブジェクトにアニメーションが設定されました。

以上がアニメーターの実装となります。

アクティビティファイルでアニメーションの開始を宣言する

上では、オブジェクトにアニメーターを設定するところまで行いました。
ここまででは、アニメーションは実行されません。
アニメーションの開始を宣言していないからです。

アニメーションの開始は、画面の準備ができてから、
つまりonCreateの後のonStartメソッドの中で行います。

実装文は以下の通りです。

public class MainActivity extends AppCompatActivity {

    //アニメーションを定義するAnimatorSetオブジェクトを宣言する
    AnimatorSet set;
        ・
        ・
        ・
    //onCreateの中だとStartタイミングが早すぎて間に合わない。
    //onCreateの後の工程のonStartにてstartを実装する
    @Override
    protected void onStart() {
        super.onStart();
        //アニメーションの開始を宣言
        set.start();
    }

}

onStartの中で、~.start()を命令することでアニメーションが開始されます。

以上がアニメーションの実装方法となります。

サンプルコード

最後に、今回のサンプルコードを提示します。

今回のアプリはGitHubに公開しています。
下記URLの『SampleBlinkAnimation』です。
是非参考にしてください。

GitHub - Umigishi-Aoi/SampleBlinkAnimation: Android StudioでのViewの点滅のさせ方です。このプロジェクトは自分のAndroid Studio の勉強の中で作られたものです。この解説は、 https://zerokara-app.com/623/ にあります。How to blink View in Android Studio. This project is created in studying how to use Android Studio. This Commentary is in https://zerokara-app.com/623/
Android StudioでのViewの点滅のさせ方です。このプロジェクトは自分のAndroid Studio の勉強の中で作られたものです。この解説は、 にあります。How to blink View in Android Studio. This project is created in studying h...

以下、サンプルコードです。

文字列リソースファイル string.xml

<resources>
    <string name="app_name">SampleBlinkAnimation</string>
    <string name="button">Button</string>
</resources>

レイアウトファイル activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

アニメーターXMLファイル blink_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="0.5f"
        android:repeatCount="-1"
        android:repeatMode="reverse"/>
</set>

アクティビティファイル MainActivity.java

package com.zerokaraapp.sampleblinkanimation;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.AnimatorInflater;
import android.animation.AnimatorSet;
import android.os.Bundle;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    //アニメーションを定義するAnimatorSetオブジェクトを宣言する
    AnimatorSet set;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //ボタンオブジェクトをレイアウトから取得
        Button button = findViewById(R.id.button);
        //AnimatorInflaterで、AnimatorSetオブジェクトを取得
        //前もって作成したR.animator.blink_animationをインフレート
        set = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this,
                R.animator.blink_animation);
        //アニメーション対称のオブジェクトを設定
        set.setTarget(button);
    }

    //onCreateの中だとStartタイミングが早すぎて間に合わない。
    //onCreateの後の工程のonStartにてstartを実装する
    @Override
    protected void onStart() {
        super.onStart();
        //アニメーションの開始を宣言
        set.start();
    }

}

※javaファイルについて、1行目packageの部分は人によって異なります。
コピペする場合は2行目以降をコピペしてください。

ここまで出来たら一度アプリを実行してみましょう。
一番上の動画のアプリのように動作すれば成功です。

まとめ

本記事ではViewの点滅アニメーションの実装の仕方について解説しました。

アニメーションですが、実装は意外と簡単な印象でした。
文字の移動だったりのアニメーションも可能なので、
今後活用してみてください。

本記事が初心者の方の参考になれば幸いです。

次回の記事はこちら

コメント

タイトルとURLをコピーしました