버전:2021.3+
이 예는 토글의 “스위치와 같은” 배리에이션을 만드는 방법을 보여줍니다.
이 예시에서는 사용자가 마우스, 키보드, 게임패드 및 기타 기기로 플립할 수 있는 토글인 커스텀 컨트롤을 생성합니다.토글이 무엇을 나타내는지 설명할 수 있는 레이블이 함께 제공됩니다.
이 예시에서 생성한 완성된 파일은 이 GitHub 저장소에서 찾을 수 있습니다.
이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.
C# 스크립트로 슬라이드 토글 클래스를 만들고 USS 파일로 스타일링합니다.
3D 템플릿을 사용하여 Unity 프로젝트를 생성합니다.이 예제에서는 3D 템플릿이 더 나은 시각적 효과를 제공합니다.하지만 아무 템플릿이나 사용할 수 있습니다.
slide-toggle
이라는 폴더를 만들어 파일을 저장합니다.
‘slide-toggle’ 폴더에서 ’SlideToggle.cs’라는 이름의 C# 스크립트를 만듭니다.
텍스트 에디터에서 SlideToggle.cs
를 열고 해당 콘텐츠를 다음과 같이 바꿉니다.
using UnityEngine;
using UnityEngine.UIElements;
namespace MyUILibrary
{
// Derives from BaseField<bool> base class.Represents a container for its input part.
public class SlideToggle :BaseField<bool>
{
public new class UxmlFactory :UxmlFactory<SlideToggle, UxmlTraits> { }
public new class UxmlTraits :BaseFieldTraits<bool, UxmlBoolAttributeDescription> { }
// In the spirit of the BEM standard, the SlideToggle has its own block class and two element classes.It also
// has a class that represents the enabled state of the toggle.
public static readonly new string ussClassName = "slide-toggle";
public static readonly new string inputUssClassName = "slide-toggle__input";
public static readonly string inputKnobUssClassName = "slide-toggle__input-knob";
public static readonly string inputCheckedUssClassName = "slide-toggle__input--checked";
VisualElement m_Input;
VisualElement m_Knob;
// Custom controls need a default constructor.This default constructor calls the other constructor in this
// class.
public SlideToggle() : this(null) { }
// This constructor allows users to set the contents of the label.
public SlideToggle(string label) : base(label, null)
{
// Style the control overall.
AddToClassList(ussClassName);
// Get the BaseField's visual input element and use it as the background of the slide.
m_Input = this.Q(className:BaseField<bool>.inputUssClassName);
m_Input.AddToClassList(inputUssClassName);
Add(m_Input);
// Create a "knob" child element for the background to represent the actual slide of the toggle.
m_Knob = new();
m_Knob.AddToClassList(inputKnobUssClassName);
m_Input.Add(m_Knob);
// There are three main ways to activate or deactivate the SlideToggle.All three event handlers use the
// static function pattern described in the Custom control best practices.
// ClickEvent fires when a sequence of pointer down and pointer up actions occurs.
RegisterCallback<ClickEvent>(evt => OnClick(evt));
// KeydownEvent fires when the field has focus and a user presses a key.
RegisterCallback<KeyDownEvent>(evt => OnKeydownEvent(evt));
// NavigationSubmitEvent detects input from keyboards, gamepads, or other devices at runtime.
RegisterCallback<NavigationSubmitEvent>(evt => OnSubmit(evt));
}
static void OnClick(ClickEvent evt)
{
var slideToggle = evt.currentTarget as SlideToggle;
slideToggle.ToggleValue();
evt.StopPropagation();
}
static void OnSubmit(NavigationSubmitEvent evt)
{
var slideToggle = evt.currentTarget as SlideToggle;
slideToggle.ToggleValue();
evt.StopPropagation();
}
static void OnKeydownEvent(KeyDownEvent evt)
{
var slideToggle = evt.currentTarget as SlideToggle;
// NavigationSubmitEvent event already covers keydown events at runtime, so this method shouldn't handle
// them.
if (slideToggle.panel?.contextType == ContextType.Player)
return;
// Toggle the value only when the user presses Enter, Return, or Space.
if (evt.keyCode == KeyCode.KeypadEnter || evt.keyCode == KeyCode.Return || evt.keyCode == KeyCode.Space)
{
slideToggle.ToggleValue();
evt.StopPropagation();
}
}
// All three callbacks call this method.
void ToggleValue()
{
value = !value;
}
// Because ToggleValue() sets the value property, the BaseField class dispatches a ChangeEvent.This results in a
// call to SetValueWithoutNotify().This example uses it to style the toggle based on whether it's currently
// enabled.
public override void SetValueWithoutNotify(bool newValue)
{
base.SetValueWithoutNotify(newValue);
//This line of code styles the input element to look enabled or disabled.
m_Input.EnableInClassList(inputCheckedUssClassName, newValue);
}
}
}
‘slide-toggle’ 폴더에 ’SlideToggle.uss’라는 이름의 USS 파일을 생성합니다.
텍스트 에디터에서 SlideToggle.uss
를 열고 해당 콘텐츠를 다음과 같이 바꿉니다.
.slide-toggle__input {
background-color: var(--unity-colors-slider_groove-background);
max-width:25px;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
overflow: visible;
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-bottom-width:1px;
border-right-color: var(--unity-colors-slider_thumb-border);
border-top-color: var(--unity-colors-slider_thumb-border);
border-bottom-color: var(--unity-colors-slider_thumb-border);
max-height:16px;
margin-top:10px;
border-left-color: var(--unity-colors-slider_thumb-border);
transition-property: background-color;
transition-duration:0.5s;
}
.slide-toggle__input-knob {
height:16px;
width:16px;
background-color: var(--unity-colors-slider_thumb-background);
position: absolute;
border-top-left-radius:25px;
border-bottom-left-radius:25px;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
top:-1px;
transition-property: translate, background-color;
transition-duration:0.5s, 0.5s;
translate:-1px 0;
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-bottom-width:1px;
border-left-color: var(--unity-colors-slider_thumb-border);
border-right-color: var(--unity-colors-slider_thumb-border);
border-top-color: var(--unity-colors-slider_thumb-border);
border-bottom-color: var(--unity-colors-slider_thumb-border);
}
.slide-toggle__input--checked {
background-color: rgb(0, 156, 10);
}
.slide-toggle__input--checked > .slide-toggle__input-knob {
translate:8px 0;
}
.slide-toggle:focus .slide-toggle__input-knob {
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-bottom-width:1px;
border-left-color: var(--unity-colors-input_field-border-focus);
border-right-color: var(--unity-colors-input_field-border-focus);
border-top-color: var(--unity-colors-input_field-border-focus);
border-bottom-color: var(--unity-colors-input_field-border-focus);
}
slide-toggle
폴더에 SlideToggleUsage.uxml
이라는 이름의 UI 문서 파일을 생성합니다.SlideToggleUsage.uxml
을 엽니다.SlideToggle.uss
를 추가합니다.SlideToggleUsage.uxml
을 Inspector의 Source Asset 필드에 드래그합니다.