[Released] PagedRect: Paging Solution for Unity UI

Hi there,

Normally I'd recommend adding PagedRects to your scene via the menu items (as they make sure everything is running properly), but it should also work okay when added directly from the prefab.

You can control the feel of the swiping behaviour by modifying the 'ScrollRect -> Swipe Delta Threshold' property which defines how far the user must drag before it is considered to be a swipe (usually a low value is good, but in some cases you might want to try a slightly higher value). You can also adjust the 'Drag Threshold' property of your scene's 'Event System' - I usually use a value of 20 for this property, but you may want to experiment a bit and see what works best for you.

I hope this helps!

 

Hi y buyed your PagedRect assset but i have a problem when only have 3 pages the swippe don´t works well when reaches the last page don´t go to the first page, if add a page more (4 pages) it goes well.

Edit:
Sometimes stops in the second page and don´t go to the page 3.

 

Hi Prodigitel,

Thanks for purchasing PagedRect! Sorry to hear that you're having trouble with it.

I'm not 100% sure I'm understanding you correctly, but it does sound like you may be having trouble with seamless looping. Specifically, the seamless looping functionality of PagedRect makes it move pages from the beginning to the end when scrolling right (and from the end to the beginning when scrolling left) to maintain the illusion that the PagedRect has no beginning or end. However, this functionality only works properly if there are 4 or more pages (as the page that is moved must not be visible at all, otherwise the movement of the page will be visible to the user).
So, essentially, if there are 3 or fewer pages, PagedRect ignores the 'Seamless Looping' setting and returns to the older default behaviour, which is that scrolling past the end page will cause PagedRect to scroll back to the beginning, provided 'Loop Endlessly' is enabled (if it is not enabled, then the PagedRect will stop at the last page).

There were some minor issues that sound similar to the one you're experiencing (stopping on a seemingly-random page), but they were fixed in PagedRect v1.49 - can you check to see if you have that version?

Kind Regards,
Digital Legacy

 

Thanks for the fast response! I ended up adding another page, and yes have PagedRect v1.49.
Stopping on the second page only ocurrs with 3 pages and sometimes.

Thanks again for all your PagedRect wroks very well and is supper easy to use, I recomend it 100%

 

Hi,

You're welcome

I'll have to test a bit more with 3 or fewer pages, perhaps I missed something

Kind Regards,
Digital Legacy

 

Hi

Thanks for the plugin. Works well and easy to implement.

Is there a way to add easing to the sliding animation so when a page slides in it can be a little elastic and "bounce" into place? Or a way just to a simpler "easeIn" "easeOut"?

thanks

 

Hi there,

Thanks for purchasing PagedRect!

As it happens, I recently implemented animation curves into XmlLayout (another plugin of mine) and after reading your post, it occurred to me that I could transplant most of that functionality mostly as-is into PagedRect, so I've gone ahead and done that. So far it seems to work fairly well, although naturally some types of curves work better than others, and additionally, most of the curves are only really noticeable if the animation speed of the PagedRect is decreased a bit (below the default of 1).

So, while I'd consider this functionality experimental for now, I'm going to PM you a link to PagedRect v1.51 which includes this new functionality so you can give it a try and see how it works for you. The new 'Animation Curve' property will show up in the PagedRect inspector under 'Animation'.

I hope this helps!

UPDATE: It appears that PMs/Conversations are disabled for your profile - could you perhaps send an e-mail to support@digital-legacy.co.za and I'll send you the link from there?

 

Hey, sir.
When I use RemoveAllPages method, the editor throws an exception.
Details are as follows :

ArgumentOutOfRangeException: Argument is out of range.
Parameter name: index
System.Collections.Generic.List`1[UI.Pagination.Page].get_Item (Int32 index) (at /Users/builduser/buildslave/mono/build/mcs/class/corlib/System.Collections.Generic/List.cs:633)
UI.Pagination.PagedRect.UpdatePageNumbers () (at Assets/UI/Pagination/PagedRect/PagedRect.Pages.cs:82)
UI.Pagination.PagedRect.RemovePage (UI.Pagination.Page page, Boolean destroyPageObject) (at Assets/UI/Pagination/PagedRect/PagedRect.Pages.cs:129)
UI.Pagination.PagedRect.RemoveAllPages (Boolean destroyPageObjects) (at Assets/UI/Pagination/PagedRect/PagedRect.Pages.cs:158)
RMAllPages.Start() (at Assets/My/RMAllPages.cs:14)

Please give me a help, thanks.

 

Hi there,

Sorry about that, I've just tested and been able to replicate the issue. Fortunately, it seems to be fairly easy to fix - if you go to UI/Pagination/PagedRect/PagedRect.Pages.cs, comment out line 129, so that it looks as follows:

Code (CSharp):

1. //UpdatePageNumbers();

^ It turns out that UpdatePageNumbers can cause issues if called while actively removing pages (as in this case), but fortunately it also turns out that this call isn't actually necessary anymore as the same functionality is already called at the end of the frame, phew

 

Is there an option to limit swipe gesture on Slider - ScrollRect to only shift one page per swipe?

 

Hi there,

I've recently added the option to do this for PagedRects that use Page Previews - with a little adjustment, I've managed to get the same functionality working for regular PagedRects as well. I'll send you a link to the updated version so you can give it a try.

The option is now listed in the inspector as 'Dragging -> Limit Dragging to One Page At a Time'. What it does is essentially disable part of the dragging functionality (which attempts to scroll to the 'closest' page depending on the position of the scrollrect) - without this functionality, dragging/swiping only moves to the closest page at a time (unless you drag all the way to a new page).

I hope this helps!

 

That works, thank you

 

Hi, I'm having issues with adding images to a scroll view within a page.

I have copied the "Slider- Scroll Rect" from the "Nested ScrollRect Example". When I add an image to the content of the Scroll View, the image is always stretched to approximately double it's size. Even if I set the texture to keep it's aspect ratio, padding is applied to the top/bottom of the image.

e.g: top (before scroll)

post scroll

 

Hi there,

Sorry for the huge delay in responding to this - I didn't receive any notifications for this post.

This has to do with the combination of the 'Image' component and the VerticalLayout group used by the ScrollView to size and position items. Unity has some ...unusual... code in the 'Image' component which tries to use the image's native dimensions to determine what size to use, which in many cases causes unexpected results (such as this one).

The way around this is to override the 'Image' component's layout instructions with a 'LayoutElement' component, for example:



^ For each image, you'll need to add a LayoutElement with the PreferredHeight set, and then, if necessary, also set the Image component's 'Preserve Aspect' property to true.

I hope this helps!

 

Hello. Im using Tabs-Horizontal-ScrollRect and i want to customize each pagination button (add different animated icons), but if I change active buttons in scene Button - Page X it does not work, because all buttons elements returns to its default state. I read the User Guide which says "The Pagination object also contains the actual buttons themselves – using the format Button – Page X (where X refers to the page number). You should avoid making any changes to these buttons directly – rather edit the templates instead. " and "To customise the appearance of page buttons, you can edit the Current Page, Other Pages, and Disabled Pages templates respectively", but how can I get 5 different buttons for each page. Also I don't need to add pages in runtime if it matter.

 

Hi there,

By the sounds of it, you may be better off taking complete control of the pagination yourself - the easiest way to do this would be to set the 'Show Page Buttons' property to false, which would remove the existing pagination buttons, allowing you to manually add one for each page with whatever appearance/etc. you need.

Then, you'd need to set up the event-handling for each button to make it show the correct page, like so:



(Where the number is the desired page number).

The only real downside of this approach is that PagedRect will not control these buttons at all, so it won't highlight the 'current' page (although depending on how you set up the buttons, clicking them should highlight the last one you clicked).

---

An alternative approach would be to edit the templates so that they are basically completely invisible (no background image, numbers [unless you require them], etc.) Then, you can give each page an icon (by modifying the page's 'Page' component itself), and set the 'Show Page Icons' property to true. This will make PagedRect add the 'icon' image to each page, allowing you to have a different appearance for each button.



If you do use this approach, by default the 'icon' won't change colors/etc. when highlighted like a regular button as it is just a normal image. However, you can override this behaviour if you're hiding the rest of the button by changing the button template's 'Target Graphic' property to the 'Icon' object (for both the current page and other page templates), e.g.:



I hope this helps!

 

Thanks for the quick and detailed answer. The first option came to my mind right after I wrote my question here, so I tried it and it works pretty well. I could try the second option that you suggested if something will go wrong with the first approach.

 

You're welcome Good luck with your project!

 

BUG: The buttons doesnt work in touch screen.

 

Hi,

All PagedRect buttons are standard Unity UI buttons and have been tested successfully with touch screen interfaces (touch interactions trigger regular mouse events in Unity UI) - I've just run a test now on a mobile device and the PagedRect buttons in the example scenes all seem to work fine.

If you test one of the example scenes on a touch screen device, do the buttons work for you there?

--

There are several reasons why buttons may not work in a scene - I'd check the following:
a) Is there an EventSystem in the scene? This object is required in order for mouse and touch events to work;
b) Is there anything above the button in the scene? Any Unity UI element which blocks raycasts (e.g. 'Image') can prevent events from firing, even if they are fully transparent. This can be prevented by either clearing their 'Block Raycasts' or 'Raycast Target' properties, or by disabling their GameObject entirely.

If the above doesn't help, could you perhaps send me the scene in which the buttons aren't working (along with any supporting files) so I can take a look and see if I can replicate the problem?

I hope this helps!

 

Hi, quick question, how can we manage not to lose the clicked state on a button that is being clicked inside a scroll rect page? Whenever I try to click it, if I slightly move the mouse (without moving the mouse/finger over the button) it loses focus and the button gets back to its original "unclicked" or "up" state. I've tried to simply create a button in the example scene and it happens the same. Thanks for the info beforehand!

 

Any help would be highly appreciated

 

Hi there,

Sorry for taking so long to respond.

I've tried to replicate the issue you mention in Unity 2019.3, but I'm not having any luck - the only way I seem to be able to force the button to lose focus is to click elsewhere (e.g. drag the scrollrect), but that is standard Unity UI behaviour - any selected UI element will automatically be deselected if you click elsewhere. If that is the issue you're describing, then you may want to look into an alternative approach.

If you're looking for a button which will remain selected until manually deselected, then you may want to look into using a toggle instead - they can be adapted fairly easily to look like buttons, but retain their 'selection' when losing focus. I'm going to be attaching a scene with an example of this - it's on Page 2 of the PagedRect, on the first image in the ScrollView on that page. From a default toggle (added via UI -> Toggle), I modified the 'Check' image so that it matched the background button (by making it stretch to fill its parent, and using the same image as the Background image, and setting it to use a different color). I also moved the embedded Text object to the center of the Toggle Button. That way, when the toggle is turned on (by clicking the button), it will show the 'Check' image (which now looks exactly like the button but has a different colour), and if you click it again, it will deselect it and hide the 'Check' image, making the button appear to be deselected again. It will not lose selection if you click anywhere else.

If you would like it to, for example, lose selection when clicking another button, then you could make them both Toggle Buttons, add a 'ToggleGroup' component to their parent, and set both of the buttons to use that ToggleGroup for their 'Group' property. Then, if you select another button in the same group, any other buttons that are selected will be deselected. You can also, optionally set the ToggleGroup to allow you to deselect a button by clicking on it by setting the ToggleGroup's 'Allow Switch Off' property to true.

https://drive.google.com/file/d/1nzwsAbAAXO9BEIJxPxfkD63CVrH9w3BH/view?usp=sharing

Sorry again for taking so long to respond, things have been a bit hectic lately.

I hope this helps!

 

Hi there DaceZA,
Thanks for your reply. I think I probably didn't explain myself properly, the issue I'm experiencing isn't that: my problem relies when adding touchable content (such as a button) to a scrollable content in Unity.

In this specific case, I have used the pages on your slider to work as the sections of the menu of my game, each page is one section. In each of these sections we have many components, visual and touchable stuff, for instance a button. When playing on a device (I'm guessing due to the high DPI of the screens nowadays) the slider triggers immediately and makes the players lose the focus of the button because it accidentally starts dragging the content, as if they were attempting to switch page at the same time of clicking the button. I have recorded a video (and uploaded here https://imgur.com/a/krxBcaV) where the issue happens by using the example you provided in your plugin, just by attaching a button in a specific child of your sample project's hierarchy.

I'm looking for a solution where the players can click the button and I allow a small amount of pixels to be moved while the button is pressed until I cancel the button click because I understand they regret clicking that button and they have decided to switch page instead.

Note that I've already tried playing around with the slider's ScrollRect properties with no luck so far.

Please let me know if this is possible to do.

 

Hi there,

I see what's happening - Unity is considering the movement to be a drag event. Fortunately, I think I have an answer for you - within your scene is an 'EventSystem' GameObject, which Unity uses to process events within the scene. On that GameObject's 'EventSystem' component, there is a property called 'Drag Threshold', which defines how much movement is necessary before Unity considers a click + drag event to be an actual 'Drag Event' (for things like Scroll Views/etc.). The lower this number, the easier it is to start dragging something - in general, I've found that this setting has a sort of a 'sweet spot' that varies from platform to platform (and possibly, from device to device). I found that a value of '20' worked fairly well for the needs of the demo scenes in PagedRect when I tested them on both Windows and on Android, but your mileage may vary

In your case, I think you will probably want to use a higher value - 20 does seem to not work all that well with this particular scenario - somewhere closer to 50 will probably work out better for you.

Incidentally, please note that the ScrollRect in this example and prefab is a standard Unity ScrollRect/ScrollView in every respect bar one (it has a component on it to pass drag events through to PagedRect so that it can still respond to drag events even though technically the ScrollRect blocks them from reaching it). If you add a button to a new ScrollRect in a scene, for example, you'll see that it behaves in exactly the same way.

I hope this helps!

 

Hi DaceZa,
Sorry for the very late reply on my end, this indeed seems to work fine (at least on the simulator), will try this solution on different devices as it's promising.
Thanks!

 

Hello,
Is there any way to have a filter way included in your asset, like typing in the input field, and automatically, it displays only the items corresponding to the filter ?

 

Hello is tested with AR vuforia? I see it works in full screen but my question is if is possible to ancor (connect) to a Target Image. I wold like to show a slider or pager when i reconu a target image and the object (slider or paging) move over the image target and with image target. I try to create put a canvas (like normaly use with Ui components) and put the pager object but it is stating. By

 

Hi there,
PagedRect doesn't have any built in filtering functionality, but you can add or remove pages from PagedRect dynamically, although you'd have to write the C# code to do it (using PagedRect's AddPage() / RemovePage() methods) - if you use a template page you can also add pages using the AddPageUsingTemplate() method which might make it a bit easier.

 

Hi there,

Unfortunately no, it hasn't been tested with Vuforia, but if it's anything like VR development, and I suspect it probably is, then it should just be a matter of rendering to a Unity UI World space canvas. I don't have any idea how Vuforia works with input elements/etc. but generally VR simulates mouse-clicks/touches, which should work normally with PagedRect as it is composed out of standard Unity UI elements.

If you like, I can arrange a refund for you, just PM me with your invoice number and I'll ask Unity to refund you.

 

Has this gone from the store?? I wanted to buy it!

 

Hi, I have been using PagedRect for a while now but I can't figure out how to use the horizontal scroll rect or the Page Previews Horizontal to show multiple pages on screen at one time and all at the same size. Currently page previews not only scales down the other pages not active but it also does not respect the resolution of the current paqe. It defaults to some strange resolution. My pages are say 714 x 512 and when I run it the pages are set to something strange like 1080 x 720 or something. I can deal with the other pages being small but how can I get it to show my current page 1:1? I have also included the exact layout I am aiming for.

 

Hello there, I using page preview option to preview pre/next pages.
The issue is with the scale.
I want the scale of selected page set to be 1,1,1 and of previewed pages i.e. previous/next set to be 0.75,0.75,1.
Is there any way ?

 

there is an effect in every pagination that annoys me.
When I'm on page 1 and hovering over other page buttons, changing their color to highlighted color. However, when I click button 2, and hover over other buttons, everything except button 1 changes (highlighted color). I would like button 1 to change color to highlighted color too, and I have no idea how to do it and why this is happening.

I've experimented with changing the template current and other page buttons, but the problem remains the same.
In addition, when I want to change the text in the button, so that in the middle instead of "1" there is, for example, "Start", then after typing start and saving (or clicking update Pagination), this text is changed to the default value.
Can someone help?

 

Giving different colors, I can see that the problem is that a random button changes its state to "Selected" (no, it's not the previous button, but a different one. For example, clicking alternately 3 and 5 few times, selecteded is always 4) something is wrong with it.

 

How do i change the pagination button color