shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Forms : RefreshViewのぐるぐるを自然なアニメーションで消すためには

Xamarin.FormsにはRefreshViewというコントロールがあって,これは画面を下に引っ張ってデータを更新するPull-To-Refreshという動作を提供するものです.

とても便利でIsRefreshingというプロパティを持っていて,このtrue,falseを切り替えることでデータ更新中のぐるぐるインジケーターを出すことができます.

f:id:shuhelohelo:20200616000915g:plain

さて,このぐるぐるインジケータですが,以下のようにコントロールのIsRefreshingプロパティとコードビハインドのプロパティをバインディングして,コードでオンオフを切り替えます.

        private async Task ExecuteRefresh()
        {
            this.IsRefreshing = true;

            //なにか処理
            await DoSomething();

            this.IsRefreshing = false;
        }

RefreshViewを使うのですから,この「なにかの処理」というのはリストの更新や画像の更新だったりするでしょう.

でどうなるかというと,以下のようにぐるぐるインジケータが自然な感じでフェードアウトするのではなく,パッと消えてしまうことがあります.

自然に消すためには以下のようにIsRefreshingをfalseにする前にどれだけ小さい値でも良いのでTask.Delayを挟むとうまくいきました.

        private async Task ExecuteRefresh()
        {
            this.IsRefreshing = true;
            await RefreshData();
            //Refreshing中のぐるぐるが小さくなって消えるアニメーションをしっかり表示させる場合は
            //Delayを挟むと良い.なぜかはわからない.
            //1秒は個人的に自然な長さに見えたので
            await Task.Delay(1000);
            this.IsRefreshing = false;
        }

ソースコード

github.com