UNITY UI Scroll through items one by one

Hi,

I'm wondering how can i make a scroll rect to stop on each item when dragging. I have all working great with the standard elastic movement, but i want to drag the list, and stop on the first item after the actual position in the drag direction. Maybe this is too complicated for me, but i could give it a try.

Is this possible without dying in the process?? I suppose this will have some math involved , but i can't figure it out.

Any idea?

Thanks

 

I made something similar, so it is possible I made it with inspiration from this post from the anwsers site:
http://answers.unity3d.com/questions/776667/can-a-scroll-rect-snap-to-elements.html

What I ended up with was for an inventory, where I have x rows, the scroller then scrolls to the point where the gesture (mobile in my case) places it - then it lerps the rest of the distance to the nearest "snap point".

 

That's a great starting point! Thanks a lot @Ramsdal

Anyway it is a shame that unity doesn't include this feature…

I'll try that ASAP!

Cheers!

 

There are some interesting approaches in that article @Ramsdal however, mostof them require using the EventTrigger component, which shouldn't be used unless you really need that level of flexibility.

There is one example buried in there that shows how to implement the same effect using the Interface events, which would be my recommended approach.
If I get the time I'll add an example of this to the UI Eextensions bitbucket repo - https://bitbucket.org/ddreaper/unity-ui-extensions

 

Hi @SimonDarksideJ,

Yes, it is a bit of a pain using the event trigger. I'm already using the interface events for every UI action i need.

Have you guys had any problem getting generic reference of a panel Animator component to show it like a tooltip? I'm trying this using onPointerEnter and Exit to detect when the cursor is over a panel i want to show the info from. I've a tooltip panel with a simple fade out/in animation that will be trigged when the cursor enters another panel, but it only works with one at a time, and if i have 3 or 4, only works one and it is always the same one. If i disable that one, then works the next one. Weird, ….. I've double checked the code and there is only one explicit reference to the panel Animator component, so i don't know what's wrong. I don't have the code here, but i'll post it later to show you. It is very simple, and only have the OnPointerEnter and the OnPointerExit interfaces. When enters, then "tooltipAnimator.SetBool("SHOW", true);" I've placed debug logs everywhere to check what is wrong and it goes through this line of code but nothing happens….. This script is attached to each element in the scrollrect panel. It is a fixed number of slots inside the Scrollpanel. If i place the cursor over the first one it works. In the second slot, it enters the OnPointerEnter function right, but the animator never gets the Bool value….

I'm pretty sure this is my fault with C#. I'm converting all the stuff i had for my game in JS to C. But the weird thing is that if this script is attached only to one panel, it works, so in theory, the code is right…..

 

I did actually not know that event triggers is not optimal, thanks I will read up on that.. However I ended up implementing mine with interfaces as well, for which I am now glad:

Code (CSharp):

1. VerticalScrollSnap : MonoBehaviour, IDragHandler, IEndDragHandler, IBeginDragHandler

This is for my inventory which scrolls both horizontally and vertically (horizontal between categories and vertically between items). I have a simpler version for a "only vertical" scroller where the "IBeginDragHandler" interface can be omitted.

 

Well,

Solved the problem. Here is a script to show a window like a tooltip. Just in case it helps anyone!

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using System.Collections;
4. using UnityEngine.EventSystems;
5.  
6. public class UI_ITEM_SLOT_DATA : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
7. {
8.  
9.         public GameObject itemHolderObject;//the item we want to show the info from...
10.         public float delay = 2f;//the delay befor showing the panel
11.         private bool count = false;
12.         private float timer ;
13.         private GameObject tooltipPanel;
14.  
15.        
16.         void Awake ()
17.         {
18.                 tooltipPanel = GameObject.Find ("TOOLTIP_PANEL");//get the tooltip panel object
19.  
20.         }
21.        
22.         void Update ()
23.         {
24.                 //we use a delay counter to show only the tooltip if the mouse is "delay" seconds over it....
25.                 if (Time.time > timer && count == true) {  
26.                         fillInfo ();
27.                 }
28.  
29.         }
30.    
31.         void IPointerEnterHandler.OnPointerEnter (PointerEventData data)
32.         {
33.                 //we are over the slot...
34.                 if (this.itemHolderObject != null) {//If this slot has some item, then can show the tooltip!
35.                         //start the counter to show the panel
36.                         timer = Time.time + delay;
37.                         count = true;
38.                 }
39.  
40.         }
41.        
42.         void IPointerExitHandler.OnPointerExit (PointerEventData data)
43.         {
44.                 //reset the counter
45.                 timer = 0f;
46.                 count = false;
47.                 //and hide the panel
48.                 tooltipPanel.GetComponent<Animator> ().SetBool ("SHOW", false);
49.  
50.         }
51.        
52.         public void fillInfo ()
53.         {                        //fiil the data in the panel...  
54.                 GameObject.Find ("TT_ITEM_NAME").GetComponent<Text> ().text = itemHolderObject.GetComponent<ITEM> ().itemName;
55.                 GameObject.Find ("TT_ITEM_DAMAGE").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().bulletAtts.baseBulletDamage.ToString ();
56.                 GameObject.Find ("TT_ITEM_AMMO").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().weaponAtts.currentBulletsInClip.ToString () + "/" + itemHolderObject.GetComponent<GUN> ().weaponAtts.bulletsPerClip.ToString ();
57.                 GameObject.Find ("TT_ITEM_RANGE").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().bulletAtts.bulletRange.ToString () + " meters";
58.                 GameObject.Find ("TT_ITEM_SHOT APS").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().weaponAtts.shotAPcost.ToString () + " APS";
59.                 if (itemHolderObject.GetComponent<GUN> ().weaponAtts.burstAPcost > 0)
60.                         GameObject.Find ("TT_ITEM_BURST APS").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().weaponAtts.burstAPcost.ToString () + " APS";
61.                 else
62.                         GameObject.Find ("TT_ITEM_BURST APS").GetComponent<Text> ().text = " -/-";
63.                 GameObject.Find ("TT_ITEM_RELOAD APS").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().weaponAtts.reloadAPcost.ToString () + " APS";
64.                
65.                 //now we have the data and show the panel
66.                 tooltipPanel.GetComponent<Animator> ().SetBool ("SHOW", true);
67.         }
68.  
69. }
70.  

And returning to the thread thing.. I'm finishing the script using interfaces. I'll post it in as soon as i finish it!

 

Ok! I can't get it working. I just used the reference code and change the two functions (On drag and DragEnd) for the interfaces. I've this:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using System.Collections;
4. using System.Collections.Generic;
5. using UnityEngine.EventSystems;
6. [RequireComponent(typeof(ScrollRect))]
7.  
8. public class SCROLL_STOP_BY_ITEM : MonoBehaviour,IDragHandler, IPointerUpHandler
9. {
10.  
11.  
12.         float[] points;
13.         [Tooltip("how many screens or pages are there within the content (steps)")]
14.         public int
15.                 screens = 1;
16.         [Tooltip("How quickly the GUI snaps to each panel")]
17.         public float
18.                 snapSpeed;
19.         public float inertiaCutoffMagnitude;
20.         float stepSize;
21.    
22.         ScrollRect scroll;
23.         bool LerpH;
24.         float targetH;
25.         [Tooltip("Snap horizontally")]
26.         public bool
27.                 snapInH = true;
28.    
29.         bool LerpV;
30.         float targetV;
31.         [Tooltip("Snap vertically")]
32.         public bool
33.                 snapInV = true;
34.    
35.         bool dragInit = true;
36.         int dragStartNearest;
37.    
38.         // Use this for initialization
39.         void Start ()
40.         {
41.                 scroll = gameObject.GetComponent<ScrollRect> ();
42.                 scroll.inertia = true;
43.        
44.                 if (screens > 0) {
45.                         points = new float[screens];
46.                         stepSize = 1 / (float)(screens - 1);
47.            
48.                         for (int i = 0; i < screens; i++) {
49.                                 points [i] = i * stepSize;
50.                         }
51.                 } else {
52.                         points [0] = 0;
53.                 }
54.         }
55.    
56.         void Update ()
57.         {
58.                 if (LerpH) {
59.                         scroll.horizontalNormalizedPosition = Mathf.Lerp (scroll.horizontalNormalizedPosition, targetH, snapSpeed * Time.deltaTime);
60.                         if (Mathf.Approximately (scroll.horizontalNormalizedPosition, targetH))
61.                                 LerpH = false;
62.                 }
63.                 if (LerpV) {
64.                         scroll.verticalNormalizedPosition = Mathf.Lerp (scroll.verticalNormalizedPosition, targetV, snapSpeed * Time.deltaTime);
65.                         if (Mathf.Approximately (scroll.verticalNormalizedPosition, targetV))
66.                                 LerpV = false;
67.                 }
68.         }
69.        
70.         void IPointerUpHandler.OnPointerUp (PointerEventData data)
71.         {
72.                 int target = FindNearest (scroll.horizontalNormalizedPosition, points);
73.        
74.                 if (target == dragStartNearest && scroll.velocity.sqrMagnitude > inertiaCutoffMagnitude * inertiaCutoffMagnitude) {
75.                         if (scroll.velocity.x < 0) {
76.                                 target = dragStartNearest + 1;
77.                         } else if (scroll.velocity.x > 1) {
78.                                 target = dragStartNearest - 1;
79.                         }
80.                         target = Mathf.Clamp (target, 0, points.Length - 1);
81.                 }
82.        
83.                 if (scroll.horizontal && snapInH && scroll.horizontalNormalizedPosition > 0f && scroll.horizontalNormalizedPosition < 1f) {
84.                         targetH = points [target];
85.                         LerpH = true;
86.                 }
87.                 if (scroll.vertical && snapInV && scroll.verticalNormalizedPosition > 0f && scroll.verticalNormalizedPosition < 1f) {
88.                         targetH = points [target];
89.                         LerpH = true;
90.                 }
91.        
92.                 dragInit = true;
93.         }
94.        
95.         void IDragHandler.OnDrag (PointerEventData data)
96.         {
97.                 if (dragInit) {
98.                         dragStartNearest = FindNearest (scroll.horizontalNormalizedPosition, points);
99.                         dragInit = false;
100.                 }
101.        
102.                 LerpH = false;
103.                 LerpV = false;
104.         }
105.        
106.         int FindNearest (float f, float[] array)
107.         {
108.                 float distance = Mathf.Infinity;
109.                 int output = 0;
110.                 for (int index = 0; index < array.Length; index++) {
111.                         if (Mathf.Abs (array [index] - f) < distance) {
112.                                 distance = Mathf.Abs (array [index] - f);
113.                                 output = index;
114.                         }
115.                 }
116.                 return output;
117.         }

I assume that "SCREENS" are the number of SLOTS in my case, right? I'm testing and no effect at all.

Any idea? The scroll setup is the default plus the content object which in my case is a panel with 3child panels inside and an horizontal layout. Maybe with this code i should specify the content?

Thanks!

 

It took me a while to get something I liked too, so it might require a "few" tests to get it right. My class ended up beeing quite different than from the example given. But screens refer to the amount of "slides" if you will.

 

Thanks, i'll keep trying.

 

Fancy sharing your implementation @Ramsdal ?
Or pushing to to my community based UI Eextensions bitbucket repo - https://bitbucket.org/ddreaper/unity-ui-extensions

 

Sure, this is the simplified version for just vertical scrolling that can be modified as needed, I have another one for vertical & horizontal scrolling and category selection but it is somewhat bigger and more specific to the needs of my project. However this should get you started in the right direction.

Please be aware that this could be categorized "work in progress", as such it is not optimized in any way

Edit: Upon skimming the code I see many things that could be changed, like the CalculateChildren method - the reason for this method is that the code is copied and adapted from the more complex class, where the layout of the children is not just one per row. It should be fairly simple to change it though

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using UnityEngine.EventSystems;
4. using System.Collections;
5. using System.Collections.Generic;
6.  
7. [RequireComponent(typeof(ScrollRect))]
8. public class LootVerticalScrollSnap : MonoBehaviour, IDragHandler, IEndDragHandler
9. {
10.     // The currently selected inventory "bag"
11.     public Transform selectedInventoryPanel;
12.  
13.     //Top padding and vertical spacing between icons
14.     public int paddingAndSpacing = 10;
15.  
16.     private int columnCount = 1;
17.     private List<Vector3> scrollPositions;
18.     private ScrollRect scrollRect;
19.     private Vector3 verticalLerpTarget;
20.     private bool isLerpingVertical;
21.     private float scrollWidth;
22.     private RectTransform childRect;
23.  
24.     void Start()
25.     {
26.         scrollWidth = (transform as RectTransform).sizeDelta.x;
27.         scrollRect = gameObject.GetComponent<ScrollRect>();
28.         scrollRect.inertia = false;
29.         isLerpingVertical = false;
30.  
31.  
32.         scrollPositions = new List<Vector3>();
33.         CalculateChildren();
34.  
35.         childRect = (transform.GetChild(0).transform as RectTransform);
36.         (selectedInventoryPanel as RectTransform).position.Set(0, 0, 0);
37.     }
38.  
39.     void CalculateChildren()
40.     {
41.         scrollPositions.Clear();
42.         if (selectedInventoryPanel.childCount > 0)
43.         {
44.             int screens = Mathf.CeilToInt((float)selectedInventoryPanel.childCount / (float)columnCount);
45.             float imgSize = selectedInventoryPanel.GetComponent<GridLayoutGroup>().cellSize.y;
46.          
47.             for (int i = 0; i < screens; ++i)
48.             {
49.                 int add = paddingAndSpacing;
50.                 if (i == 0)
51.                 {
52.                     add = paddingAndSpacing;
53.                 }
54.                 scrollPositions.Add(new Vector3(0, i * (imgSize + add), 0f));
55.             }
56.         }
57.     }
58.  
59.     void Update()
60.     {
61.         if (isLerpingVertical)
62.         {
63.             selectedInventoryPanel.localPosition = Vector3.Lerp(selectedInventoryPanel.localPosition, verticalLerpTarget, 10 * Time.deltaTime);
64.             if (Vector3.Distance(selectedInventoryPanel.localPosition, verticalLerpTarget) < 0.001f)
65.             {
66.                 isLerpingVertical = false;
67.             }
68.         }
69.     }
70.  
71.     Vector3 FindClosestFrom(Vector3 start, List<Vector3> positions)
72.     {
73.         Vector3 closest = Vector3.zero;
74.         float distance = Mathf.Infinity;
75.  
76.         foreach (Vector3 position in scrollPositions)
77.         {
78.             Vector3 pos = position;
79.             if (Vector3.Distance(start, pos) < distance)
80.             {
81.                 distance = Vector3.Distance(start, pos);
82.                 closest = pos;
83.             }
84.         }
85.  
86.         return closest;
87.     }
88.  
89.     public void OnDrag(PointerEventData data)
90.     {
91.         isLerpingVertical = false;
92.     }
93.  
94.  
95.     public void OnEndDrag(PointerEventData data)
96.     {
97.         if (scrollRect.vertical)
98.         {
99.             verticalLerpTarget = FindClosestFrom(selectedInventoryPanel.localPosition, scrollPositions);
100.             isLerpingVertical = true;
101.         }
102.     }
103. }

 

Well as you said it's a start. Will add this to the collection (attributions included of course )
if you make it better, you can always update the version on the BitBucket site

 

P.S. @Ramsdal , might as well ping this thread (http://forum.unity3d.com/threads/scripts-useful-4-6-scripts-collection.264161/) to get your script added to the useful scripts collection. A lot of my collection of scripts came from there, it's also a good script shout out place.

 

Ahh yeah i have seen that thread as well, there a quite a few good examples there. Just had a look at the bitbucket site, ill bookmark it for future reference No need to reinvent the wheel if it is already made

 

With the bitbucket site, I am doing a fair amount of additional work to make it a single project. So unifying namespaces, structures, etc. The focus is the scripts and the fabulous work everyone is contributing

 

Thanks for sharing @Ramsdal!

 

The Horizontal Scroll Snap script has been added to the Unity UI Extensions repo. Tested and working.
It ended up being a combination of your work @Ramsdal and another contributor.
https://bitbucket.org/ddreaper/unit...c6/Scripts/HorizontalScrollSnap.cs?at=default

Feel free to update / add more.

Will create a vertical one or update this to work vertically as well as horizontally when I get a chance.

 

@SimonDarksideJ That post on the answers site was the exact place where i started from as well when i made that horizontal scroll snap. It would be awesome if you can extend it even further to work for vertical snapping also. Thanks for the repo.

 

Reminds me, must log a proposal for the vertical one (my preference would be to extend the current one to handle vertical and avoid too many different controls)
*Edit - added a new proposal on the repo

 

The one I posted was with vertical scroll so should be fairly straightforward to adapt it

 

Hi Ramsdal! Thanks for sharing your script, it worked great. I replaced the line that referrred to the GridLayoutGroup component with:

Code (CSharp):

1. float imgSize = selectedInventoryPanel.GetChild(0).GetComponent<LayoutElement>().preferredHeight;

and applied VerticalLayoutGroup instead, it requires disabling ChildForceExpand width/height, and each child needing a LayoutElement component goes a long way to keeping all the elements at the size I really want them.

I was REALLY STRUGGLING WITH SNAPPING!!!

I can't thank you enough, a slight edit and this now does exactly what I want, thanks heaps!

One thing I would like to implement would be to use up/down arrows to scroll as well. I already have a system for this but I will look at merging my system with yours a bit.

I was originally achieving this same result by ignoring the uGUI interfaces and manipulating the pos.y property of the menuPanel with some retarded maths.

 

Glad you can use it

This should be fairly simple to implement with a method that takes the current lerp target and find next or previous position and then reset the lerp target and enable lerping.

 

@Ramsdal Hi. Thanks for your script)
I'm trying to apply it to the panel with Scroll Rect component. Scroll Rect component contain in Content tab other panel that I want to scroll. When I press play Unity, all buttons at this panel changes positions and become not visible on current screen. How to use this script correctly?

 

Can you post the code for HorizontalScrollSnap?

 

I did post @Ramsdal s version of the horizontal scroll snap to the UI Extensions repo. Is this one much different?

 

@Ramsdal @SimonDarksideJ
I use code from UI Extensions repo , here
Here is the unity package with files .

 

@Rotecks well that is.. not entirely correct

Actually I am not entirely sure what you are trying to do, is the intent to show one page with 3x4 levels, and then change to another page with 3x4 levels? In that case you would need to create one panel for each 3x4 levels and have the levels nested under the newly created panel. You would then be scrolling between the panels and since the levels are nested under the panel they would follow.

Hope that made sense

 

@Ramsdal Thanks)
It seems I misunderstood the purpose of the script. I wanted to make flipping between pages like in question here.
I did not realize that you have offered to do in the previous post. Sorry(
Thanks again

 

@Ramsdal You think you could PM your original script that supported more than one children per row?

 

@Ben BearFish The one posted here is using gridlayout, so it should support x children per row (just not with horizontal scrolling). In the script above you would have to edit the column count variable, and maybe other places it has been a while since I last had a look at this.

Or was it the horizontal scrolling you needed as well?

 

Yeah, I was hoping to have any layout, horizontal or vertical scrolling, with either 2 separate scripts, or a script where I could select horizontal or vertical and get the layout logic from that.

 

I do not have that unfortunately, the more advanced script I was referring to is very customized for the particular needs in my project. But speaking very generally it is 4 containers that each scroll vertically (3 items in each row) and only one container is visible at a time, then it is possible to scroll between the for containers horizontally (actually this is not done with scrolling but with lerping).

The linked script is only for vertical scrolling. If you would want one only for horizontal scrolling that should be fairly straightforward to make from the example above - the scroll positions would need to be adjusted. Unfortunately the example is not as general as it should be since it was build for the needs of my ui and only to test it so it has not been optimized and has since changed a bit.

 

Hi guys. I have made a video tutorial relating how to make a ScrollRect to snap to UI Elements...

I hope it will help you ...

Part 01:

Part 02:

 

Thank you for this awesome video tutorial!! Can you post a sample project for download?

I followed Part 01 and when I debug the GameController it prints the distance between buttons as 0, 328, 656, 984, and 1312; not the 0, 300, 600, 900, 1200 which shows in the video. Do you know why I'm getting the discrepancy?

Edit: okay I see that the numbers (distance to center) for each button change as I scroll. But when I run the game without moving anything, my distance to center should be 0, 300, 600, 900, and 1200. But they aren't.

Edit 2: Figured it out...I had to set the Canvas > UI Scale Mode to Constant Pixel Size, not Scale with Screen as the video shows. Not sure why it doesn't work like the video, but at least I'm getting 0, 300, 600, 900, and 1200 when starting the game.

 

hi blamejane. You can see that i am doing everything from scratch in the tutorial. If you follow everything that i do exactly the same way, it shoud work as it does in the tutorial. I'm using Unity 5.1. Not sure if you use different version if something coud have been changed in the Editor, but it shoud work the same way..

thanks

 

thanks @instruct9r I was able to get it working. However I need to make one enhancement to the functionality here...

I need the ability to have infinite scroll: If I have 5 buttons then when I get to the end of the 5th button, scrolling doesn't stop it just continues with button 1 in the position of button 6. I want button number 1 to be copied/moved to the end, effectively making it button 6, and the reverse of that if scrolling towards button 1.

I'm having a heck of a time finding/creating the c# solution, so if anyone has come across a snapping to center infinite scroll, I'd really appreciate the link/help.

 

I'm trying to use the Horizontal Scroll Snap from the extention repo but my content never aligns at the center, nor does it actually scroll to the next page it just goes halfway. Any anchor settings I have to keep in mind?

 

@instruct9r the video is indeed VERY AWESOME, thanx for making that! I do also need that functionality as @blamejane, could you please give some advices how this can be achieved.

 

Heya @Jakhongir @blamejane

I've made part 3 explaining, how you can achieve this.

Btw, you can use the tutorials specific thread, for adding comments and such: Tutorial Thread

 

Hey check this out!

 

@DottorFeelgood i don't get, what's the point of that video? It shows an asset functionality or?

 

@DottorFeelgood can you share the scripts?

 

@DottorFeelgood Great! May you show everyone how to do like this?

 

Posted a comment on the YouTube video, asking the author if they would like to share the control with the UI Extensions Project. is that you @DottorFeelgood ?

 

And they responded, so should hopefully see this component i the UI Extensions project soon. Fingers crossed

 

Hello, have you added it to the project, if yes where should I look. I cloned the project today from https://bitbucket.org/ddreaper/unity-ui-extensions, but could not find @DottorFeelgood's scroll staff.

 

I got the code yesterday and began working on adding it. It needs a fair amount of work to turn it in to a UI component, should have an update soon.

 

Ok, thanx.

 

Is it possible to get the currently active item in the ScrollRect?
I want the index of current selected item as I need to select next action upon clicking the item.

Thanks.