Cách triển khai tính năng cuộn vô hạn trong Unity UI

Cuộn vô hạn trong giao diện người dùng đề cập đến một kỹ thuật trong đó nội dung (chẳng hạn như danh sách, lưới hoặc chế độ xem cuộn) tải động và hiển thị các mục bổ sung khi người dùng cuộn, tạo ảo giác về nội dung không giới hạn. Tính năng này thường được sử dụng trong các ứng dụng và trò chơi để trình bày các tập dữ liệu hoặc bộ sưu tập lớn mà không khiến người dùng choáng ngợp với tất cả các mục cùng một lúc.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách triển khai hệ thống cuộn vô hạn hiệu quả trong khung giao diện người dùng của Unity. Chúng tôi sẽ đề cập đến việc thiết lập chế độ xem cuộn, tải động nội dung, xử lý các sự kiện cuộn và tối ưu hóa hiệu suất.

Bước 1: Thiết lập dự án

Bắt đầu bằng cách tạo dự án 2D hoặc 3D mới trong Unity. Đặt tên cho dự án của bạn "InfiniteScrollingUI". Đảm bảo bạn đã cài đặt các thành phần giao diện người dùng cần thiết bằng cách chọn các gói Window -> Package Manager và cài đặt các gói UIElements và TextMeshPro nếu chưa được cài đặt.

Bước 2: Tạo chế độ xem cuộn

Trong trình chỉnh sửa Unity:

Nhấp chuột phải vào cửa sổ Hierarchy và chọn UI -> ScrollView.
Mở rộng ScrollView trong Hệ thống phân cấp để định vị các đối tượng trò chơi Viewport và Content.
Xóa thành phần Text mặc định khỏi đối tượng trò chơi Content.

Bước 3: Thiết lập mẫu vật phẩm

Tạo mẫu giao diện người dùng cho các mục sẽ được hiển thị trong chế độ xem cuộn:

Nhấp chuột phải vào đối tượng trò chơi Content và chọn UI -> Text. Đây sẽ là mẫu vật phẩm của bạn.
Tùy chỉnh giao diện của thành phần Văn bản để phù hợp với thiết kế của bạn (ví dụ: cỡ chữ, màu sắc).
Vô hiệu hóa mẫu vật phẩm bằng cách bỏ chọn thành phần Text để ngăn nó hiển thị trong trò chơi.

Bước 4: Viết kịch bản cho hành vi cuộn vô hạn

Tạo tập lệnh để xử lý việc tải và hiển thị động các mục trong chế độ xem cuộn. Nhấp chuột phải vào thư mục Assets, chọn Create -> C# Script và đặt tên là "InfiniteScrollingUI". Bấm đúp vào tập lệnh để mở tập lệnh trong trình chỉnh sửa mã của bạn.

// InfiniteScrollingUI.cs
using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;

public class InfiniteScrollingUI : MonoBehaviour
{
    public RectTransform itemTemplate;
    public RectTransform content;

    private List items = new List();

    void Start()
    {
        InitializeItems();
    }

    void InitializeItems()
    {
        for (int i = 0; i < 20; i++)
        {
            RectTransform newItem = Instantiate(itemTemplate, content);
            newItem.gameObject.SetActive(true);
            newItem.GetComponent().text = "Item " + i;
            items.Add(newItem);
        }
    }

    public void OnScroll(Vector2 scrollDelta)
    {
        if (scrollDelta.y < 0 && content.anchoredPosition.y < -itemTemplate.rect.height * (items.Count - 10))
        {
            RectTransform firstItem = items[0];
            items.RemoveAt(0);
            firstItem.anchoredPosition = items[items.Count - 1].anchoredPosition + Vector2.up * itemTemplate.rect.height;
            items.Add(firstItem);
        }
        else if (scrollDelta.y > 0 && content.anchoredPosition.y > 0)
        {
            RectTransform lastItem = items[items.Count - 1];
            items.RemoveAt(items.Count - 1);
            lastItem.anchoredPosition = items[0].anchoredPosition - Vector2.up * itemTemplate.rect.height;
            items.Insert(0, lastItem);
        }
    }
}

Đính kèm tập lệnh InfiniteScrollingUI vào đối tượng trò chơi ScrollView. Trong cửa sổ Thanh tra, gán Item Sample và Content RectTransforms cho các trường tương ứng của chúng.

Bước 5: Xử lý sự kiện cuộn

Thêm trình kích hoạt sự kiện vào ScrollView để phát hiện các sự kiện cuộn và gọi phương thức OnScroll của tập lệnh InfiniteScrollingUI.

Chọn đối tượng trò chơi ScrollView trong Hệ thống phân cấp.
Trong cửa sổ Thanh tra, nhấp vào Thêm Thành phần và chọn Trình kích hoạt sự kiện.
Nhấp vào Thêm loại sự kiện mới và chọn Cuộn.
Kéo đối tượng trò chơi ScrollView từ Hệ thống phân cấp vào trường Object của sự kiện cuộn mới.
Trong danh sách thả xuống Event, chọn InfiniteScrollingUI -> OnScroll.

Bước 6: Kiểm tra hệ thống cuộn vô hạn

Nhấn nút phát trong Unity để kiểm tra hệ thống cuộn vô hạn của bạn. Cuộn lên và xuống trong ScrollView để xem các mục đang tải và tái chế động.

Phần kết luận

Triển khai hệ thống cuộn vô hạn trong giao diện người dùng Unity là một kỹ thuật có giá trị để xử lý các tập dữ liệu lớn và cải thiện khả năng phản hồi của giao diện người dùng. Bằng cách tận dụng việc tải và tái chế nội dung động, bạn có thể tạo trải nghiệm duyệt web liền mạch cho người dùng, cho dù họ đang điều hướng qua danh sách, lưới hay các thành phần giao diện người dùng khác.

Thử nghiệm với các bố cục giao diện người dùng, tốc độ cuộn và tối ưu hóa khác nhau để điều chỉnh hệ thống cuộn vô hạn theo yêu cầu dự án cụ thể của bạn. Cách tiếp cận này không chỉ nâng cao mức độ tương tác của người dùng mà còn đảm bảo ứng dụng của bạn hoạt động hiệu quả trên các thiết bị và nền tảng khác nhau.

thống nhất ui vô hạn cuộn hệ thống lớn bộ dữ liệu nội dung năng động đang tải tối ưu hóa hiệu suất tái chế người dùng