Sådan implementeres uendelig scrolling i Unity UI

Uendelig rulning i brugergrænsefladen refererer til en teknik, hvor indhold (såsom lister, gitter eller rullevisninger) dynamisk indlæses og viser yderligere elementer, mens brugeren ruller, hvilket skaber en illusion af ubegrænset indhold. Denne funktion bruges almindeligvis i applikationer og spil til at præsentere store datasæt eller samlinger uden at overvælde brugeren med alle elementer på én gang.

I denne tutorial lærer vi, hvordan man implementerer et effektivt uendeligt rullesystem inden for Unitys UI-ramme. Vi dækker opsætning af en rullevisning, dynamisk indlæsning af indhold, håndtering af rullebegivenheder og optimering af ydeevne.

Trin 1: Opsætning af projektet

Start med at oprette et nyt 2D- eller 3D-projekt i Unity. Navngiv dit projekt "InfiniteScrollingUI". Sørg for, at du har de nødvendige UI-komponenter installeret ved at vælge Window -> Package Manager og installere UIElements og TextMeshPro-pakker, hvis de ikke allerede er installeret.

Trin 2: Oprettelse af rullevisning

I Unity-editoren:

1. Højreklik i vinduet Hierarchy og vælg UI -> ScrollView.
2. Udvid ScrollView i hierarkiet for at finde spilobjekterne Viewport og Content.
3. Slet standard Text komponenten fra Content spilobjektet.

Trin 3: Opsætning af elementskabelonen

Opret en UI-skabelon for de elementer, der vil blive vist i rullevisningen:

1. Højreklik på Content spilobjektet og vælg UI -> Text. Dette vil være din vareskabelon.
2. Tilpas udseendet af tekstelementet, så det passer til dit design (f.eks. skriftstørrelse, farve).
3. Deaktiver elementskabelonen ved at fjerne markeringen af ​​Text-komponenten for at forhindre, at den er synlig i spillet.

Trin 4: Scripting af den uendelige rulleadfærd

Opret et script til at håndtere den dynamiske indlæsning og visning af elementer i rullevisningen. Højreklik i mappen Assets, vælg Create -> C# Script, og giv det navnet "InfiniteScrollingUI". Dobbeltklik på scriptet for at åbne det i din kodeeditor.

// 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);
        }
    }
}

Vedhæft InfiniteScrollingUI-scriptet til ScrollView spilobjektet. Tildel Item Template og Content RectTransforms til deres respektive felter i Inspector-vinduet.

Trin 5: Håndtering af Scroll-begivenheder

Tilføj en hændelsesudløser til ScrollView for at registrere scrollhændelser og kalde OnScroll-metoden for InfiniteScrollingUI-scriptet.

1. Vælg ScrollView spilobjektet i hierarkiet.
2. I Inspector-vinduet skal du klikke på Add Component og vælge Event Trigger.
3. Klik på Tilføj ny begivenhedstype og vælg Rul.
4. Træk spilobjektet ScrollView fra hierarkiet til Object-feltet i den nye rullebegivenhed.
5. I rullemenuen Event skal du vælge InfiniteScrollingUI -> OnScroll.

Trin 6: Test af Infinite Scrolling System

Tryk på afspilningsknappen i Unity for at teste dit uendelige rullesystem. Rul op og ned i ScrollView for at se elementerne dynamisk indlæsning og genbrug.

Konklusion

Implementering af et uendeligt rullesystem i Unity UI er en værdifuld teknik til at håndtere store datasæt og forbedre brugergrænsefladens reaktionsevne. Ved at udnytte dynamisk indlæsning og genbrug af indhold kan du skabe en problemfri browseroplevelse for brugere, uanset om de navigerer gennem lister, gitter eller andre brugergrænsefladekomponenter.

Eksperimenter med forskellige UI-layouts, rullehastigheder og optimeringer for at skræddersy det uendelige rullesystem til dine specifikke projektkrav. Denne tilgang øger ikke kun brugerengagementet, men sikrer også, at din applikation fungerer effektivt på tværs af forskellige enheder og platforme.