BulletGraph クイックスタート

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

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

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

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

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

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

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

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

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

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

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

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

Swift
Objective-C
C#

import XuniCoreKit
import XuniGaugeKit

class ViewController: UIViewController {
   override func viewDidLoad()
    {
        super.viewDidLoad()
            //ビューを読み込んだ後の追加セットアップを行います（通常は nib から）。
        let bulletGraph = XuniBulletGraph()
        
        bulletGraph.isReadOnly = false
        bulletGraph.tag = 1
        bulletGraph.min = 0
        bulletGraph.max = 100
        bulletGraph.value = 80
        bulletGraph.direction = XuniGaugeDirection.Right
        bulletGraph.pointerColor = UIColor.blackColor()
        bulletGraph.pointerThickness = 0.5
        bulletGraph.good = 80
        bulletGraph.bad = 50
        bulletGraph.target = 90
        
        self.view.addSubview(bulletGraph)
    }
    
   override func viewDidLayoutSubviews()
    {
        super.viewDidLayoutSubviews()
        let bulletGraph = self.view.viewWithTag(1) as? XuniBulletGraph
        let rect = CGRect(x: 100, y: 100, width: 300, height: 50)
    
        bulletGraph?.frame = rect
    }
}

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

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //ビューを読み込んだ後の追加セットアップを行います。
    XuniBulletGraph *bulletGraph;
    
    bulletGraph = [[XuniBulletGraph alloc] initWithFrame:CGRectMake(0, 250, 250, 200)];
    bulletGraph.value = 80;
    bulletGraph.min = 0;
    bulletGraph.max = 100;
    bulletGraph.thickness = 0.05;
    bulletGraph.direction = XuniGaugeDirectionRight;
    bulletGraph.pointerColor = [UIColor blackColor];
    bulletGraph.good = 100;
    bulletGraph.goodRangeColor = [UIColor lightGrayColor];
    bulletGraph.bad = 50;
    bulletGraph.badRangeColor = [UIColor grayColor];
    bulletGraph.target = 75;
    bulletGraph.targetColor = [UIColor grayColor];
    bulletGraph.pointerThickness = 0.5;   

    [self.view addSubview:bulletGraph];
}

using Xuni.iOS.Gauge;
using Xuni.iOS.Core;
        
        public override void ViewDidLoad()
        {
      base.ViewDidLoad();

//BulletGraph をインスタンス化し、プロパティを設定します
    XuniBulletGraph gauge = new XuniBulletGraph();
    gauge.Value = 80;
    gauge.Min = 0;
    gauge.Max = 100;
    gauge.Thickness = 0.1;
    gauge.Direction = GaugeDirection.GaugeDirectionRight;
    gauge.PointerColor = UIColor.Black;

//Good、Bad、および Target を設定します
    gauge.Good = 100;
    gauge.GoodRangeColor = UIColor.Gray;
    gauge.Bad = 50;
    gauge.BadRangeColor = UIColor.DarkGray;
    gauge.Target = 75;            
    gauge.TargetColor = UIColor.Black;
}

先頭に戻る

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

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

先頭に戻る