ナレッジベース

Xuni

アプリやWebサイトで見かける細い線形のインジケーターは、Xuni Gaugeの線形ゲージ(LinearGauge)を利用して実現できます。
LinearGaugeは、直線型のゲージを上下左右の方向に向けて値を表示できます。線の幅を細くして標準では値やパーセンテージを表示するポインタ領域の文字を塗りつぶすことで、温度計表示のような細いインジケーターを表示できます。

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

public Xuni_Gauge_Linear()
{
    var linearGauge = new Xuni.Forms.Gauge.XuniLinearGauge();

    // 線型ゲージを設定
    // 右方向に進むゲージ
    linearGauge.Direction = Xuni.Forms.Gauge.LinearGaugeDirection.Right;
    linearGauge.Min = 0;
    linearGauge.Max = 1;
    // ゲージの幅を比率で指定
    linearGauge.Thickness = 0.08; //元の幅の8%

    linearGauge.Value = 0.6;
    // ゲージに関連するテキスト(最大値、最小値、現在値)の表示有無
    linearGauge.ShowText = Xuni.Forms.Gauge.GaugeShowText.Value;  // 現在値表示

    // フォントサイズを最小限にして、ポインタ色とテキスト色を同じに設定
    // 同色で値は見えなくなり丸いポインタのみが表示される
    linearGauge.ValueFontSize = 1;
    linearGauge.PointerColor = Color.FromHex("#b50f52");
    linearGauge.ValueTextColor =  linearGauge.PointerColor;

    // アニメーション設定を変更
    linearGauge.LoadAnimation.StartDelay = 1000;
    // 値を表示する際のアニメーション効果時間
    linearGauge.LoadAnimation.Duration = 4000;
    // アニメーション効果のイージング関数を設定
    linearGauge.LoadAnimation.Easing = Easing.BounceOut;

    //StackLayoutのレイアウトを作成してContentに設定
    Content = new StackLayout
    {
        VerticalOptions = LayoutOptions.Center,
        HorizontalOptions = LayoutOptions.FillAndExpand,
        Orientation = StackOrientation.Vertical,
        Children = { new Label() {Text = "右向き横方向に表示",HorizontalTextAlignment = TextAlignment.Center}, 
            linearGauge}
    };
}

下図は上記コードの動作例です。表示時にアニメーション効果を設定することもできます。



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