RadialGauge クイックスタート

このセクションでは、iOS アプリに C1RadialGauge コントロールを追加し、コントロールに値を設定する方法について説明します。Xamarin コントロールを追加する方法については、「新しい Xamarin.iOS アプリの作成」を参照してください。

このトピックは 2 つの手順で構成されます。

手順 1：RadialGauge コントロールの追加
手順 2：アプリケーションの実行

次の図は、上記の手順を実行した後の RadialGauge を示しています。

手順 1：RadialGauge コントロールの追加

value プロパティは、Gauge の値を示します。1 つのゲージに複数の範囲を追加し、範囲の min および max プロパティで範囲の位置を定義します。ゲージの isReadOnly プロパティを false に設定すると、ユーザーはゲージをタップして値を編集できます。

StartAngle プロパティは RadialGauge の開始角度、SweepAngle プロパティは RadialGauge の弧の長さを表す角度を指定します。これらのプロパティを使用して、円形ゲージの円弧の開始点と終了点を指定できます。両方のプロパティの角度は、9 時の位置から時計回りに測定されます。sweepAngle が負の場合は、反時計回りに形成されます。

また、RadialGauge には autoScale プロパティがあります。このプロパティを true に設定すると、中の要素が収まるように RadialGauge が自動的に拡大縮小します。

メモ：Origin プロパティを使用して、Gauge ポインタの原点を変更できます。デフォルトでは、origin は 0 に設定されています。

C# で RadialGauge コントロールを初期化するには、次の手順を実行します。

ビューで RadialGauge コントロールを追加します

ソリューションエクスプローラ で、MainStoryboard をクリックしてストーリーボードエディタを開きます。
ストーリーボードエディタの右端のペインで、ツールバーのアイコンをクリックして Identity inspector を開きます。
Custom Class の下で、ドロップダウンを使用してクラスを UI View から RadialGauge に変更します。

コードで RadialGauge コントロールを初期化します

RadialGauge コントロールを初期化するには、ソリューションエクスプローラから ViewController.cs ファイルを開き、その内容を次のコードで置き換えます。これは、RadialGauge を初期化するために、View コントローラの viewDidLoad メソッドをオーバーライドします。

Example Title	コードのコピー
using C1.iOS.Gauge; using CoreGraphics; using System; using UIKit; namespace GaugeTest { public partial class ViewController : UIViewController { public ViewController(IntPtr handle) : base(handle) { } private const double DefaultValue = 25; private const double DefaultMin = 0; private const double DefaultMax = 100; C1RadialGauge radialGauge; public override void ViewDidLoad() { base.ViewDidLoad(); this.EdgesForExtendedLayout = UIRectEdge.None; radialGauge = new C1RadialGauge(); radialGauge.Value = 35; radialGauge.Min = 0; radialGauge.Max = 100; radialGauge.StartAngle = -20; radialGauge.SweepAngle = 220; radialGauge.AutoScale = true; radialGauge.ShowText = GaugeShowText.None; radialGauge.PointerColor = UIColor.Blue; radialGauge.ShowRanges = true; View.BackgroundColor = radialGauge.BackgroundColor = UIColor.White; GaugeRange low = new GaugeRange(); GaugeRange med = new GaugeRange(); GaugeRange high = new GaugeRange(); //範囲をカスタマイズする low.Color = UIColor.Red; low.Min = 0; low.Max = 40; med.Color = UIColor.Yellow; med.Min = 40; med.Max = 80; high.Color = UIColor.Green; high.Min = 80; high.Max = 100; //範囲をゲージに追加する radialGauge.Ranges.Add(low); radialGauge.Ranges.Add(med); radialGauge.Ranges.Add(high); this.Add(radialGauge); } public override void ViewDidLayoutSubviews() { base.ViewDidLayoutSubviews(); radialGauge.Frame = new CGRect(this.View.Frame.X, this.View.Frame.Y, this.View.Frame.Width, this.View.Frame.Height / 6); } } }

Example Title

コードのコピー

using C1.iOS.Gauge;
using CoreGraphics;
using System;
using UIKit;
namespace GaugeTest
{
    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }
        private const double DefaultValue = 25;
        private const double DefaultMin = 0;
        private const double DefaultMax = 100;

        C1RadialGauge radialGauge;
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.EdgesForExtendedLayout = UIRectEdge.None;
            radialGauge = new C1RadialGauge();
            radialGauge.Value = 35;
            radialGauge.Min = 0;
            radialGauge.Max = 100;
            radialGauge.StartAngle = -20;
            radialGauge.SweepAngle = 220;
            radialGauge.AutoScale = true;
            radialGauge.ShowText = GaugeShowText.None;
            radialGauge.PointerColor = UIColor.Blue;
            radialGauge.ShowRanges = true;
            View.BackgroundColor = radialGauge.BackgroundColor = UIColor.White;

            GaugeRange low = new GaugeRange();
            GaugeRange med = new GaugeRange();
            GaugeRange high = new GaugeRange();

            //範囲をカスタマイズする
            low.Color = UIColor.Red;
            low.Min = 0;
            low.Max = 40;
            med.Color = UIColor.Yellow;
            med.Min = 40;
            med.Max = 80;
            high.Color = UIColor.Green;
            high.Min = 80;
            high.Max = 100;

            //範囲をゲージに追加する
            radialGauge.Ranges.Add(low);
            radialGauge.Ranges.Add(med);
            radialGauge.Ranges.Add(high);
            this.Add(radialGauge);
        }
        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();
            radialGauge.Frame = new CGRect(this.View.Frame.X, this.View.Frame.Y,
            this.View.Frame.Width, this.View.Frame.Height / 6);
        }
    }
}

先頭に戻る

手順 2：アプリケーションの実行

F5 を押してアプリケーションを実行します。

先頭に戻る