Unityの既存UIだけで棒グラフを作る(5)
今回はスライドするグラフの上に基準となるグラフを配置して、グラフを比較しやすくします。
前回までの分は以下からみてください
スクリプトをかく準備
まずScroll Viewの孫コンポーネントのContent (Viewportの中)を複製します。右クリックでDuplicateを選択すれば複製できます。名前をBaseContentに変更しておきます。
スクリプト
次に新しいScriptを作り、名前をBaseGraphにします。
BaseGraphのスクリプトを以下のようにします。基本的にGraphのスクリプトと同じです。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class BaseGraph : MonoBehaviour
{
[SerializeField]
private GameObject baseContent;
[SerializeField]
private GameObject graphBar;
private GameObject[] instances = new GameObject[100];
// Start is called before the first frame update
void Start()
{
//棒グラフの値
float xValue = 0.5f;
//graphBar の生成
instances[0] = Instantiate<GameObject>(graphBar);
instances[0].transform.parent = baseContent.transform;
instances[0].name = "Base";
//bar の長さの変更
GameObject bar = GameObject.Find("Base");
bar.GetComponent<Slider>().value = xValue; //intであればfloatに変換する
// X_LavelをText に出力
GameObject x_lavel = bar.gameObject.transform.Find("Background/X_Lavel").gameObject;
x_lavel.GetComponent<Text>().text = "Ave";
//DataをText に出力
if (xValue >= 0.15) //どちらのTextに出力するかifで分岐
{
GameObject data = bar.gameObject.transform.Find("Handle Slide Area/Handle/Data").gameObject;
data.GetComponent<Text>().text = xValue + "%";
}
else
{
GameObject data = bar.gameObject.transform.Find("Handle Slide Area/Handle/DataUp").gameObject;
data.GetComponent<Text>().text = xValue + "%";
}
}
// Update is called once per frame
void Update()
{
}
}
スクリプトができたらGameObjectにドロップします。その後BaseContent、Sliderをそれぞれドロップします。
最後に調整
最後にContentかBaseContentのHorizontal Layout GroupのPadding/Leftを調整します。
大きさの感覚がわかりにくければ、再生ボタンを押しながら変えていく方法もあります。
ぎこちない動画になってしまいましたが(笑)これで調整すれば完成です。
再生ボタンを押してから調整すると、停止した時に元に戻ってしまいます。その点は最後に値を変更し忘れないように注意してください。
完成したグラフの動画
最後に改めて完成したグラフの動画です。
まだまだプログラミング初心者ですので、ご意見、アドバイス等もらえると嬉しいです。よろしくい願いします。
Unityの既存UIだけで棒グラフを作る まとめ
リンクを以下にまとめました。
⬇︎僕が書いたプログラミング関連の記事です