- Home /
Auto Scroll To Selected Button in Grid When Outside Viewport
I have a grid setup which has items spawned into it.
The items have a lambda expression on them that calls an EventTrigger when Selected, like so.
EventTrigger.Entry eT = new EventTrigger.Entry();
eT.eventID = EventTriggerType.Select;
eT.callback.AddListener((eventData) => { SnapTo(g.GetComponent<RectTransform>()); });
g.GetComponent<EventTrigger>().triggers.Add(eT);
I have a method SnapTo, which moves to the selected gameobject.
public void SnapTo(RectTransform target)
{
Canvas.ForceUpdateCanvases();
inventoryContentPanel.anchoredPosition =
(Vector2)inventoryScrollRect.transform.InverseTransformPoint(inventoryContentPanel.position)
- (Vector2)inventoryScrollRect.transform.InverseTransformPoint(target.position);
}
However I'd like to only SnapTo when the selected item is outside the scroll views viewport, that's what makes it tricky. As if it's visible within the viewport and not being masked it should simply select it without scrolling.
Real Game Example : https://www.youtube.com/watch?v=k49kXZ2lFZs&ab_channel=AdamTheD
Is there an easy way to do this, or even an asset/plugin I can use instead?
EDIT : I found an easy way to tell if the selected object is outside of the viewport. Now I just need help figuring out how to push the out of view selection into view.
public void SnapTo(RectTransform target)
{
int index = inventoryChildrenList.IndexOf(target.gameObject);
RectTransform rect = inventoryChildrenList[index].GetComponent<RectTransform>();
Vector2 v = rect.position;
bool inView = RectTransformUtility.RectangleContainsScreenPoint(inventoryScrollRectTransform, v);
if (!inView)
{
}
}
Answer by Razputin · May 17, 2021 at 01:34 PM
Here is my solution for those struggling in the future... basically after you determine if it's visible with RectTransformUtility.RectangleContainsScreenPoint, you compare the last entry you had selected with the next entry you're selecting. If the next entry is higher up than the current one, move the content panel down. If it's lower, than move the content panel up.
public void SnapTo(RectTransform target)
{
int index = inventoryChildrenList.IndexOf(target.gameObject); //Inventory Children List contains all the Children of the ScrollView's Content. We are getting the index of the selected one.
RectTransform rect = inventoryChildrenList[index].GetComponent<RectTransform>(); //We are getting the RectTransform of the selected Inventory Item.
Vector2 v = rect.position; //We are getting the Position of the Selected Inventory Item's RectTransform.
bool inView = RectTransformUtility.RectangleContainsScreenPoint(inventoryScrollRectTransform, v); //We are checking if the Selected Inventory Item is visible from the camera.
float incrimentSize = rect.rect.height; //We are getting the height of our Inventory Items
if (!inView) //If the selected Item is not visible.
{
if (oldRect != null) //If we haven't assigned Old before we do nothing.
{
if (oldRect.localPosition.y < rect.localPosition.y) //If the last rect we were selecting is lower than our newly selected rect.
{
inventoryContentPanel.anchoredPosition += new Vector2(0, -incrimentSize); //We move the content panel down.
}
else if (oldRect.localPosition.y > rect.localPosition.y) //if the last rect we were selecting is higher than our newly selected rect.
{
inventoryContentPanel.anchoredPosition += new Vector2(0, incrimentSize); //We move the content panel up.
}
}
}
oldRect = rect; //We assign our newly selected rect as the OldRect.
}
Your answer
Follow this Question
Related Questions
Scroll view using Mesh 2 Answers
[Solved] need help regarding autolayout in scrollrect 1 Answer
How to limit scrolling at same position not depending on aspect ratio 0 Answers
Nested Scroll Views: How can I pass drag control from an inner scroll view to its outer scroll view? 2 Answers
how do I scroll thru a array 2 Answers