버튼

Button 요소를 사용하여 UI에서 클릭 가능한 버튼을 만들 수 있습니다. 예를 들어 사용자가 Button 요소를 클릭하거나 탭하면 새 창 열기, 양식 제출 또는 음향 효과 재생과 같은 작업 또는 이벤트가 트리거됩니다.

버튼 생성

UI 빌더, UXML 또는 C#을 사용하여 버튼을 생성할 수 있습니다. 다음 C# 예시에서는 레이블이 있는 버튼을 생성합니다.

var button = new Button(() => { Debug.Log("Button clicked"); }) { text = "Click me" };

버튼에 아이콘 추가

프로젝트에 있는 아이콘(예: 텍스처, 렌더 텍스처, 스프라이트, 벡터 이미지 에셋)을 포함하여 버튼의 시각적 인상을 향상할 수 있습니다. 이미지 에셋을 참조하는 상세한 방법은 에셋을 참조하십시오.

UI 빌더로 버튼 아이콘을 추가하는 방법은 다음과 같습니다.

• 버튼의 인스펙터 탭에서 아이콘 이미지 드롭다운 목록에서 원하는 아이콘을 선택합니다.
• 또는 Assets 창의 아이콘을 버튼의 인스펙터 탭에 있는 Icon Image 필드로 드래그합니다.

UXML을 사용하여 버튼 아이콘을 추가하려면 다음과 같이 이미지 소스를 icon-image 속성에 제공합니다.

<ui:Button name="Button" text="Button text" icon-image="/path/to/image-file.png" />

C#을 사용하여 버튼 아이콘을 추가하려면 이미지 소스를 iconImage 프로퍼티에 할당합니다.

Button myButton = new Button();
var buttonIconImage = Resources.Load<Texture2D>("image-file");

myButton.text = "Button text";
myButton.iconImage = buttonIconImage;

버튼 아이콘 위치 변경

버튼에 아이콘을 추가하면 버튼에 두 개의 읽기 전용 하위 요소가 추가됩니다.

• 아이콘 이미지를 정의하는 이미지 요소입니다.
• 버튼 텍스트를 정의하는 TextElement입니다.

하위 요소는 편집할 수 없지만 버튼 요소의 USS flex-direction 프로퍼티를 사용하여 레이아웃을 변경할 수 있습니다. 기본적으로 아이콘은 버튼 텍스트 왼쪽에 추가됩니다.

버튼 아이콘의 위치를 변경하려면 다음과 같이 버튼의 flex-direction을 조정합니다.

• 버튼 텍스트의 오른쪽으로 아이콘을 옮기려면 row-reverse로 설정합니다.
• 버튼 텍스트 위로 아이콘을 옮기려면 column으로 설정합니다.
• 버튼 텍스트 아래에 아이콘을 배치하려면 column-reverse로 설정합니다.

Button의 하위 요소 사용

Button 요소를 사용하면 text, iconImage 프로퍼티 및 background-image 스타일 프로퍼티로 사용자에게 추가 정보를 제공할 수 있습니다. 다른 시각적 요소와 마찬가지로, 버튼 요소의 모양과 동작을 보다 세밀하게 제어하고 싶다면 버튼의 계층 구조에 레이블이나 이미지와 같은 하위 요소를 추가하여 사용자에게 추가 정보를 제공할 수도 있습니다.

일반적으로 다음 상황에서 하위 요소를 사용합니다.

• 커스터마이징: 하위 요소를 사용하면 각 개별 요소의 모양과 동작을 개별적으로 커스터마이즈할 수 있습니다. 예를 들어 레이블 텍스트에 커스텀 폰트나 컬러를 사용하거나 이미지에 특정 애니메이션을 추가할 수 있습니다. 버튼에 이미지 요소를 추가하면 씬에서 해당 요소를 직접 추가할 수 있습니다. 또한 이미지 요소는 스케일 모드와 반복 모드도 지원합니다.
• 동적 콘텐츠: 레이블 또는 이미지의 콘텐츠가 동적인 경우 하위 요소를 사용하면 버튼의 다른 프로퍼티에 영향을 주지 않으면서 각 요소의 콘텐츠를 개별적으로 업데이트할 수 있습니다.
• 상호작용: 사용자가 버튼의 다른 요소는 클릭하지 않고 레이블만 클릭하여 동작을 트리거하도록 허용하는 등, 버튼 내의 특정 요소에 상호 작용을 추가하려는 경우 하위 요소를 사용하면 됩니다.

프로퍼티는 다음 목적으로 사용합니다.

• 간단한 디자인: 버튼의 디자인이 단순하고 커스터마이징이나 동적 콘텐츠가 필요하지 않은 경우 프로퍼티를 사용하는 것이 좋습니다.
• 성능: UI에 버튼이 많은 경우 각 버튼에 하위 요소를 사용하면 성능에 부정적인 영향을 줄 수 있습니다. 이 경우 프로퍼티를 사용하여 버튼의 모양을 설정하는 것이 더 효율적입니다.
• 일관성: UI 전체에서 일관성을 유지하려는 경우 프로퍼티를 사용하여 모든 버튼의 모양과 동작을 일관성 있게 유지할 수 있습니다.

예제

다음 UXML 예시는 버튼을 생성합니다.

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <Button text="UXML Button" name="the-uxml-button" />
</UXML>

다음 C# 예시는 버튼의 커스터마이즈 가능한 기능 중 일부를 나타냅니다.

/// <sample>
// Action to perform when button is pressed.
// Toggles the text on all buttons in 'container'.
Action action = () =>
{
    container.Query<Button>().ForEach((button) =>
    {
        button.text = button.text.EndsWith("Button") ? "Button (Clicked)" : "Button";
    });
};

// Get a reference to the Button from UXML and assign it its action.
var uxmlButton = container.Q<Button>("the-uxml-button");
uxmlButton.RegisterCallback<MouseUpEvent>((evt) => action());

// Create a new Button with an action and give it a style class.
var csharpButton = new Button(action) { text = "C# Button" };
csharpButton.AddToClassList("some-styled-button");
container.Add(csharpButton);
/// </sample>

Unity에서 이 예시를 실시간으로 실행하려면 Window > UI Toolkit > Samples로 이동하십시오.

C# 기본 클래스 및 네임스페이스

C# 클래스: Button
네임스페이스: UnityEngine.UIElements
기본 클래스: TextElement

구성원 UXML 속성

이 요소에는 다음 구성원 속성이 있습니다.

상속 UXML 속성

이 요소는 다음 속성을 해당 기본 클래스에서 상속합니다.

이 요소는 또한 다음 속성을 VisualElement에서 상속합니다.

USS 클래스

다음 표는 모든 C# 공용 프로퍼티 이름과 관련 USS 선택자의 리스트입니다.

또한 인스펙터 또는 UI 툴킷 디버거의 매칭 선택자 섹션을 사용하여 해당 계층 구조의 모든 레벨에서 VisualElement 컴포넌트에 영향을 주는 USS 선택자를 확인할 수도 있습니다.

추가 리소스

• Image
• TextElement
• ToggleButtonGroup