https://github.com/qiankanglai/loopscrollrect

These scripts will make your UGUI ScrollRect reusing cells, to improve performance, loading time and draw calls.
https://github.com/qiankanglai/loopscrollrect

ugui unity3d

Last synced: 9 months ago
JSON representation

These scripts will make your UGUI ScrollRect reusing cells, to improve performance, loading time and draw calls.

• Host: GitHub
• URL: https://github.com/qiankanglai/loopscrollrect
• Owner: qiankanglai
• License: mit
• Created: 2015-08-12T16:02:00.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2025-04-24T12:23:58.000Z (10 months ago)
• Last Synced: 2025-05-08T04:36:43.518Z (9 months ago)
• Topics: ugui, unity3d
• Language: C#
• Homepage: http://qiankanglai.me/2015/08/15/LoopScrollRect/
• Size: 6.18 MB
• Stars: 2,469
• Watchers: 86
• Forks: 488
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Loop Scroll Rect

[![openupm](https://img.shields.io/npm/v/me.qiankanglai.loopscrollrect?label=openupm&registry_uri=https://package.openupm.com)](https://openupm.com/packages/me.qiankanglai.loopscrollrect/)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

These scripts help make your ScrollRect `Reusable`, because it will only build cells when needed. If you have a large number of cells in a scroll rect, you absolutely need it! It will save a lot of time loading and draw call, along with memory in use, while still working smoothly.

中文说明请看[这里](http://qiankanglai.me/2015/08/15/LoopScrollRect/)。

## Installation

Open Package Manager and Add package from git URL `https://github.com/qiankanglai/LoopScrollRect.git`.

With [OpenUPM](https://openupm.com/), just one command `openupm add me.qiankanglai.loopscrollrect`.

With older Unity version, just clone the repo and put into `Assets/`.

## Demo

Demo for Loop Scroll Rect. Each cell knows its own index, and it is able to modify its content/size/color easily.

Also ScrollBar is supported now! It supports both vertical & horizontal directions, back and forth.

![Demo1](Images~/demo1.gif)

![Demo2](Images~/demo2.gif)

Demo without mask. As you can see, the cells are only instantiated when needed and recycled.

![Demo3](Images~/demo3.gif)

**New**: Scroll to Index

![ScrollToIndex](Images~/ScrollToIndex.gif)

## Introduction

The original idea comes from @ivomarel's [InfinityScroll](https://github.com/ivomarel/InfinityScroll). After serveral refactorisations, I almost rewrite all the codes:

- Avoid using `sizeDelta` directly since it doesn't always mean size

- Support GridLayout

- Avoid blocking when dragging back

- Take advantage of pool rather than instantiate/destroy every time

- Improve some other details for performance

- Supports reverse direction

- **Supports ScrollBar** (this doesn't work in Infinite mode, and may behavior strange for cells with different size)

My scripts copies `ScrollRect` from [UGUI](https://bitbucket.org/Unity-Technologies/ui) rather than inherit `ScrollRect` like InfinityScroll. I need to modify some private variants to make dragging smooth. All my codes is wrapped with comments like `==========LoopScrollRect==========`, making maintaining a little easier.

## Example

Please refer to `InitOnStart.cs` for quick example implmentation. It's high recommended for implmentating your own cache pool.

### Infinite Version

If you need scroll infinitely, you can simply set `totalCount` to a negative number.

### Quick Jump

I've implemented a simple version with `Coroutine`. You can use the following API:

    public void SrollToCell(int index, float speed)

Here is a corner case unsolved yet: You can't jump to the last cells which cannot be pulled to the start.

## Example: Loop Vertical Scroll Rect

These steps may be confusing, so you can just open the demo scene and copy & paste :D

You can also remove EasyObjPool and use your pool instead.

- Prepare cell prefabs

    - The cell needs `Layout Element` attached and preferred width/height

    - You should add a script receiving message `void ScrollCellIndex (int idx) `

![ScrollCell](Images~/ScrollCell.png)

- Right click in Hierarchy and click **UI/Loop Horizontal Scroll Rect** or **UI/Loop Vertical Scroll Rect**. It is the same for these two in the Component Menu.

    - Init in Start: call Refill cells automatically when Start

    - Prefab Pool: the EasyObjPool gameObject

    - Prefab Pool Name: the corresponding pool in step 1

    - Total Count: How many cells are available (index: 0 ~ TotalCount-1)

    - Threshold: How many additional pixels of content should be prepared before start or after end?

    - ReverseDirection: If you want scroll from bottom or right, you should toggle this

    - Clear Cells: remove existing cells and keep uninitialized

    - Refill Cells: initialize and fill up cells

![LoopVerticalScrollRect](Images~/LoopVerticalScrollRect.png)

If you need scroll from top or left, setting content's pivot to 1 and disable ReverseDirection. Otherwise, you should set 0 to pivot and enable ReverseDirection (I have made `VerticalScroll_Reverse` in the demo scene as reference).

I highly suggests you trying these parameters by hand. More details can be found in the demo scene.