RadialGauge クイックスタート

このセクションでは、iOS アプリに RadialGauge コントロールを追加し、コントロールに値を設定する方法について説明します。Objective-C で Xuni コントロールを追加する方法については、「Objective-C による Xuni コントロールの追加」を参照してください。

このトピックは 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 に設定されています。

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

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

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

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

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

Swift
Objective-C
C#

import XuniCoreKit
import XuniGaugeKit

class ViewController: UIViewController {
    override func viewDidLoad()
    {
        super.viewDidLoad()
        // ビューを読み込んだ後の追加セットアップを行います（通常は nib から）。
        
        let radialGauge = XuniRadialGauge()
        
        radialGauge.isReadOnly = false
        
        radialGauge.tag = 1
        
        radialGauge.min = 0
        radialGauge.max = 100
        radialGauge.value = 35
        radialGauge.thickness = 0.6
        radialGauge.showText = XuniShowText.None
        radialGauge.showRanges = true
        radialGauge.pointerColor = UIColor.blueColor()
        radialGauge.startAngle = -20
        radialGauge.sweepAngle = 220
        
        // 範囲を作成してカスタマイズします。
        let lower = XuniGaugeRange()
        lower.min = 0
        lower.max = 40
        lower.color = UIColor.redColor()
        
        let middle = XuniGaugeRange()
        middle.min = 40
        middle.max = 80
        middle.color = UIColor.yellowColor()
        
        let upper = XuniGaugeRange()
        upper.min = 80
        upper.max = 100
        upper.color = UIColor.greenColor()
        
        radialGauge.ranges .addObject(lower)
        radialGauge.ranges .addObject(middle)
        radialGauge.ranges .addObject(upper)
        self.view.addSubview(radialGauge)
    }

    override func viewDidLayoutSubviews()
    {
        super.viewDidLayoutSubviews()
        let radialGauge = self.view.viewWithTag(1) as? XuniRadialGauge
        let rect = CGRect(x: 100, y: 100, width: 300, height: 300)
        
        radialGauge?.frame = rect
    }
}

#import "ViewController.h"
#import "XuniGaugeKit/XuniGaugeKit.h"
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // ビューを読み込んだ後の追加セットアップを行います。

 XuniRadialGauge *radialGauge;
   radialGauge = [[XuniRadialGauge alloc] initWithFrame:CGRectMake(20, 100, 250, 250)];
    radialGauge.tag = 2;
    radialGauge.showText = ShowTextNone;
    radialGauge.thickness = 0.6;
    radialGauge.min = 0;
    radialGauge.max = 100;
    radialGauge.value = 35;
    radialGauge.showRanges = true;
    radialGauge.pointerColor = [UIColor blueColor];
    radialGauge.startAngle = -20;
    radialGauge.sweepAngle = 220;
    
    // 範囲を作成してカスタマイズします。
    XuniGaugeRange* lower = [[XuniGaugeRange alloc] initWithGauge:radialGauge];
    lower.min = 0;
    lower.max = 40;
    lower.color = [UIColor redColor];
    XuniGaugeRange* middle = [[XuniGaugeRange alloc] initWithGauge:radialGauge];
    middle.min = 40;
    middle.max = 80;
    middle.color = [UIColor yellowColor];
    XuniGaugeRange* upper = [[XuniGaugeRange alloc] initWithGauge:radialGauge];
    upper.min = 80;
    upper.max = 100;
    upper.color = [UIColor greenColor];

    // 範囲を追加します。
   [radialGauge.ranges addObject:lower];
   [radialGauge.ranges addObject:middle];
   [radialGauge.ranges addObject:upper];
   [self.view addSubview:radialGauge];
}

using Xuni.iOS.Gauge;
using Xuni.iOS.Core;

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

                //RadialGauge をインスタンス化し、プロパティを設定します。
                XuniRadialGauge gauge = new XuniRadialGauge();
                gauge.Value = 35;
                gauge.Min = 0;
                gauge.Max = 100;
                gauge.StartAngle = -20;
                gauge.SweepAngle = 220;
                gauge.AutoScale = true;
                gauge.ShowText = ShowText.ShowTextNone;
                gauge.PointerColor = UIColor.Blue;

                //範囲を作成します。
                XuniGaugeRange low = new XuniGaugeRange();
                XuniGaugeRange med = new XuniGaugeRange();
                XuniGaugeRange high = new XuniGaugeRange();

                //範囲をカスタマイズします。
                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 に追加します。
                gauge.Ranges.Add(low);
                gauge.Ranges.Add(med);
                gauge.Ranges.Add(high);

            }

先頭に戻る

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

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

先頭に戻る