[Unity] IOS 느낌의 On/Off 스위치 만들기

728x90

SMALL

이런 느낌의

스위치를 만들어 보도록 하겠습니다.

Swtich Gameobject 아래 background 추가 하고 background 이미지를 넣어줍니다.

그리고 또 하위에스위치 버튼 이미지를 넣어 주고 왼쪽 끝부분으로 맞춥니다.

버튼의 x축 위치를 이동시켜 버튼을 on/off 할 것입니다.

SwitchHandler Script를 새롭게 만들어 Switch Gameojbect에 넣어줍니다.

Script 작성전에, Asse Store에서 DOTween 무료버전을 설치해줍니다.

Window>Package Manager에서 DOTween Import 해줍니다.

그리고 SwitchHandler Script 를 다음과 같이 작성해 줍니다.

using UnityEngine;
using System;
using DG.Tweening;

public class SwitchHandler : MonoBehaviour
{
    private bool switchState = false;
    public GameObject switchBtn;

    public void OnSwitchButtonClicked()
    {
        if (switchState) // OFF
        {
            switchBtn.transform.DOLocalMoveX(-22f, 0.2f).SetRelative();
            switchState = false;
        }
        else // ON
        {
            switchBtn.transform.DOLocalMoveX(22f, 0.2f).SetRelative();
            switchState = true;
        }
    }
    
}

스위치를 x축으로 켤때 22f만큼, 끌때 -22f만큼 이동하겠습니다.

그리고 swtichBtn에 SwitchButton Object를 넣어줍니다.

그리고 Switch와 SwitchButton 오브젝트에 Button Component를 추가하고, OnClick 이벤트에 방금 만든 SwitchHandler OnClick함수를 넣어줍니다.

그럼 스위치가 다음같이 움직이는 것을 볼 수 있습니다.

ON시 background 이미지를 바꿔서 색을 바꿔 보겠습니다.

배경 색을 바꾸어주어도 되지만, 흰색 배경으로 준비를 못해서 이미지로 대체 하였습니다.

using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;

public class SwitchHandler : MonoBehaviour
{
    private bool switchState = false;
    public GameObject switchBtn;
    private GameObject background;
    public Texture on;
    public Texture off;

    void Start()
    {
        background = transform.Find("background").gameObject;
    }
    public void OnSwitchButtonClicked()
    {
        if (switchState) // OFF
        {
            switchBtn.transform.DOLocalMoveX(-22f, 0.2f).SetRelative();
            switchState = false;
            background.GetComponent<RawImage>().texture = off;
        }
        else // ON
        {
            switchBtn.transform.DOLocalMoveX(22f, 0.2f).SetRelative();
            switchState = true;
            background.GetComponent<RawImage>().texture = on;
        }
    }
    
}