Creating new Pages in ScrollingUI

I want to use the scrolling elements (see ScrollingUIDemo) as a picture galery. I have to change the number of images dynamically, that means via script. But the PagedScrollRect doesn't react on this changes.

What I do:
Instantiating new Pages on runtime. The new Page is at the right position, because it inherits from parent.

The problem:
The new Pages are not accessible while scrolling. The new Page "Page1(Clone)" can not be visited. I put the code which instantiates the new Page into Start method, but same problem.

How can I create/delete Pages in PagedScrollRect correctly?

 

Hello!

When using a PagedScrollRect, the pages must be instantiated by an implementation of the IPageProvider interface. The script implementing IPageProvider must be on the same object as the PagedScrollRect. What PageProvider are you using right now?

Here is the documentation describing IPageProvider:

To make a photo gallery I would suggest that you make a custom implementation IPageProvider. GetNumberOfPages would be the the number of photos / the number of photos per page. Then in Provide Page, you would instantiate a page and initialize it with the correct set of photos based on the page index.

I hope this helps!

Thanks,

Dan

 

The script implementing IPageProvider must be on the same object as the PagedScrollRect.​

Do you mean adding the IPageProvider to the PagedScrollRect GameObject? This doesn't woork: "The script class can't be abstract."

What PageProvider are you using right now?​

I use the common PagedScrollRect from the ScrollingUIDemo. The PagedScrolLRect makes use of the IPageProvider. And there is a ChildrenPageProvider attached to the PagedScrollRect GameObject..I think this is correct.

Then in Provide Page, you would instantiate a page and initialize it with the correct set of photos based on the page index.​

You mean in ChildrenPageProvider.ProvidePage?

 

The script IPageProvider is an interface that allows you to customize how pages are provided to PagedScrollRect. ChildrenPageProvider is the implementation of IPageProvider that is used in the sample you are using.

My suggestion is that you create your own implementation of IPageProvider called PhotoGalleryPageProvider. Then, you would replace ChildrenPageProvider with PhotoGalleryPageProvider on the object that has the PagedScrollRect. In PhotoGalleryPageProvider, you would dynamically instantiate the page in your implementation of the function ProvidePage instead of using the children of the PagedScrollRect. Please look at PrefabPageProvider as another example implementation of an IPageProvider.

Are you planning on showing multiple images per page or just one?

Thanks,

Dan

 

Thanks for the details, @dsternfeld ! I plan to show only one image on one page.

Another question: Is there a way to provide a specific page of the ScrollingUI via script? I mean to provide the first page and disable the others? I tried to call ProvidePage(0); and RemovePage(i); over all other pages, but it does not work.

 

No problem!

You should not call ProvidePage or RemovePage yourself. Those functions will be called by PagedScrollRect as the user scrolls. All pages that are not currently visible are automatically removed, which makes it possible to support an arbitrarily large numbers of pages.

If you want to set the current page in code, you can do that by calling PagedScrollRect.SnapToPage.

Thanks,

Dan

 

I'm also setting the page with SnapToPage() I've gotten it to work on the example UI. My problem comes when I start editing the prefab. Now when I preform SnapToPage() The first page moves to the side, but stays active as the next page appears. I get the error message:

NullReferenceException: Object reference not set to an instance of an object
TiledPage.GetTileCell (UnityEngine.Transform tile) (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/ScrollEffects/TiledPage.cs:225)
TiledPage.CalculateTilesByDistance () (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/ScrollEffects/TiledPage.cs:170)
TiledPage.ApplyScrollEffect (Single scrollDistance, Single scrollSpacing, Boolean isInteractable) (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/ScrollEffects/TiledPage.cs:85)
TileScrollEffect.ApplyEffect (UpdateData updateData) (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/ScrollEffects/TileScrollEffect.cs:37)
PagedScrollRect.ApplyScrollEffects (UnityEngine.RectTransform page) (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/PagedScrollRect.cs:658)
PagedScrollRect.AddPage (Int32 index, Boolean isActivePage) (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/PagedScrollRect.cs:622)
PagedScrollRect.AddPageIfNecessary (Int32 index) (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/PagedScrollRect.cs:604)
PagedScrollRect.OnScrolled () (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/PagedScrollRect.cs:524)
PagedScrollRect.set_ScrollOffset (Single value) (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/PagedScrollRect.cs:202)
PagedScrollRect.LerpTowardsOffset (Single targetOffset) (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/PagedScrollRect.cs:555)
PagedScrollRect+<SnapToPageCoroutine>c__Iterator0.MoveNext () (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/PagedScrollRect.cs:536)
UnityEngine.SetupCoroutine.InvokeMoveNext (IEnumerator enumerator, IntPtr returnValueAddress) (at C:/buildslave/unity/build/Runtime/Export/Coroutines.cs:17)
UnityEngine.MonoBehaviour:StartCoroutine(IEnumerator)
PagedScrollRect:SnapToPage(Int32, Boolean) (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/PagedScrollRect.cs:259)
PagedScrollRect:Snap2() (at Assets/GoogleVR/Demos/Scripts/ScrollingUIDemo/PaginatedScrolling/PagedScrollRect.cs:668)
UnityEngine.EventSystems.ExecuteEvents:Execute(GameObject, BaseEventData, EventFunction`1)
GvrPointerInputModule:HandlePendingClick() (at Assets/GoogleVR/Scripts/EventSystem/GvrPointerInputModule.cs:278)
GvrPointerInputModulerocess() (at Assets/GoogleVR/Scripts/EventSystem/GvrPointerInputModule.cs:157)
UnityEngine.EventSystems.EventSystem:Update()

 

Hello!

In what way did you modify the example? I'm trying to reproduce the issue now.

Thanks,

Dan

 

I think I reproduced it. The script TiledPage has a serialized list of tiles. I'm guessing that you removed tiles without changing the size of the list.

Thanks,

Dan

 

PagedScrollRect.SnapToPage.works like a charm. Thank you, @dsternfeld

 

Another question according to ScrollingUI. Is there a plan that we get the small points instead of the Scrollbar? The points are used in Daydream home screen for example. They are much nicer and with Scrollbar users expect to drag'n'drop insted of swiping on the touch pad (outcome user test).

Or do we have to do it on our own?

 

I'm glad that helped you!

Currently, there isn't a plan to add the small points into the sample. However, you can implement it yourself by using PagedScrollRect.PageCount and PagedScrollRect.ActivePageIndex.

Thanks,

Dan

 

I've had a look through the script where/how would I change this list?

 

You can assign the tiles in the editor via the inspector for TiledPage. You can also assign them at runtime via TiledPage.Tiles. The TiledPage script should be on the object for your page.

Thanks,

Dan