OSA Quick Start Tutorial - Complete Video Guide
Learn how to implement OSA (Optimized ScrollView Adapter) in Unity with this step-by-step video tutorial. This guide walks you through creating an efficient scroll view from scratch, covering the Model-View-Controller pattern and OSA’s core methods.
Video Tutorial
What You’ll Learn
In this tutorial, you’ll discover:
- MVC Pattern in OSA: Understanding the Model (object data), View (UI elements), and Controller (adapter) architecture
- Core Implementation: Setting up ScrollRect, viewport, and content components
- Essential Methods:
CreateViewsHolder()- Called when an item first needs to be displayedUpdateViewsHolder()- Called when items are recycled for new data
- Dynamic Operations: Adding, removing, and updating items at runtime
- UI Setup: Configuring prefabs, anchors, and scroll bars
Key Topics Covered
Initial Setup
- Creating the ScrollRect panel with proper components
- Configuring viewport and mask settings
- Setting up the content area
Implementation Details
- Creating custom Parameters class extending base parameters
- Implementing the Views Holder for UI element references
- Writing the adapter script with proper namespace structure
Prefab Configuration
- Setting up item prefabs with anchors
- Adding UI components (title, images, background)
- Making prefabs serializable for Inspector assignment
Runtime Operations
- Clearing and populating data lists
- Inserting items dynamically
- Removing items from head or tail
- Notifying the adapter with
ResetItems()
Video Transcript
The following is the complete transcript from the tutorial video:
Hi guys, I’m Lucian and today I will show how to implement this array in Unity.
So here we have the object model - this represents an item like your object name, photo URL, stuff like that. So this is the model part. Each item in your list has one.
And this is the Views folder. It’s called like this because it’s simply a simple class that holds references to your UI elements: the title, the profile photo. And this is what’s called the view.
And what links these two together is the controller, which is the adapter itself (SRIA). The two main methods that need to be implemented are CreateViewsHolder and UpdateViewsHolder.
CreateViewsHolder is called the first time an item needs to be seen, and UpdateViewsHolder is called each time a new item appears and this view holder may be recycled. That’s why it’s called “new or recycled.”
Now I’ll show you how to use the SRIA - how to implement it in your project.
Setting Up the ScrollRect
Create a new panel with the correct component on it. Disable the horizontal because it can only be either vertical or horizontal. Add the mask component. You don’t need any children on content - you don’t actually need to set it up like this, it will be set automatically.
Creating the Script
Create a script that will attach to the ScrollRect, put it into a namespace, and we create our Parameters which extend the custom parameter class.
This is the model that I talked about previously at the start of this video. This is just a random color generator method.
And the Parameters hold the prefab and a list of the data.
Basically, this is the Views Holder. CollectViews is like an initialize method - actually retrieve your views, your UI elements here.
Implementing the Adapter
Now when you implement SRIA with MyParams and MyViewsHolder, in base.Start() the adapter is initialized.
So here we retrieve our model data list using the item index of the new holder given to us, and we simply add data to the UI elements: title, icons (if those will be images), and background color.
Now when we create the view holder, we use the helper method CreateViewsHolder and pass the item prefab and the index.
Creating the Prefab
Now create our prefab. You can hold control and click to drag the anchors outside the canvas. This is simply two images and a title and the background which switches colors.
We must assign the script parameters. The Parameters need to be marked as serializable to be shown in the Inspector.
Drop the viewport, add some padding. The default item size is 75. Drop the prefab and icons that are chosen randomly for each item.
And here, the scrollbar is bottom to top - always for vertical scroll views, at least that’s how I like it. The scrollbar shouldn’t be assigned to the ScrollView, it’s not compatible like that.
OSA already has a ScrollbarFixer which works with the adapter. The default parameters are fine - only the viewport should be assigned. The scrollbar will be automatically retrieved from the parent.
Public Methods
And now make some public methods to keep the ScrollRect commands to change the item count. It simply clears the previous data and adds new models. This is a helper function which creates a model with some random data on it, and we simply need to notify the adapter with ResetItems().
We can initially set some item count when the adapter is initialized.
Then add two methods to insert an item at the end of the list using the InsertItems() method, and also to remove an item - this time from the head of the list, just to have some variation.
And of course, if the data count is zero we return. The index can be any index actually, and the number of removed items starting from that index can be any count.
Adding UI Buttons
I’ll create some buttons to trigger those methods:
- A button for changing count
- A button for removing from the head of the list
- A button for adding at the bottom
There are a lot of parameters to fine-tune how items behave.
Thank you for watching and happy coding!