2015-12-23 22:54:32 +08:00
|
|
|
|
/// Credit Mrs. YakaYocha
|
|
|
|
|
/// Sourced from - https://www.youtube.com/channel/UCHp8LZ_0-iCvl-5pjHATsgw
|
|
|
|
|
/// Please donate: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RJ8D9FRFQF9VS
|
|
|
|
|
|
|
|
|
|
using UnityEngine.Events;
|
|
|
|
|
|
|
|
|
|
namespace UnityEngine.UI.Extensions
|
|
|
|
|
{
|
|
|
|
|
[RequireComponent(typeof(ScrollRect))]
|
|
|
|
|
[AddComponentMenu("Layout/Extensions/Vertical Scroller")]
|
|
|
|
|
public class UIVerticalScroller : MonoBehaviour
|
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private float[] distReposition;
|
|
|
|
|
private float[] distance;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2019-02-23 01:05:03 +08:00
|
|
|
|
[Tooltip("desired ScrollRect")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private ScrollRect scrollRect;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
|
|
|
|
[Tooltip("Elements to populate inside the scroller")]
|
|
|
|
|
private GameObject[] arrayOfElements;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2015-12-23 22:54:32 +08:00
|
|
|
|
[Tooltip("Center display area (position of zoomed content)")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private RectTransform center;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2019-02-23 01:05:03 +08:00
|
|
|
|
[Tooltip("Size / spacing of elements")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private RectTransform elementSize;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2020-07-09 03:38:28 +08:00
|
|
|
|
[Tooltip("Scale = 1/ (1+distance from center * shrinkage)")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private Vector2 elementShrinkage = new Vector2(1f / 200, 1f / 200);
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2019-02-23 01:05:03 +08:00
|
|
|
|
[Tooltip("Minimum element scale (furthest from center)")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private Vector2 minScale = new Vector2(0.7f, 0.7f);
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2019-02-23 01:05:03 +08:00
|
|
|
|
[Tooltip("Select the item to be in center on start.")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private int startingIndex = -1;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2019-02-23 01:05:03 +08:00
|
|
|
|
[Tooltip("Stop scrolling past last element from inertia.")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private bool stopMomentumOnEnd = true;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2019-02-23 01:05:03 +08:00
|
|
|
|
[Tooltip("Set Items out of center to not interactible.")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private bool disableUnfocused = true;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2015-12-23 22:54:32 +08:00
|
|
|
|
[Tooltip("Button to go to the next page. (optional)")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private GameObject scrollUpButton;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2015-12-23 22:54:32 +08:00
|
|
|
|
[Tooltip("Button to go to the previous page. (optional)")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private GameObject scrollDownButton;
|
|
|
|
|
|
|
|
|
|
[SerializeField]
|
2015-12-23 22:54:32 +08:00
|
|
|
|
[Tooltip("Event fired when a specific item is clicked, exposes index number of item. (optional)")]
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private UnityEvent<int> onButtonClicked;
|
2015-12-23 22:54:32 +08:00
|
|
|
|
|
2023-01-01 23:57:31 +08:00
|
|
|
|
[SerializeField]
|
|
|
|
|
[Tooltip("Event fired when the focused item is Changed. (optional)")]
|
|
|
|
|
private UnityEvent<int> onFocusChanged;
|
2019-02-23 01:05:03 +08:00
|
|
|
|
|
2023-01-01 23:57:31 +08:00
|
|
|
|
public int FocusedElementIndex { get; private set; }
|
2015-12-23 22:54:32 +08:00
|
|
|
|
|
2023-01-01 23:57:31 +08:00
|
|
|
|
public RectTransform Center { get => center; set => center = value; }
|
2015-12-23 22:54:32 +08:00
|
|
|
|
|
2023-01-01 23:57:31 +08:00
|
|
|
|
public string Result { get; private set; }
|
2015-12-23 22:54:32 +08:00
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
//Scrollable area (content of desired ScrollRect)
|
2023-01-01 23:57:31 +08:00
|
|
|
|
public RectTransform ScrollingPanel{ get { return scrollRect.content; } }
|
2015-12-23 22:54:32 +08:00
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Constructor when not used as component but called from other script
|
|
|
|
|
/// </summary>
|
|
|
|
|
public UIVerticalScroller(RectTransform center, RectTransform elementSize, ScrollRect scrollRect, GameObject[] arrayOfElements)
|
|
|
|
|
{
|
|
|
|
|
this.center = center;
|
|
|
|
|
this.elementSize = elementSize;
|
|
|
|
|
this.scrollRect = scrollRect;
|
2023-01-01 23:57:31 +08:00
|
|
|
|
this.arrayOfElements = arrayOfElements;
|
2019-02-23 01:05:03 +08:00
|
|
|
|
}
|
2015-12-23 22:54:32 +08:00
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Awake this instance.
|
|
|
|
|
/// </summary>
|
2015-12-23 22:54:32 +08:00
|
|
|
|
public void Awake()
|
|
|
|
|
{
|
2019-02-23 01:05:03 +08:00
|
|
|
|
if (!scrollRect)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2019-02-23 01:05:03 +08:00
|
|
|
|
scrollRect = GetComponent<ScrollRect>();
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
2023-01-01 23:57:31 +08:00
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
if (!center)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
|
|
|
|
Debug.LogError("Please define the RectTransform for the Center viewport of the scrollable area");
|
|
|
|
|
}
|
2023-01-01 23:57:31 +08:00
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
if (!elementSize)
|
|
|
|
|
{
|
|
|
|
|
elementSize = center;
|
|
|
|
|
}
|
2023-01-01 23:57:31 +08:00
|
|
|
|
|
|
|
|
|
if (arrayOfElements == null || arrayOfElements.Length == 0)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
var childCount = ScrollingPanel.childCount;
|
|
|
|
|
if (childCount > 0)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
arrayOfElements = new GameObject[childCount];
|
|
|
|
|
for (int i = 0; i < childCount; i++)
|
|
|
|
|
{
|
|
|
|
|
arrayOfElements[i] = ScrollingPanel.GetChild(i).gameObject;
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Recognises and resizes the children.
|
|
|
|
|
/// </summary>
|
|
|
|
|
/// <param name="startingIndex">Starting index.</param>
|
|
|
|
|
/// <param name="arrayOfElements">Array of elements.</param>
|
2023-01-01 23:57:31 +08:00
|
|
|
|
public void UpdateChildren(int startingIndex = -1, GameObject[] arrayOfElements = null)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2019-02-23 01:05:03 +08:00
|
|
|
|
// Set _arrayOfElements to arrayOfElements if given, otherwise to child objects of the scrolling panel.
|
|
|
|
|
if (arrayOfElements != null)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
this.arrayOfElements = arrayOfElements;
|
2019-02-23 01:05:03 +08:00
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
this.arrayOfElements = new GameObject[ScrollingPanel.childCount];
|
|
|
|
|
for (int i = 0; i < ScrollingPanel.childCount; i++)
|
2019-02-23 01:05:03 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
this.arrayOfElements[i] = ScrollingPanel.GetChild(i).gameObject;
|
2019-02-23 01:05:03 +08:00
|
|
|
|
}
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
// resize the elements to match elementSize rect
|
2023-01-01 23:57:31 +08:00
|
|
|
|
for (var i = 0; i < this.arrayOfElements.Length; i++)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
AddListener(arrayOfElements[i], i);
|
|
|
|
|
|
|
|
|
|
RectTransform r = this.arrayOfElements[i].GetComponent<RectTransform>();
|
2019-02-23 01:05:03 +08:00
|
|
|
|
r.anchorMax = r.anchorMin = r.pivot = new Vector2(0.5f, 0.5f);
|
|
|
|
|
r.localPosition = new Vector2(0, i * elementSize.rect.size.y);
|
|
|
|
|
r.sizeDelta = elementSize.rect.size;
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
// prepare for scrolling
|
2023-01-01 23:57:31 +08:00
|
|
|
|
distance = new float[this.arrayOfElements.Length];
|
|
|
|
|
distReposition = new float[this.arrayOfElements.Length];
|
|
|
|
|
FocusedElementIndex = -1;
|
2015-12-23 22:54:32 +08:00
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
// if starting index is given, snap to respective element
|
|
|
|
|
if (startingIndex > -1)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
startingIndex = startingIndex > this.arrayOfElements.Length ? this.arrayOfElements.Length - 1 : startingIndex;
|
2019-02-23 01:05:03 +08:00
|
|
|
|
SnapToElement(startingIndex);
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2023-01-01 23:57:31 +08:00
|
|
|
|
private void AddListener(GameObject button, int index)
|
|
|
|
|
{
|
|
|
|
|
var buttonClick = button.GetComponent<Button>();
|
|
|
|
|
buttonClick.onClick.RemoveAllListeners();
|
|
|
|
|
buttonClick.onClick.AddListener(() => onButtonClicked?.Invoke(index));
|
|
|
|
|
}
|
2015-12-23 22:54:32 +08:00
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
public void Start()
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2019-02-23 01:05:03 +08:00
|
|
|
|
if (scrollUpButton)
|
2023-01-01 23:57:31 +08:00
|
|
|
|
{
|
|
|
|
|
scrollUpButton.GetComponent<Button>().onClick.AddListener(() => ScrollUp());
|
|
|
|
|
}
|
2019-02-23 01:05:03 +08:00
|
|
|
|
if (scrollDownButton)
|
2023-01-01 23:57:31 +08:00
|
|
|
|
{
|
|
|
|
|
scrollDownButton.GetComponent<Button>().onClick.AddListener(() => ScrollDown());
|
|
|
|
|
}
|
|
|
|
|
UpdateChildren(startingIndex, arrayOfElements);
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public void Update()
|
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
if (arrayOfElements.Length < 1)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-01 23:57:31 +08:00
|
|
|
|
for (var i = 0; i < arrayOfElements.Length; i++)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
var arrayElementRT = arrayOfElements[i].GetComponent<RectTransform>();
|
|
|
|
|
|
|
|
|
|
distReposition[i] = center.position.y - arrayElementRT.position.y;
|
2015-12-23 22:54:32 +08:00
|
|
|
|
distance[i] = Mathf.Abs(distReposition[i]);
|
|
|
|
|
|
|
|
|
|
//Magnifying effect
|
2019-02-23 01:05:03 +08:00
|
|
|
|
Vector2 scale = Vector2.Max(minScale, new Vector2(1 / (1 + distance[i] * elementShrinkage.x), (1 / (1 + distance[i] * elementShrinkage.y))));
|
2023-01-01 23:57:31 +08:00
|
|
|
|
arrayElementRT.transform.localScale = new Vector3(scale.x, scale.y, 1f);
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
// detect focused element
|
|
|
|
|
float minDistance = Mathf.Min(distance);
|
2023-01-01 23:57:31 +08:00
|
|
|
|
int oldFocusedElement = FocusedElementIndex;
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < arrayOfElements.Length; i++)
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
arrayOfElements[i].GetComponent<CanvasGroup>().interactable = !disableUnfocused || minDistance == distance[i];
|
2015-12-23 22:54:32 +08:00
|
|
|
|
if (minDistance == distance[i])
|
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
FocusedElementIndex = i;
|
2022-11-27 22:32:16 +08:00
|
|
|
|
#if UNITY_2022_1_OR_NEWER
|
2023-02-04 19:22:31 +08:00
|
|
|
|
var textComponentTxtMeshPro = arrayOfElements[i].GetComponentInChildren<TMPro.TMP_Text>();
|
2022-11-27 22:32:16 +08:00
|
|
|
|
if (textComponentTxtMeshPro != null)
|
|
|
|
|
{
|
2023-02-04 19:22:31 +08:00
|
|
|
|
Result = textComponentTxtMeshPro.text;
|
2022-11-27 22:32:16 +08:00
|
|
|
|
}
|
|
|
|
|
#else
|
2023-01-01 23:57:31 +08:00
|
|
|
|
var textComponent = arrayOfElements[i].GetComponentInChildren<Text>();
|
2022-11-27 22:32:16 +08:00
|
|
|
|
if (textComponent != null)
|
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
Result = textComponent.text;
|
2022-11-27 22:32:16 +08:00
|
|
|
|
}
|
|
|
|
|
#endif
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2023-01-01 23:57:31 +08:00
|
|
|
|
|
|
|
|
|
if (FocusedElementIndex != oldFocusedElement)
|
2019-02-23 01:05:03 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
onFocusChanged?.Invoke(FocusedElementIndex);
|
2019-02-23 01:05:03 +08:00
|
|
|
|
}
|
2015-12-23 22:54:32 +08:00
|
|
|
|
|
2020-10-09 00:07:39 +08:00
|
|
|
|
if (!UIExtensionsInputManager.GetMouseButton(0))
|
2019-02-23 01:05:03 +08:00
|
|
|
|
{
|
|
|
|
|
// scroll slowly to nearest element when not dragged
|
|
|
|
|
ScrollingElements();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// stop scrolling past last element from inertia
|
|
|
|
|
if (stopMomentumOnEnd
|
2023-01-01 23:57:31 +08:00
|
|
|
|
&& (arrayOfElements[0].GetComponent<RectTransform>().position.y > center.position.y
|
|
|
|
|
|| arrayOfElements[arrayOfElements.Length - 1].GetComponent<RectTransform>().position.y < center.position.y))
|
2019-02-23 01:05:03 +08:00
|
|
|
|
{
|
|
|
|
|
scrollRect.velocity = Vector2.zero;
|
|
|
|
|
}
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
2019-02-23 01:05:03 +08:00
|
|
|
|
private void ScrollingElements()
|
2015-12-23 22:54:32 +08:00
|
|
|
|
{
|
2023-01-01 23:57:31 +08:00
|
|
|
|
float newY = Mathf.Lerp(ScrollingPanel.anchoredPosition.y, ScrollingPanel.anchoredPosition.y + distReposition[FocusedElementIndex], Time.deltaTime * 2f);
|
|
|
|
|
Vector2 newPosition = new Vector2(ScrollingPanel.anchoredPosition.x, newY);
|
|
|
|
|
ScrollingPanel.anchoredPosition = newPosition;
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public void SnapToElement(int element)
|
|
|
|
|
{
|
2019-02-23 01:05:03 +08:00
|
|
|
|
float deltaElementPositionY = elementSize.rect.height * element;
|
2023-01-01 23:57:31 +08:00
|
|
|
|
Vector2 newPosition = new Vector2(ScrollingPanel.anchoredPosition.x, -deltaElementPositionY);
|
|
|
|
|
ScrollingPanel.anchoredPosition = newPosition;
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public void ScrollUp()
|
|
|
|
|
{
|
2019-02-23 01:05:03 +08:00
|
|
|
|
float deltaUp = elementSize.rect.height / 1.2f;
|
2023-01-01 23:57:31 +08:00
|
|
|
|
Vector2 newPositionUp = new Vector2(ScrollingPanel.anchoredPosition.x, ScrollingPanel.anchoredPosition.y - deltaUp);
|
|
|
|
|
ScrollingPanel.anchoredPosition = Vector2.Lerp(ScrollingPanel.anchoredPosition, newPositionUp, 1);
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public void ScrollDown()
|
|
|
|
|
{
|
2019-02-23 01:05:03 +08:00
|
|
|
|
float deltaDown = elementSize.rect.height / 1.2f;
|
2023-01-01 23:57:31 +08:00
|
|
|
|
Vector2 newPositionDown = new Vector2(ScrollingPanel.anchoredPosition.x, ScrollingPanel.anchoredPosition.y + deltaDown);
|
|
|
|
|
ScrollingPanel.anchoredPosition = newPositionDown;
|
2015-12-23 22:54:32 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|