コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
インジケータを画面中央に表示する方法 | Xamarin.Forms
- 2017/06/11
- 04:00
今回はXamarin.Formsでインジケータを表示する方法をご紹介いたします。
画面に処理中のマークを表示するコントロールがインジケータですが、標準のコントロールのみだと寂しいし、画面中央に表示することが難しいので、以下に簡単に画面中央に表示できるサンプルコードを記載したいと思います。
iPhone7 iOS10
Android4
前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.4.0.34 (NuGet Xamarin.Forms 2.3.4.247)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.8.0.1
１．XAMLの記述方法
ページ全体にRelativeLayoutを配置しその中に任意のコンテンツとインジケータを配置します。インジケータはContentViewとFrameで囲うことにより少しデザインを追加して表示しています。単純にインジケータのみ表示であればActivityIndicatorのタグのみの記述で大丈夫です。インジケータの画面に対する表示の縦位置（Y座標）はRelativeLayout.YConstraintのFactorの値を変更することで調整が可能です。
TestPage.xaml
<ContentPage.Content>
<StackLayout x:Name="baseLayout"
Orientation="Vertical"
VerticalOptions="FillAndExpand"
Spacing="15">
<ScrollView x:Name="scrollLayout"
Orientation = "Vertical"
VerticalOptions="FillAndExpand">
<RelativeLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout x:Name="mainLayout"
VerticalOptions="FillAndExpand"
Orientation="Vertical">
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="10, 10, 10, 0"
Android="10, 10, 10, 0"
WinPhone="10, 10, 10, 0" />
</StackLayout.Padding>
<!--ここにラベルやSwitch、Picker、Entry等のコンテンツを配置します。-->
</StackLayout>
<ContentView x:Name="cvLayer"
BackgroundColor="Orange"
Opacity="0.8"
IsVisible="False"
VerticalOptions="Center"
HorizontalOptions="Center"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=0.25}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.4}"
>
<Frame x:Name="frLayer"
BackgroundColor="White"
IsVisible="False">
<StackLayout>
<ActivityIndicator x:Name="Indicator"
IsRunning="False">
<ActivityIndicator.Color>
<OnPlatform x:TypeArguments="Color"
iOS="Orange"
Android="Orange"
WinPhone="Accent" />
</ActivityIndicator.Color>
</ActivityIndicator>
<app:CFLabel Text="Data loading..."
TextColor="Black"
XAlign="Center" />
</StackLayout>
</Frame>
</ContentView>
</RelativeLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
２．使用方法
インジケータを囲っているコンテンツを表示・非表示で切り替えるのとインジケータのIsRunningを切り替えるのみです。とても簡単ですね。TestPage.xaml.cs
using Xamarin.Forms;
public partial class TestPage : ContentPage
{
async void OnButtonClick(object sender, EventArgs e)
{
try
{
cvLayer.IsVisible = true;
frLayer.IsVisible = true;
Indicator.IsRunning = true;
await Task.Run(() =>
{
//長い処理を記述
});
}
finally
{
Indicator.IsRunning = false;
frLayer.IsVisible = false;
cvLayer.IsVisible = false;
}
}
}
※Androidの為にメソッドはAsyncで記述してください。Asyncではない場合、Androidで表示されない場合があります。
※ScrollViewのスクロールポジションに対応した画面中央表示方法については以下の記事にてご紹介しております。
/blog-entry-195.html
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html
PickerにHorizontalTextAlignmentを実装する方法 | Xamarin.Forms ホーム
SQLiteでSystem.Linq.Enumerable関連のSIGSEGVエラーが発生する件 | Xamarin.Forms
