記事一覧

インジケータを画面中央に表示する方法 | Xamarin.Forms


今回はXamarin.Formsでインジケータを表示する方法をご紹介いたします。
画面に処理中のマークを表示するコントロールがインジケータですが、標準のコントロールのみだと寂しいし、画面中央に表示することが難しいので、以下に簡単に画面中央に表示できるサンプルコードを記載したいと思います。

iPhone7 iOS10
xamarin_indicator_01.png
Android4
xamarin_indicator_02.png



前提条件
・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


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>


2.使用方法

インジケータを囲っているコンテンツを表示・非表示で切り替えるのとインジケータのIsRunningを切り替えるのみです。とても簡単ですね。

TestPage.cs
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のスクロールポジションに対応した画面中央表示方法については以下の記事にてご紹介しております。
http://itblogdsi.blog.fc2.com/blog-entry-195.html



当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿
非公開コメント

アルバム

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。