4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

XAMLとか知らねぇよ!!C#だけでUIElement式エディタ拡張をする入門~style編~

はじめに

こんにちは、アドベントカレンダー3日目担当の避雷です。今回は先日に引き続きUIElementの調査を進めていきます。
今回はUIに必須なstyleの設定です。前回までの知識だとUIは縦に一つずつ並べるしかなかったのですが、それだと実際のUIを作るには表現力不足です。例えばYes/Noボタンなんかは横並びにしたいときと縦並びにしたいときがあったりしますよね。今回はそういったものに対してstyleを変更して対応していきます。

VisualElement.styleを編集する

VisualElement.styleはmargin、padding、borderline、alignment等のUIのビジュアル的な部分を設定する項目です。VisualElementのstyleを設定する方法はいくつかあります。

//初期化と同時に設定
        VisualElement label = new Label("Hello World! From C#")
            {style = {fontSize = 64,
color = new StyleColor(Color.magenta)}};
//要素ごとに設定
        VisualElement label2 = new Label("Hello World! From C#");
        label2.style.fontSize = 64;
        label2.style.color = new StyleColor(Color.magenta);

image.png
両方同じ描画結果です。
今回は要素ごとに設定することにします。その方が見やすい気がするので。

基本的な設定の紹介

border系

borderColor

ボーダーラインの色を設定します

        VisualElement frame = new VisualElement();
        frame.style.borderColor = new StyleColor(Color.red);

borderWidth

ボーダーラインの太さを設定します

        VisualElement frame = new VisualElement();
        frame.style.borderColor = new StyleColor(Color.red);
        frame.style.borderBottomWidth = 5;
        frame.style.borderTopWidth = 5;
        frame.style.borderRightWidth = 5;
        frame.style.borderLeftWidth = 5;

image.png

borderRadius

ボーダーラインの角の丸さを設定します

        frame.style.borderBottomLeftRadius = 15;
        frame.style.borderBottomRightRadius = 15;
        frame.style.borderTopLeftRadius = 15;
        frame.style.borderTopRightRadius = 15;

image.png

padding margin系

padding

パディングを設定します(ボーダーラインの内側)

        frame.style.paddingTop = 10;
        frame.style.paddingBottom = 10;

image.png

margin

マージンを設定します(ボーダーラインの外側)

        frame.style.paddingTop = 10;
        frame.style.paddingBottom = 10;
        frame.style.marginRight = 10;
        frame.style.marginLeft = 10;

image.png

整列方向系

Flex

子要素の整列方向を設定します

        frame.style.flexDirection = new StyleEnum<FlexDirection>(FlexDirection.Column);
        frame.style.flexDirection = new StyleEnum<FlexDirection>(FlexDirection.Row);

↓Column
image.png

↓Row
image.png

文字系

FontSize

フォントサイズを設定します

        Label label3 = new Label("ABCDEFG");
        label3.style.fontSize = 32;
        root.Add(label3);

image.png

Color

文字色を設定します

        label3.style.color = new StyleColor(Color.green);

image.png

BackgroundColor

背景色を設定

        label3.style.backgroundColor = new StyleColor(Color.magenta);

image.png

先ほどのVisualElementに同様の設定をすると
image.png

こんな感じです。

UnityTextAlign

テキストの基準位置を設定

        label3.style.unityTextAlign = new StyleEnum<TextAnchor>(TextAnchor.LowerRight);

image.png

因みにTextFieldの入力を左上からにするには
unityTextAlign無し
image.png

        foreach (var child in textField.Children())
        {
//子オブジェクトに左上整列を指示
            child.style.unityTextAlign = new StyleEnum<TextAnchor>(TextAnchor.UpperLeft);
        }

とすると
image.png

みたいになる。multilineなら設定必須…?なお現状だと日本語入力が出来ないみたいです(IMEが反応しない)

textField.isPasswordField

trueにするとパスワード用のインプットフィールドになります

 textField.isPasswordField = true;

image.png

おわりに

なんか諦めてUSSとかUMLとか使った方が楽な気がしてきました…C#でもデザインまで出来るということは証明できたのでヨシとしましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?