読者です 読者をやめる 読者になる 読者になる

ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

Xamarin.Formsでキャラクターのステータスをゲージで表現する

Xuni

ステータスを表現する方法として細い円を利用する場合があります。
Windows 10のインストール中に進捗度を表示するインジケータもこのスタイルで、他にもゲームアプリでキャラクターステータスの表示などでも見かけます。

このように進捗度などを表現する場合には「ゲージ」を利用します。 ここでいう「ゲージ」は、現実社会では計測する計器のことで、アプリでは値を表現するためのユーザーインタフェースという意味です。
基準となる形状に沿った形で、値をポインタで表現することで数値データの可視化に利用します。

Xuniでは、以下の3種類のゲージを提供しています。

種別 名称 用途
線形ゲージ LinearGauge 縦または横向きの直線に沿って表現
円形ゲージ RadialGauge 曲線に沿って弧を描き全円や半円などの円形で表現
ブレットグラフ BulletGraph 目的特化型の線形ゲージ。範囲と目標値をゲージ内で表現

Xuni for Xamarin Platform の製品ヘルプ | Xuni (ズーニー) | グレープシティ株式会社

今回は円形ゲージ(RadialGauge)を表示するUIを作成する方法を解説します。

作成するのは、Xamarin.Formsを利用したAndroidアプリとiOSアプリです。単純にゲージを表示するだけなので、動作はなく表示するだけのページを作成します。

プロジェクト作成などの基本的な部分は他の記事や解説をご参照ください。 www.goxuni.com

hatena.c1.grapecity.com


表示するゲージの作成

アプリの画面Xamarin.Formsの共有プロジェクトに作成します。

1.Gridの作成

まずContentPageの中にGridレイアウトを作成します。1行×1列のシンプルなグリッドレイアウトの定義です。

<Grid VerticalOptions="CenterAndExpand">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"  />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
</Grid>  
2.RadialGaugeの作成

XAMLのContentPageの属性に、Xuniの参照を追加します。

xmlns:xunigauge="clr-namespace:Xuni.Forms.Gauge;assembly=Xuni.Forms.Gauge"

次に、1で作成したGridの中にRadialGaugeを作成します。ゲージの仕様は以下です。

  • 全円の形状で上が0
    • SweepAngle = 360
      円形の角度を指定します。360度の場合は全円です。
    • StartAngle = 90
      開始位置を角度で指定します。90度の場合は上がゼロで時計回りに値が増えます。
  • 細い円

    • Thickness = 0.08
      相対値で指定します。既定の太さに対する割合で指定し、1(100%)の場合は円形になります。小さい値(ここでは0.08)を指定すると細円です。
  • 最大値、最小値、値

    • Min = 0、Max = 100、Value = 25
      ゲージに表示する値を指定します。0から100までを指定すれば、値が百分率を表現することになるので、見た目にも数値としてもわかりやすくなります。

これらをXAMLで指定した内容が以下です。上記以外にも、ポインタの色およびグリッドの位置を指定するGrid.RowGrid.Columnも設定しています。

<xunigauge:XuniRadialGauge 
    x:Name="gauge"
    Grid.Row="0"  Grid.Column="0"
    PointerColor="#3498db"
    StartAngle="90"
    SweepAngle="360"
    Thickness="0.08"
    Min="0"
    Max="100"
    Value="25" />  

これをGrid内部に記述すると以下のゲージが表示されます。25%(1/4)の位置までポインタが表示されていることが確認できます。 f:id:ComponentOne_JP:20170112184138p:plain

ゲージ表示される値

ゲージを細円の形にすると、中心部分は空白になり既定では値が表示されます。値の表示は、ShowTextプロパティで制御可能です。 非表示にするには以下の属性を前述のXAMLに追加します。

ShowText ="None"

また"Value"MinMax"All"を指定可能で、それぞれ「値のみ表示」「最大値と最小値を表示」「すべてを表示」にできます。
以下は"All"を指定した例です。最大値と最小値はポインタの開始と終了点に表示されるため、全円の形では表示できません。そのためこの例ではSweepAngleを180度に設定しています。 f:id:ComponentOne_JP:20170112184152p:plain

画像の表示

前項でゲージの値を表示しない設定にしました。その代わりにゲージの中に画像を表示するようにします。

Xamarinで開発するアプリで画像を表示する場合は、プラットフォームごとのプロジェクトに保存した画像を使う方法があります。また、UI同様に共有プロジェクトのリソースとして保存した画像を表示する方法でも対応可能です。
ここではXamarin.Formsのメリットを活かすために、共有プロジェクトのリソースに画像を設定します。

1.リソースの作成

表示する画像をプロジェクト内に取り込んでリソースとします。
共有プロジェクト内に表示したい画像を追加します。
ここではわかりやすいようにimagesフォルダを新規に作成し、その中に配置しました。
追加後、画像ファイルのプロパティ設定画面で、ビルドアクションの項目をEmbeddedResource(Visual Studioの場合は埋め込みリソース)に設定します。
この設定をすることで文字通りアプリのリソースとして利用可能になります。 f:id:ComponentOne_JP:20170112183215p:plain

2.画像を表示する領域の作成

画像を表示するためのImageタグを作成し、Gridに追加します。
すでに作成済みのゲージと同じ行、列を指定することで画像とゲージを重ねて表示することができます。また、ゲージと画像の間隔をあけるためにMarginを設定しています。

    <Image x:Name="image"
        Grid.Row="0"
        Grid.Column="0"
        Margin="20" />

3.画像の読み込み
画像の読み込みを、作成したページのコードビハインドで行います。
ImageSourceクラスのFileImageSourceメソッドを利用し、リソースのIDを指定することで読み込みます。

// Imageにリソースから取得した画像を設定
image.Source = ImageSource.FromResource("Xuni_QuickStart.images.eto_tori.png");

完成したゲージを表示するXAMLとそのコードビハインドが以下です。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="Xuni_QuickStart.Xuni_QuickStartPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Xuni_QuickStart"
             xmlns:xunigauge="clr-namespace:Xuni.Forms.Gauge;assembly=Xuni.Forms.Gauge">
    <Grid VerticalOptions="CenterAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <xunigauge:XuniRadialGauge x:Name="gauge"
                Grid.Row="0"
                Grid.Column="0"
                Max="100"
                Min="0"
                PointerColor="#3498db"
                ShowText="None"
                StartAngle="90"
                SweepAngle="360"
                Thickness="0.08"
                Value="25" />
        <Image x:Name="image"
                Grid.Row="0"
                Grid.Column="0"
                Margin="20" />
    </Grid>
</ContentPage>
using Xamarin.Forms;

namespace Xuni_QuickStart
{
    public partial class Xuni_QuickStartPage : ContentPage
    {
        public Xuni_QuickStartPage()
        {
            InitializeComponent();

            // Imageにリソースから取得した画像を設定
            image.Source = ImageSource.FromResource("Xuni_QuickStart.images.eto_tori.png");
        }
    }
}

AndroidとiOSアプリで表示しています。 f:id:ComponentOne_JP:20170112183436p:plain

クロスプラットフォームアプリの課題

ゲームでキャラクターのステータスを表示するようなインタフェースが完成しました。
すぐに気づきますが、画像の表示される大きさや位置が異なります。ここでは問題ありませんが、確かな表示を求めるケースでは調整が必要です。
場合によってはプラットフォームごとに画像を変えたり、表示処理を分岐させることで対応できます。

Xuniの機能を試すXamarin.Formsアプリ

今回紹介したゲージをはじめ、Xuniはデータグリッドやチャートなど各種コンポーネントを提供しています。
無料アプリで機能を確認できますのでお試しください。

www.goxuni.com


参考情報

Working with Images - Xamarin

.NET TIPS:Xamarin.Forms:アプリのリソースを指定して画像を表示するには? - @IT

ComponentOne