So implementieren Sie unendliches Scrollen in der Unity-Benutzeroberfläche

Infinite Scrolling in der Benutzeroberfläche bezeichnet eine Technik, bei der Inhalte (wie Listen, Raster oder Scroll-Ansichten) dynamisch geladen werden und zusätzliche Elemente anzeigen, während der Benutzer scrollt. Dadurch entsteht die Illusion von unbegrenztem Inhalt. Diese Funktion wird häufig in Anwendungen und Spielen verwendet, um große Datensätze oder Sammlungen darzustellen, ohne den Benutzer mit allen Elementen auf einmal zu überfordern.

In diesem Tutorial erfahren Sie, wie Sie ein effizientes Endlos-Scrolling-System im UI-Framework von Unity implementieren. Wir behandeln das Einrichten einer Scroll-Ansicht, das dynamische Laden von Inhalten, die Handhabung von Scroll-Ereignissen und die Optimierung der Leistung.

Schritt 1: Einrichten des Projekts

Beginnen Sie mit der Erstellung eines neuen 2D- oder 3D-Projekts in Unity. Nennen Sie Ihr Projekt "InfiniteScrollingUI". Stellen Sie sicher, dass Sie die erforderlichen UI-Komponenten installiert haben, indem Sie Fenster -> Paketmanager auswählen und die Pakete UIElements und TextMeshPro installieren, falls sie noch nicht installiert sind.

Schritt 2: Erstellen der Scroll-Ansicht

Im Unity-Editor:

1. Klicken Sie mit der rechten Maustaste in das Fenster Hierarchie und wählen Sie UI -> ScrollView.
2. Erweitern Sie die ScrollView in der Hierarchie, um die Spielobjekte Viewport und Content zu finden.
3. Löschen Sie die Standardkomponente Text aus dem Spielobjekt Content.

Schritt 3: Einrichten der Artikelvorlage

Erstellen Sie eine UI-Vorlage für die Elemente, die in der Bildlaufansicht angezeigt werden:

1. Klicken Sie mit der rechten Maustaste auf das Spielobjekt Content und wählen Sie UI -> Text. Dies wird Ihre Artikelvorlage.
2. Passen Sie das Erscheinungsbild des Textelements Ihrem Design an (z. B. Schriftgröße, Farbe).
3. Deaktivieren Sie die Artikelvorlage, indem Sie die Komponente Text deaktivieren, um zu verhindern, dass sie im Spiel sichtbar ist.

Schritt 4: Skripten des unendlichen Scrollverhaltens

Erstellen Sie ein Skript, um das dynamische Laden und Anzeigen von Elementen in der Bildlaufansicht zu handhaben. Klicken Sie mit der rechten Maustaste in den Ordner Assets, wählen Sie Erstellen -> C#-Skript und nennen Sie es "InfiniteScrollingUI". Doppelklicken Sie auf das Skript, um es in Ihrem Code-Editor zu öffnen.

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

Fügen Sie das Skript InfiniteScrollingUI an das Spielobjekt ScrollView an. Weisen Sie im Inspector-Fenster die RectTransforms Item Template und Content den jeweiligen Feldern zu.

Schritt 5: Scroll-Ereignisse verarbeiten

Fügen Sie der ScrollView einen Ereignisauslöser hinzu, um Scroll-Ereignisse zu erkennen und die Methode OnScroll des InfiniteScrollingUI-Skripts aufzurufen.

1. Wählen Sie in der Hierarchie das Spielobjekt ScrollView aus.
2. Klicken Sie im Inspektorfenster auf Komponente hinzufügen und wählen Sie Ereignisauslöser.
3. Klicken Sie auf Neuen Ereignistyp hinzufügen und wählen Sie Scrollen.
4. Ziehen Sie das Spielobjekt ScrollView aus der Hierarchie in das Feld Object des neuen Scroll-Ereignisses.
5. Wählen Sie im Dropdown-Menü Event die Option InfiniteScrollingUI -> OnScroll aus.

Schritt 6: Testen des Infinite-Scrolling-Systems

Drücken Sie die Wiedergabetaste in Unity, um Ihr Endlos-Scrolling-System zu testen. Scrollen Sie in der ScrollView nach oben und unten, um zu sehen, wie die Elemente dynamisch geladen und wiederverwendet werden.

Abschluss

Die Implementierung eines Infinite-Scrolling-Systems in Unity UI ist eine wertvolle Technik für die Handhabung großer Datensätze und die Verbesserung der Reaktionsfähigkeit der Benutzeroberfläche. Durch die Nutzung des dynamischen Ladens und Wiederverwendens von Inhalten können Sie ein nahtloses Browsing-Erlebnis für Benutzer schaffen, unabhängig davon, ob sie durch Listen, Raster oder andere UI-Komponenten navigieren.

Experimentieren Sie mit verschiedenen UI-Layouts, Scrollgeschwindigkeiten und Optimierungen, um das Infinite-Scrolling-System an Ihre spezifischen Projektanforderungen anzupassen. Dieser Ansatz verbessert nicht nur die Benutzereinbindung, sondern stellt auch sicher, dass Ihre Anwendung auf verschiedenen Geräten und Plattformen effizient funktioniert.