ナレッジベース

Xuni

アプリやWebサイトで見かける細い円形のインジケーターは、Xuni Gaugeの円形ゲージ(RadialGauge)を利用して実現できます。

サンプルコード
C#（Xamarin.Forms）

public class Xuni_GaugePage3 : ContentPage
{
    public Xuni_GaugePage3()
    {
        var radialGauge = new Xuni.Forms.Gauge.XuniRadialGauge();

        // 円の頂点(90°)を開始位置に設定
        radialGauge.StartAngle = 90;
        // ゲージの形状を円形(360°)に設定
        radialGauge.SweepAngle = 360;
        // ゲージの幅を比率で指定
        radialGauge.Thickness = 0.05d; // 元の幅の5%
        // 値を表示する際のアニメーション効果時間
        radialGauge.LoadAnimation.Duration = 1000; //ミリ秒
        // ゲージに関連するテキスト(最大値、最小値、現在値)の表示有無
        radialGauge.ShowText = Xuni.Forms.Gauge.GaugeShowText.Value; // 現在値表示
        // 値を表すPointerの色
        radialGauge.PointerColor = Color.FromHex("#00adef");
        // ゲージの値をパーセント表示する書式設定
        radialGauge.Max = 1;
        radialGauge.Min = 0;
        radialGauge.Format = "P0";  // 整数部分をパーセント表示
        radialGauge.ValueTextColor = Color.White;
        radialGauge.ValueFontSize = 30;

        radialGauge.Value = 0.4; // 表示用の値を設定
        // ゲージの背景色とマージンを設定
        radialGauge.BackgroundColor = Color.Black;
        radialGauge.Margin = new Thickness(0, 50, 0, 100);

        // ゲージの上部に設置するラベルを作成
        var label = new Label
        {
            Margin = new Thickness(0, 50, 0, 0),
            Text = "進捗状況",
            TextColor = Color.White,
            FontSize = 30,
            HorizontalOptions = LayoutOptions.Center,
        };

        //StackLayoutのレイアウトを作成してContentに設定
        var stackLayout = new StackLayout
        {
            Orientation = StackOrientation.Vertical,
            Padding = new Thickness(0, Device.OnPlatform(50, 0, 0), 0, 0),
            BackgroundColor = Color.Black,
            Children = { label, radialGauge }
        };
        Content = stackLayout;

    }
}

下図のように進捗状況などを表現するインジケーターとして表示できます。



Xuni　＞ 技術情報　＞ ドキュメント　＞ RadialGauge クイックスタート：Android／iOS／Xamarin