- Home /
How do I close a ui panel when a tap occurs outside of the panel area?
I've checked the "MaskableGraphic" input callbacks, nothing is being triggered. I'd like to have a panel be closed when the user taps/clicks outside of the panel area.
I understand that a "ui panel" is not a "real" object in 4.6, but the idea is that I have a window type that is compromised of images/game objects/etc.
I think it'll have something to do with the On Click () method. I'm not too sure, but I do know that with the Buttons themselves, you can deactivate them while clicking a different button. Perhaps if you threw an [x] button in the panel (if possible). And that'll close this Panel by using the On Click () in the [x] button method by choosing the Panel GameObject, from the drop down menu choose GameObject>SetActive(bool). Then a toggle box will show up; make sure that's unchecked.
You could try making an invisible panel that covers the screen that is behind the panel you want to close. Then you can make a script that will disable that panel you want to close when you click on it.
@Firedan1176 that was one idea I had. That might even be "cleaner" than trying catch all input.
I actually posted this as an answer, but however it seems to be awaiting by a moderator and they take forever, so this is the actual fix you may be waiting for:
:)
Been messing with the UI Panels. Alright, within your UI Panel, what you want to do, is click Add Component>Event Trigger. Add a Deselect $$anonymous$$ethod. While in Deselect>All>UI Panel Game Object (whatever you have named your Panel), from the drop down menu click GameObject>Set Active(bool)>Toggle Box Deselected. (Okay, first have to click the panel itself before you click outside the panel for it to deactivate itself. Hope this works for you mann.
@je$$anonymous$$ that seemed really promising... I got it working once. I tried a few different game objects, and then even another scene and couldn't get it to work again. I'm sure there's something I'm missing. :/
Answer by jeThomas · Oct 26, 2014 at 05:07 AM
Alright, I've come up with a solution for you :)
Been messing with the UI Panels. Alright, within your UI Panel, what you want to do, is click Add Component>Event Trigger. Add a Deselect Method. While in Deselect>All>UI Panel Game Object (whatever you have named your Panel), from the drop down menu click GameObject>Set Active(bool)>Toggle Box Deselected. (Okay, first have to click the panel itself before you click outside the panel for it to deactivate itself. Hope this works for you mann.
Broh, you are one freaking wizerd. Rather than doing calculations which costs memory and so.
And on top of it, if you want the panel to be selected when it is enabled ( so you dont have to click on the panel to select it) you can use this short sample :
public class UIElementSelected : $$anonymous$$onoBehaviour
{
EventSystem eventSystem;
private void Awake()
{
eventSystem = FindObjectOfType<EventSystem>();
}
private void OnEnable()
{
eventSystem.SetSelectedGameObject(this.gameObject);
}
}
But this will not allow buttons to be clicked on the panel. So I found a forum with a more suitable answer for me : https://forum.unity.com/threads/ui-detect-a-click-anywhere-except-on-the-ui.516546/
Actually this works.... just change one thing to get the buttons working.
When you click a button on the panel, Unity thinks you're deselecting that panel and turns it off. But Unity also knows you're clicking the button. Why doesn't it call the button? Because it's turned off the panel before your button code has run.
Instead of having the panel's Unity Event set the GameObject active to false, have it run a function that turns off the panel the next frame. Here's an example of the function you can call:
public void turnOffPanel(GameObject thisObj)
{
StartCoroutine(turnOffPanel_$$anonymous$$ethod(thisObj));
}
IEnumerator turnOffPanel_$$anonymous$$ethod(GameObject thisObj)
{
yield return new WaitForSeconds(.01f);
thisObj.SetActive(false);
}
And then, drag any panel to turn off in the Event Trigger area, on the function you just added.
Answer by judy3turn · Jan 13, 2015 at 10:13 PM
Why not just disable the panel as a game object - that is how I've been managing them and it works great so far. I was here looking for an answer to another question but thought I'd mention this is working for me.
Answer by hiyuch · Sep 03, 2015 at 02:50 PM
Here is my panel script:
public class PanelMaskScript : MonoBehaviour ,IPointerDownHandler {
public void OnPointerDown(PointerEventData eventData) { this.gameObject.SetActive(false);
}
}
Answer by daveinpublic · Jan 10, 2021 at 09:28 PM
I found this page and read through the all the answers, and will condense the answer here.
Solution:
Turn off a panel when clicking away from it
(This works with panels that have clickable buttons on it. If you have no buttons within the panel, you can do this a simpler way.)
1 On the panel that needs to turn off when you tap away from it, add a component called 'Event Trigger'. Choose 'Add New Event Type'. Choose 'Deselect.' This tell Unity to run a function if you click outside of the element. Next, we make the function that will run.
2 The function to turn off the panel will run in the next frame. You don't want it to turn off the panel during this frame, because the clickable buttons within the panel won't run if it's already off. Example function:
public void turnOffNextFrame(GameObject thisObj)
{
StartCoroutine(turnOffNextFrame_Method(thisObj));
}
IEnumerator turnOffNextFrame_Method(GameObject thisObj)
{
yield return new WaitForSeconds(.01f);
thisObj.SetActive(false);
}
This function needs to be chosen on the 'Event Trigger' under 'Deselect'. Then, you can drag the panel to turn off onto the opening that you get in the 'Deselect' area.
3 In order for Unity Events to consider the panel 'Deselected' when you click away from it, it has to be considered selected first. And the end user may never click on the panel before clicking away. So, you can automatically select the panel when it becomes active with this script:
public class UIElementSelected : $$anonymous$$onoBehaviour
{
EventSystem eventSystem;
private void Awake()
{
eventSystem = FindObjectOfType<EventSystem>();
}
private void OnEnable()
{
eventSystem.SetSelectedGameObject(this.gameObject);
}
}
Place this script on the panel that will be turned off.
Your answer
Follow this Question
Related Questions
A node in a childnode? 1 Answer
How to have no alignment 4.6 GUI 0 Answers
Unity 4.6B UI Scrollbar Usage 1 Answer
unity 4.6 button functions? 1 Answer
Change All (new) UI Text Font? 3 Answers