Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#34 ActivityIndicatorの使い方を解説

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

ActivityIndicatorとは?

ActivityIndicatorとは,処理中などを示すくるくると回るアニメーションです。処理中にこれを表示するだけで,ユーザーのストレスは軽減され,処理中であることが明確になるため,非常に使い勝手のいい機能ですね。

準備

今回はActivityIndicatorPageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,ActivityIndicatorPage という新規のコンテンツページを作って,MenuPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにActivityIndicatorPageの実装をして問題ありません。

ActivityIndicatorPageの追加

Pagesフォルダーに新規追加でActivityIndicatorPageという名前のコンテンツページを作成してください。作成されたらデフォルトのStackLayoutの部分を削除して,次のように記述します。

AbsoluteLayout

AbsoluteLayoutはコントロールを比率や座標指定で配置できるパネルです。普段はStackLayoutを使用していますが,StackLayoutだと,コントロールを配置すればするほど位置が移動してしまうため,必ず真ん中に表示されるようにAbsoluteLayoutを使用します。

AbsoluteLayout.LayoutBoundsは「x座方」「y座標」「横幅」「高さ」の順に指定します。

AbsoluteLayout.LayoutFlagsをPositionProportionalにすることで,xとyの座標を比率で指定できます。今回は中央に表示したいので「0.5,0.5,50,50」と指定しています。xとy座標を,50%を示す0.5とし,横幅と高さを絶対値の50ピクセルにしています。これで真ん中に50ピクセルの「くるくる」を表示することができます。

IsRunning

ActivityIndicatorのIsRunningをTrueにしている間中「くるくる」が表示され続けます。不要になったタイミングでFalseにしましょう。

Color

「くるくる」の色を指定できます。

実行

実行すると真ん中に「くるくる」が表示されます。UWPは横方向に点が移動するイメージですね。UWPの横幅はもっと広げたほうが見栄えがいいかもしれません。

今のままの実装だと,「くるくる」が真ん中に表示されていますが,他のコントロールを置く場合にどのように配置したらいいかが問題となります。通常の使い方だと,ListViewなどの検索が必要なコントロールに重ねて表示したいですよね。その場合は次のように実装します。

Gridを定義し,その中に先ほどのAbsoluteLayout上のActivityIndicatorと,別途コントロールを配置したいStackLayoutの両方を配置します。Gridに対して行と列を指定していないので,どちらのコンテナも行ゼロ,列ゼロの状態で重なりあって表示されます。これで,StackLayoutにいつも通りコントロールを配置しても,真ん中に「くるくる」が表示されるようになります。

実行

コントロールが複数表示されながらも,真ん中に「くるくる」が表示されているのが確認できます。

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。