LinearGauge クイックスタート

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

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

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

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

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

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

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

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

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

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

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

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

Swift
Objective-C
C#

import XuniCoreKit
import XuniGaugeKit

class ViewController: UIViewController {
   override func viewDidLoad()
    {
        super.viewDidLoad()
            //ビューを読み込んだ後の追加セットアップを行います（通常は nib から）。
        let linearGauge = XuniLinearGauge()
        
        linearGauge.isReadOnly = false
        linearGauge.tag = 1
        linearGauge.showText = XuniShowText.None
        
        linearGauge.min = 0
        linearGauge.max = 100
        linearGauge.value = 35
        linearGauge.showRanges = true
        linearGauge.pointerColor = UIColor.blueColor()
        
        //範囲を作成します。
        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()
        
        //範囲を追加します。   
        linearGauge.ranges .addObject(lower)
        linearGauge.ranges .addObject(middle)
        linearGauge.ranges .addObject(upper)
        self.view.addSubview(linearGauge)
    }
    
    override func viewDidLayoutSubviews()
    {
        super.viewDidLayoutSubviews()
        let linearGauge = self.view.viewWithTag(1) as? XuniLinearGauge
        let rect = CGRect(x: 100, y: 100, width: 300, height: 50)
        
        linearGauge?.frame = rect
    }
}

#import "ViewController.h"
#import "XuniGaugeKit/XuniGaugeKit.h"

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];   
    XuniLinearGauge *linearGauge;
        
    linearGauge = [[XuniLinearGauge alloc] initWithFrame:CGRectMake(0, 250, 250, 200)];
    linearGauge.tag = 1;
    linearGauge.showText = ShowTextNone;
    linearGauge.thickness = 0.02;
    linearGauge.min = 0;
    linearGauge.max = 100;
    linearGauge.value = 35;    
    linearGauge.showRanges = true;
    linearGauge.pointerColor = [UIColor blueColor];

    //範囲を作成します。
    XuniGaugeRange* lower = [[XuniGaugeRange alloc] initWithGauge:linearGauge];
    lower.min = 0;
    lower.max = 40;
    lower.color = [UIColor redColor];
    XuniGaugeRange* middle = [[XuniGaugeRange alloc] initWithGauge:linearGauge];
    middle.min = 40;
    middle.max = 80;
    middle.color = [UIColor yellowColor];
    XuniGaugeRange* upper = [[XuniGaugeRange alloc] initWithGauge:linearGauge];
    upper.min = 80;
    upper.max = 100;
    upper.color = [UIColor greenColor];
        
    //範囲を追加します。
    [linearGauge.ranges addObject:lower];
    [linearGauge.ranges addObject:middle];
    [linearGauge.ranges addObject:upper];
    [self.view addSubview:linearGauge];
}

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


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

            //LinearGauge をインスタンス化し、プロパティを設定します
            XuniLinearGauge gauge = new XuniLinearGauge();
            gauge.Value = 35;
            gauge.Thickness = 0.1;
            gauge.Min = 0;
            gauge.Max = 100;
            gauge.Direction = GaugeDirection.GaugeDirectionRight;
            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;

            //範囲を Gauge に追加します
            gauge.Ranges.Add(low);
            gauge.Ranges.Add(med);
            gauge.Ranges.Add(high);
        }

先頭に戻る

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

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

先頭に戻る