fc2ブログ

記事一覧

インジケータを画面中央に表示する方法 | 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.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


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

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