OSA 5.0-7.0 Demo Scenes Introduction

Explore the comprehensive demo scenes included with OSA (Optimized ScrollView Adapter). Learn from practical examples covering common use cases and advanced techniques.

Contents

1. Overview
2. Import demos
3. A demo scene’s structure
4. A demo scene’s code

5. Demos list & their manuals

6. Overview

Please read this doc before going into a specific demo’s manual, as here you’ll find general info about any demo.

You can try all the demos directly in your browser before even downloading the asset.

All the example scenes & the utility scripts are provided on an “as-is” base. Their main purpose is to demonstrate the feature-set and show you the basic code-flow when implementing the adapter, following the recommended best-practices & conventions.

Although discouraged (you should use them just as a guide to create your own), you can re-use the example scripts directly by removing the references to DrawerCommandPanel (which is used for navigation through the example scenes and to showcase their features) and change the item count directly. For this, see the OnItemCountChangeRequested method, which is present in almost all examples’ Entry script and is normally called by the drawer when you press the SetCount button, but you can call it manually. It sets the number of items in your list and then notifies the adapter about it. Inserting/Removing items at a specific position works the same.

What is the Entry script from demo scenes? It’s the script that’s first executed when the scene starts. It’s used in demos to reuse code. You don’t need it in production, since you’ll have your own scripts that use and manage an OSA-powered ScrollView. There was a confusion about this and some users thought they need this SceneEntry script - no, the code inside the *.Demo namespace is NOT needed in production.

Not all scenes support the upper limit of items (cca 2 billion). They use the SimpleDataHelper which needs all the models retrieved at once, while the scenes that do support the upper limit use LazyDataHelper to postpone model retrieval until it’s actually needed (when the item actually becomes visible). But some scenes (“Simple example”), even though they support the upper limit, still use the SimpleDataHelper just so they can be easier to understand, as not all users care about having millions of items - some may only have a few thousand items and using lazy-initialization of models in all examples would unnecessarily prolong the learning curve.

1. Import demos

As of v4.3, the demos and utilities sit in their own packages.

Import the /Extra/Utilities.unitypackage. The demos depend on these

Import the /Extra/DemoScenes.unitypackage

Don’t forget to include all of the scenes under /Scenes into the Build settings. Just select all of them and drag-and-drop them into the Build settings window

1. A demo scene’s structure

Each of the demo scenes provided follows a general structure. They are all located in /Scenes. The scene _Home is the entry point in the demo application from which you can access all the demos at runtime, but you can also just open a specific scene in the editor and press Play

There’s an Entry game object that contains common code that sets up the Drawer panel (see below).

[Screenshot - see Unity Asset Store documentation for visual guide]

Each scene contains it and the script attached to it is specific to that scene. It’s a script which extends the SceneEntry script, which helps reuse code between scenes. It mainly collects all of the adapters and initializes them, hooks button click listeners, adds/removes UI elements in the Drawer panel and so on.

And again, this Entry object & its code are NOT needed for OSA to function. They’re needed solely to reuse code between the demo scenes!

The Drawer panel contains buttons and input fields custom to each scene and through which you explore the scene’s functionality, but also navigation buttons to cycle through all the scenes.

[Screenshot - see Unity Asset Store documentation for visual guide]

Sometimes this drawer slows down the FPS and it’s still a mystery why, so when when you want to asses the OSA’s speed, close the drawer first by pressing the “Close me[…]” button

The scenes try to be minimal, so they have the basic Main Camera, Canvas, a FPS counter at top-center of the screen and sometimes additional controls specific to that particular example. You’ll sometimes find an OSADebugger game object and you can safely delete or ignore it - it’s used by us to do some quick debugging

Some scenes allow the screen to be rotated (when on mobile devices) to assess the scene’s adaptability to orientation changes. This is shown in top-right

[Screenshot - see Unity Asset Store documentation for visual guide]

There will be one or more Optimized ScrollViews (or OSAs), each having their own item prefab or sharing the same item prefab

[Screenshot - see Unity Asset Store documentation for visual guide]**[Screenshot - see Unity Asset Store documentation for visual guide]

Most of the OSAs will be called SimpleScrollView_Modified because there’s a SimpleScrollView base prefab that’s used for most of the scenes. It contains only the common UI elements and a scrollbar with the ScrollbarFixer8 script which adds some nice functionalities.

1. A demo scene’s code

The code that’s unique to a scene is found under /Scripts/Demos/<DemoName>. Here you’ll find the SceneEntry implementation for that scene and the specific OSA implementation script, along with other associated scripts.

While reading a scene’s manual, constantly switch back and forth between the actual scripts and the manual. You’ll understand it better this way. Don’t read the manual and then inspect the scripts. Do it in parallel.

[Screenshot - see Unity Asset Store documentation for visual guide]

Digging into the SceneEntries is not that useful for understanding how OSA works, as they are mainly setting up on click listeners and forwarding events to OSA. Events like ResetItems, AddItems, RemoveItems, ScrollTo etc.

When you create your custom implementation of OSA, you’ll generally create a “MyOSA” class which extends OSA, a MyParams class which extends BaseParams (or one of its subclasses), a Model class and a ViewsHolder class which extends AbstractViewsHolder (or one of its subclasses).

The OSA Wizard can generate all of these for you and it’s a good utility if you want to get started as quickly as possible. Check it in the OSA’s main manual.

Below you can see the general structure of a custom implementation:

The adapter class. This one will be attached to the ScrollView. Make sure to include it into a namespace to avoid conflicts.

Just have an overview over the key methods. They are detailed in the OSA’s main manual.

[Screenshot - see Unity Asset Store documentation for visual guide]

The model class

[Screenshot - see Unity Asset Store documentation for visual guide]

The views holder class

[Screenshot - see Unity Asset Store documentation for visual guide]

The params class. In this case, it extends the BaseParamsWithPrefab class which further extends the BaseParams (which contain the full set of OSA’s parameters to be tweaked in the inspector). BaseParamsWithPrefab contains a Prefab property which you will assign in the inspector and it’ll conveniently be used to calculate the DefaultItemSize property of the BaseParams class.

[Screenshot - see Unity Asset Store documentation for visual guide]

1. Demos list & their manuals

🚩 All of the below demos already exist in the package. Only the docs are not ready.

The doc for any particular scene that’s not linked here can be created faster if you request it: Discord, Email

1. TableView
2. Chat
3. Content size fitter
4. DateTime picker
5. Example - the main example
6. Grid, horizontal layout, async item download
7. Hierarchy - aka TreeView
8. Hierarchy, sticky headers
9. Incremental item fetching
10. Item dragging - within the list and between 2 different ScrollViews
11. Looping spinner
12. Multiple prefabs (simple)
13. Nested ScrollViews
14. Page view, world space canvas
15. Grid, multi-select & animated deletion
16. Pull-to-refresh
17. Simple
18. Expand item to variable size - expanded size is given by a ContentSizeFitter
19. Flexible grid - Example
20. Animated insert/remove - animate the item’s size changing towards 0, while shifting other items accordingly, before removing it