今回の記事では、ImageButtonを押下した時にアニメーションをさせる実装方法について書いていきます。
アニメーションを付けるとユーザーにとって押した事が分かりやすくなるメリットがあります。
完成イメージは以下です。
１．アニメーションのxml定義ファイルを追加する。
resの下にanimディレクトリーを追加して、以下のようなscale_animation.xmlファイルを追加する。
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="500" />
各要素について説明をすると、
・interpolator
アニメーションに変化を加えるための要素です。decelerate_interpolatorを設定すると減速させる変化を加えます。
・fromXScale、fromYScale、toXScale、toYScale
fromのサイズからtoのサイズにアニメーションさせます。fromを1.0、toを0.5に設定すると半分のサイズに変化させます。
・pivotX、pivotY
変化後の座標目標位置を指定する要素です。0%なら左上端に向かって、100%なら右下端に向かって移動します。
なので、50%に指定すると中央となり、scaleと合わせて考えると中央に向かって縮小していきます。
・fillAfter
アニメーション後にその状態を維持するかどうかを指定します。falseを指定すると維持しない、つまり元のサイズに戻ります。
・duration
アニメーションをする時間です。単位はmsecなので、0.5秒間でアニメーションします。
２．ImageButtonをタップのタイミングでアニメーションを開始する
ImageButtonのOnClickListenerを登録して、scale_aminationを読み込み、ViewのstartAnimationを呼び出します。
protected void onCreate(Bundle savedInstanceState) {
ImageButton mCheckButton = (ImageButton) itemView.findViewById(R.id.check_button);
mCheckButton.setOnClickListener(view -> {
Animation mScaleAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.scale_animation);
view.startAnimation(mScaleAnimation);
});
}
以上で、アニメーションする事ができました。
アニメーションをさせる実装自体は非常に簡単なので、パラメータを色々といじって好みのアニメーションを設定すると良いと思います。
今回の完成イメージで使用したアプリは
シンプル操作でやることの管理ができる「記録が残るToDoリスト」
Todoを登録したり、完了した日時を自動で記録して履歴として表示することができる便利な機能が特徴です。