(Unity UI) Quick and Dirty – Settings Panel with Toggle Button

I created a quick & dirty “Settings Panel”. It’s possible to toggle the visibility of the “Settings Panel” with a UI Button. (Button is always visible) At least it is also possible to create more than one panel for settings, keep all the values visible during design-time and make them visible on request during run-time.

Todo:
-Colors
-Images for final buttons
-Test the size of the button
-Other sides? (dynamic?)

First implemented in:
E:\00_today\2016-10-26-files\UNITY_JellyAssetTest_2016-10-26\jelly_cube_test001\Assets\ButtonPanelHideShow.cs

Setup in the Unity Editor (Hierarchy):
mysidemenu_hierarchyforpanelandbuttonineditor

mysidemenu_panelandbuttonineditor

The Script:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using System;

public class ButtonPanelHideShow : MonoBehaviour {
    [SerializeField]private bool inHiddenMode = true;
    public RectTransform assignedPanel;
    private Vector2 panelOpenXY = new Vector2(0f, 0f);
    private Vector2 panelClosedXY = new Vector2(150f,0.0f);

    public RectTransform openCloseButton;
    private Vector2 btnOpenXY = new Vector2(0f, 0f);
    private Vector2 btnClosedXY = new Vector2(150f, 0.0f);

    //public Color32 uiColor; //Not used right now

    public void Awake()
    {
        //Check or Get the Panel we want to controll
        if(assignedPanel == null)
        {
            assignedPanel = GetComponentInParent<RectTransform>();
        }
        if (openCloseButton == null)
        {
            Debug.Log("WARNING Button not assigend!");
        }

        panelClosedXY = assignedPanel.anchoredPosition;
        panelOpenXY   = panelClosedXY;
        panelOpenXY.x = 0;

        btnClosedXY = openCloseButton.anchoredPosition;
        btnOpenXY = btnClosedXY;
        btnOpenXY.x = 0-openCloseButton.sizeDelta.x;

        //Init = allways hidden on start
        inHiddenMode = false;  //Will be switched asap in next fu
        OnClickHideShowButton();
    }
    public void OnClickHideShowButton()
    {
        inHiddenMode = !inHiddenMode;
        if (inHiddenMode)
        {
            assignedPanel.anchoredPosition = panelClosedXY;
            openCloseButton.anchoredPosition = btnClosedXY;
        }
        else
        {
            assignedPanel.anchoredPosition = panelOpenXY;
            openCloseButton.anchoredPosition = btnOpenXY;
        }
    }
}

This example is available as a prefab on the shared dev drive.

Leave a Reply