LinearGauge クイックスタート

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

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

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

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

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

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

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

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

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

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

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

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

C#	コードのコピー
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; C1LinearGauge linearGauge; public override void ViewDidLoad() { base.ViewDidLoad(); this.EdgesForExtendedLayout = UIRectEdge.None; linearGauge = new C1LinearGauge(); linearGauge.Value = DefaultValue; linearGauge.Thickness = 0.1; linearGauge.Min = DefaultMin; linearGauge.Max = DefaultMax; linearGauge.ShowRanges = true; linearGauge.PointerColor = UIColor.Blue; this.View.BackgroundColor = linearGauge.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; //範囲をゲージに追加する linearGauge.Ranges.Add(low); linearGauge.Ranges.Add(med); linearGauge.Ranges.Add(high); this.Add(linearGauge); } public override void ViewDidLayoutSubviews() { base.ViewDidLayoutSubviews(); linearGauge.Frame = new CGRect(this.View.Frame.X, this.View.Frame.Y, this.View.Frame.Width, this.View.Frame.Height / 6); } } }

コードのコピー

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;

        C1LinearGauge linearGauge;
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.EdgesForExtendedLayout = UIRectEdge.None;
            linearGauge = new C1LinearGauge();
            linearGauge.Value = DefaultValue;
            linearGauge.Thickness = 0.1;
            linearGauge.Min = DefaultMin;
            linearGauge.Max = DefaultMax;
                        linearGauge.ShowRanges = true;
            linearGauge.PointerColor = UIColor.Blue;
            this.View.BackgroundColor = linearGauge.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;

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

    }
}

先頭に戻る

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

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

先頭に戻る