【Xamarin】C#でAndroidアプリを作ってみる 6 (簡単なアニメーション)

概要

前回：C#でAndroidアプリを作ってみる 5 (見栄えの調整)
今回は、干支×星座算出結果表示に簡単なアニメーションを追加します。
生年月日選択→待機アニメーション→算出結果表示という流れです。

アニメーションさせる画像を追加する

「Resources\drawable」に画像を追加します。
この画像ファイル名をstar.pngとします。
activity_main.xmlに、以下のImageViewを追加します。

activity_main.xml

    <ImageView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/star_image" 
        android:src="@drawable/star"
        android:visibility="gone"/>  

「visibility="gone"」で表示領域を確保せずに非表示にしています。

アニメーションを定義する

ソリューションエクスプローラーの「Resources」で右クリックし、追加→新しいフォルダを選択します。
フォルダ名を「anim」とします。
更に、「Resources\anim」で右クリックし、追加→新しい項目を選択します。
XMLファイルを選択します。

ファイル名は「wait_animation.xml」としました。追加ボタンを押下します。
コードは以下の通りです。

wait_animation.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/accelerate_interpolator">
  <translate android:duration="800"
             android:fromXDelta="0%p" 
             android:toXDelta="100%p"
             android:fromYDelta="0%p"
             android:toYDelta="100%p"/>
</set>

左上から右下に移動するアニメーションです。

アニメーションを開始する

アニメーションを開始するために、MainActivityに以下のコードを追加します。

MainActivity.cs

using Android.Views.Animations;

・・・省略・・・
        // 星の画像
        ImageView starImage;
・・・省略・・・

        protected override void OnCreate(Bundle savedInstanceState)
        {
            ・・・省略・・・
            starImage = FindViewById<ImageView>(Resource.Id.star_image);
        }

        /// <summary>
        /// 結果を表示する
        /// </summary>
        private void DisplayResults(DateTime time)
        {
            // 星画像を表示する
            starImage.Visibility = Android.Views.ViewStates.Visible;

            // アニメーション開始
            var waitAnimation = AnimationUtils.LoadAnimation(this, Resource.Animation.wait_animation);
            starImage.StartAnimation(waitAnimation);

            // アニメーション完了イベント
            starImage.Animation.AnimationEnd += (sender, e) => {

                // 星画像を非表示にする
                starImage.Visibility = Android.Views.ViewStates.Gone;

                selectedDateLabel.Text = time.ToString("yyyy年MM月dd日")
                            + $"\r\nあなたは、{GetEto(time.Year)}年 {GetSeiza(time.Month, time.Day)}です。";
            };              
        }

日付選択処理(DateSelectButton_Click)を以下のように変更します。

MainActivity.cs

        /// <summary>
        /// SELECT DATEボタン押下時の処理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void DateSelectButton_Click(object sender, System.EventArgs e)
        {
            var frag = DatePickerFragment.NewInstance(DisplayResults);
            frag.Show(FragmentManager, DatePickerFragment.TAG);
        }        

実行してみる

まとめ

今回は、簡単なアニメーションを追加するところまでを行いました。
次回は、未定です。