Unity -- UGUI plugin LoopScrollRect

Table of contents

1. Introduction

2. Matters needing attention

1. Prefabricated body design:

2. Performance issues:

3. Data update:

4. Interactive experience:

5. Version compatibility:

6. Changes in project content:

7. Asynchronous loading:

8. Click event processing:

9. Dynamic layout:

10. Multilingual support:

3. Example of use

 1. Examples of common functions of LoopScrollRect:

2. Dynamically add data

Four: Download the plug-in


1. Introduction

LoopScrollRect (loop scrolling view) is a plugin for the Unity game engine to create a scrolling view that can scroll in a loop. It can be used to display large lists of items, such as props, quests, characters, etc., with the ability to automatically loop back to the beginning when scrolling to the end.

The principle of LoopScrollRect is to dynamically reuse items in the scroll view instead of creating all items at once. This can greatly reduce memory usage and improve performance. It uses the technology of object pool to achieve the effect of circular scrolling by continuously reusing items during the scrolling process.

When using LoopScrollRect, you need to create a scroll view container and put the items in it into a prefab. Then set this prefab as the item prefab of LoopScrollRect, and set the corresponding parameters, such as the number, size, spacing, etc. of the items. At runtime, LoopScrollRect will automatically adjust the display of the item according to the scrolling position, making it scroll in a loop.

LoopScrollRect also provides some additional functions, such as automatic scrolling, inertial scrolling, scrolling to specified items, etc. You can configure and use these functions according to your specific needs.

In conclusion, LoopScrollRect is a handy tool that can create a scrolling scroll view in Unity to provide a better user experience for the interface of the game.

2. Matters needing attention

1. Prefabricated body design:

LoopScrollRect relies on prefabs to create and display items. When designing prefabs, make sure they are sized and laid out correctly so that they display correctly during scrolling. Incorrect prefab design can cause items to misplace, overlap or display incorrectly.

2. Performance issues:

Although LoopScrollRect improves performance by reusing items, it may still cause performance degradation if the number of items is too large or the content of the items is complex. When using it, pay attention to controlling the number of items and optimizing the rendering effect of the items to improve performance and avoid stuttering.

3. Data update:

If the cyclically scrolling items need to be updated dynamically, such as changing the content or quantity of items according to the game state, the logic of data update needs to be handled carefully. Make sure to recalculate the size and position of the scroll view after updating the data to display the items correctly and avoid inconsistencies between the data and the display.

4. Interactive experience:

LoopScrollRect provides some additional features, such as automatic scrolling and inertial scrolling, but they may affect the user's interactive experience. When using these functions, make appropriate configuration and adjustments according to the specific situation to ensure that users can easily scroll and select items.

5. Version compatibility:

Due to the version update of Unity and the update of plug-ins, there may be situations where LoopScrollRect is not compatible or has bugs in some versions. Before using it, it is recommended to consult relevant documents, communities or developer forums to learn about the latest information and usage suggestions of the plugin.

6. Changes in project content:

If you need to change the content of the items during the scrolling cycle, such as updating text, images, or other elements, you need to make sure to reset the state of the items properly before reusing them. Otherwise, old content may remain, be duplicated, or be misplaced during scrolling.

7. Asynchronous loading:

If the cyclically scrolling item needs to be loaded asynchronously, such as downloading pictures from the network or obtaining remote data, you need to pay attention to the correct handling after the loading is completed. Make sure to properly update the item's content and recalculate the scroll view's size and position after loading is complete.

8. Click event processing:

If you need to add a click event to a circularly scrolling item, you need to pay special attention to the event processing logic. Since items are dynamically re-used, there may be issues with misplaced click events. Make sure that when a click event is triggered, the corresponding item data is accurately obtained and processed.

9. Dynamic layout:

If you need to adjust the layout of items according to different conditions, such as dynamically changing the item size, spacing or arrangement according to the screen size or data volume, you need to carefully handle the update logic when the layout changes. Make sure that when the layout changes, the scroll view's size and position are recalculated correctly, and the item's layout is updated.

10. Multilingual support:

If you need to support multiple languages ​​in a circular scrolling project, you need to pay attention to the localization and dynamic update of the text. Make sure that the item's text content is updated correctly and the scroll view's size and position are recalculated when the language is switched.

⚠️: These are some common pitfalls that may be encountered when using LoopScrollRect, which need to be dealt with and adjusted according to the specific situation. Careful reading of documentation, consulting related resources, and proper testing and debugging can help you overcome these potential problems and use the LoopScrollRect plugin smoothly.

In general, LoopScrollRect is a powerful plugin, but you need to pay attention to these potential problems when using it, and make appropriate adjustments and processing according to the actual situation to ensure that it can correctly meet your needs.

3. Example of use

 1. Examples of common functions of LoopScrollRect:

using UnityEngine;
using UnityEngine.UI;

public class LoopScrollExample : MonoBehaviour
{
    public LoopScrollRect loopScrollRect;
    public GameObject itemPrefab;
    public int itemCount = 100;
    public float spacing = 10f;

    private void Start()
    {
        // 设置循环滚动视图的项预制体和参数
        loopScrollRect.prefabSource = new LoopScrollPrefabSource(itemPrefab);
        loopScrollRect.totalCount = itemCount;
        loopScrollRect.spacing = spacing;

        // 注册滚动到项的事件
        loopScrollRect.onItemIndexChanged.AddListener(OnItemIndexChanged);

        // 初始化循环滚动视图
        loopScrollRect.RefillCells();
    }

    // 滚动到指定项的回调函数
    private void OnItemIndexChanged(int index)
    {
        Debug.Log("滚动到项:" + index);
    }

    // 添加新项到滚动视图
    public void AddNewItem()
    {
        // 更新总项数
        itemCount++;
        loopScrollRect.totalCount = itemCount;

        // 重新初始化滚动视图
        loopScrollRect.RefillCells();
    }

    // 移动到指定项
    public void ScrollToItem(int index)
    {
        loopScrollRect.ScrollToCell(index, 0.5f, 0.5f);
    }

    // 滚动到开头
    public void ScrollToStart()
    {
        loopScrollRect.MoveToStart();
    }

    // 滚动到末尾
    public void ScrollToEnd()
    {
        loopScrollRect.MoveToEnd();
    }

    // 设置自动滚动
    public void SetAutoScroll(bool enable)
    {
        loopScrollRect.autoScroll = enable;
    }

    // 设置惯性滚动
    public void SetInertia(bool enable)
    {
        loopScrollRect.inertia = enable;
    }
}

In the example, the scroll view's item prefab and parameters are first set, and then the scroll view is initialized. During initialization, a callback function for scrolling to items is registered.

Some button-operated functions are provided to demonstrate different functions.

For example:

Clicking the "AddNewItem" button will add a new item to the scroll view,

Click the "ScrollToItem" button to scroll to the specified item,

The "ScrollToStart" and "ScrollToEnd" buttons scroll to the beginning and end.

The "SetAutoScroll" and "SetInertia" buttons are used to set the functions of automatic scrolling and inertial scrolling respectively.

You can make appropriate modifications and extensions according to your specific needs. This example provides a basic framework to help you understand and use the various functions of the LoopScrollRect plugin.

2. Dynamically add data

Suppose each item has a text component for displaying data

using UnityEngine;
using UnityEngine.UI;

public class LoopScrollExample : MonoBehaviour
{
    public LoopScrollRect loopScrollRect;
    public GameObject itemPrefab;
    public int itemCount = 100;
    public float spacing = 10f;

    private void Start()
    {
        // 设置循环滚动视图的项预制体和参数
        loopScrollRect.prefabSource = new LoopScrollPrefabSource(itemPrefab);
        loopScrollRect.totalCount = itemCount;
        loopScrollRect.spacing = spacing;

        // 注册滚动到项的事件
        loopScrollRect.onItemIndexChanged.AddListener(OnItemIndexChanged);

        // 初始化循环滚动视图
        loopScrollRect.RefillCells();
    }

    // 滚动到指定项的回调函数
    private void OnItemIndexChanged(int index)
    {
        Debug.Log("滚动到项:" + index);
    }

    // 动态设置项数据
    public void SetItemData(int index, string data)
    {
        // 获取指定索引的项
        LoopScrollRectItem item = loopScrollRect.GetItemByIndex(index);

        if (item != null)
        {
            // 获取项的文本组件
            Text textComponent = item.GetComponentInChildren<Text>();

            if (textComponent != null)
            {
                // 设置文本数据
                textComponent.text = data;
            }
        }
    }
}

In this example, we added a function called `SetItemData` to dynamically set the item's data. The function takes as parameters the index of the item and the data to set.

Inside the function, we first get the item at the specified index through the `GetItemByIndex` method. If the item exists, we then get the text component of the item. Then, we can operate on the text component as needed, such as setting the text content.

By calling the `SetItemData` function, you can dynamically set the item data in the circular scroll view according to your specific needs. For example, you could dynamically update an item's text content based on game state or other factors, so that the scroll view displays the most recent data.

⚠️: When using `GetItemByIndex` to get an item, make sure the index is in a valid range and that the scroll view is initialized and populated with items. Otherwise, the retrieved item may be null and needs to be checked for validity.

This example shows how to dynamically set data for items in a circular scroll view, giving you the flexibility to update and display content as needed.

certainly! In addition to dynamically setting item data, there are some other usage examples. Here are some common examples:

1. Custom item style: You can implement a custom item style by modifying the item prefab. For example, add pictures, buttons or other UI elements, adjust text styles or add animation effects to create unique scroll items.

2. Multi-column layout: By default, LoopScrollRect is a single-column layout, but you can also configure it as a multi-column layout. By adjusting the size of the item prefab and the width of the scroll view, you can achieve a multi-column layout effect.

3. Dynamically adjust the number of items: In some cases, you may need to dynamically adjust the number of items according to changes in the amount of data. You can use the `SetTotalCount` function to update the total number of items and call `RefillCells` to reinitialize the scroll view.

4. Click event processing: If you need to add click event processing to the scroll item, you can add a Button component to the item prefab and register a click event callback function for the button. In the callback function, you can get the currently clicked item index and perform corresponding operations.

5. Advanced function extension: LoopScrollRect also provides other advanced functions, such as scrolling to the specified item, jumping to the specified position, scrolling animation control, etc. You can refer to the documentation or sample code of LoopScrollRect to learn how to use more functions.

Four: Download the plug-in

git download

local download

Guess you like

Origin blog.csdn.net/lalate/article/details/131656662