UIElement 사항 1

이 문장의 대상
· UIElement과 지금까지의 Editor 확장의 차이점을 알고 싶습니다.
· Editor 확장은 해봤지만 UIElement을 접한 사람은 전혀 없음
전제 지식
Editor를 통해 Horizontal과 Vertical의 행동을 아는 사람
얻은 견식
· UIElement에서는 지금까지 Editor가 확장한 UI 제작 방법과 다름
개발 환경
・Unity 2019.1.0f2
저번 보도
Unity 2019 UIElement을 만졌습니다.일의 시작 전 단계
https://qiita.com/herieru/items/a32fefd3a35ddedfe3e6
UIElement에 관해서는 아마도 대체로 알 수 있을 것이다.
지금까지 Editor의 확장과 다름
차이를 파악하기 위해서는 Editor의 확장을 알아야 합니다.
Editor 확장 정보
지금까지의 Editor 확장은 다음과 같은 제작이 기본입니다.
· 윈도 왼쪽 상단에서 차례대로 UI를 만든다.
• 세로 배열과 가로 배열을 조합하려면 (소스에) 구별하기 어렵다
• 드로잉 범위를 지정해도 조정 어려움
이는 구성된 UI가 세로로 정렬되어 있기 때문에 정렬을 변경하려면 특정 함수를 번들로 묶어야 합니다.
예를 들어, 다음 UI 화면을 만들려는 경우
그림 1

만약 하려고 한다면 아래 그림과 같은 방법이 될 것이다.
그림 2

위의 그림에서 경계선에 둘러싸인 요소는 하나의 블록을 나타낸다.
예를 들어 위에서 두 번째 빨간 상자를 만들 때 아래 코드를 기술해야 한다.

EditorGUILayout.BegineHorizontal();
{
    EditorGUILayout.BegineVertical();
    {
        //ここにテキスト２つと、４つ分描画する処理を記述する。
    }
    EditorGUILayout.EndVertical();
}
EditorGUILayout.EndHorizontal();

더욱이 각 블록에서 시각성을 높이기 위해 간극을 살짝 열려는 경우
요소의 기술에서 빈칸을 비우는 명령을 기술해야 한다.

GUILayout.Labal("文字列");
GUILayout.Space(1f);
GUILayout.Lavel

일반 Editor 확장 요약
기존 Editor 확장을 고려하면
• 구성 요소를 바꾸려면 매우 번거롭다
• 요소 사이의 간격을 여는 것은 매우 번거롭다
・이 모든 것을 원본에 기술해야 합니다.
UIElement 부분은 어떻게 바뀌었습니까?
UI의 구성은 현재 상태를 파악하는 범위 내에서 쉽게 변경될 수 있습니다.가장 큰 변화로 여겨진다.
이전인 경우 이전 Editor 확장 방법을 사용하여 하나의 큰 부품 단위로만 제작 가능
작은 부품을 큰 부품에 겨우 넣을 수밖에 없다.
그리고 위치 조정이 어렵다.
그러나 UIElement에서는 이 부분을 추출할 수 있습니다.
예를 들어, 그림 1과 같은 UI를 만든 경우
요소별 생성
및
위치 조정
단독으로 진행할 수 있습니다.
어떻게 된 거야?
그림 1의 맨 위에서 두 번째 빨간 상자를 재현할 때 아래 코드로 만들 수 있습니다
sample.cs

// Each editor window contains a root VisualElement object
 VisualElement root = rootVisualElement;

//スタイルシートの取得
 var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("使用するussファイルのパス);
if (null != styleSheet)
{
    root.styleSheets.Add(styleSheet);
}


//中に配置するためのもの
VisualElement boxElement = new VisualElement
{
    name = "textBox"
};

boxElement.Add(new Label("文字列"));
boxElement.Add(new Label("文字列"));
boxElement.Add(new Button { text = "ボタン" });


//横向きに配置するためのもの
VisualElement boxHorizontal = new VisualElement
{
    name = "horizontalBox"
};

//横向きの配置を行う層に結合
boxHorizontal.Add(boxElement);

//ウィンドウにその要素の結合
root.Add(boxHorizontal);

sample.uss

/*-- 横方向にするためのもの #の横の名前は、name部分と同一--*/
#horizontaleBox{
    flex-direction: row;　・・横に並べる
}

/*-- テキストボックスの中のVisualElement要素に対して適応--*/
#textBox > VisualElement{
    height:80;   ・・高さ要素
    width:100;   ・・横幅要素
    margin-down:5;・・描画範囲の外側を5隙間を開ける
}

이런 느낌.
원소 부분과 위치 조정 부분은 분리할 수 있다.
또 같은 제작이라면 이를 재활용할 수 있다.
총결산
지금까지 소스에서 요소의 제작과 위치 조정 등 모두 만들어진 것들
요소를 생성하고 스타일시트에서 위치를 조정합니다.