Comment implémenter le défilement infini dans l'interface utilisateur Unity

Le défilement infini dans l'interface utilisateur fait référence à une technique dans laquelle le contenu (tel que des listes, des grilles ou des vues de défilement) se charge et affiche dynamiquement des éléments supplémentaires au fur et à mesure que l'utilisateur fait défiler, créant une illusion de contenu illimité. Cette fonctionnalité est couramment utilisée dans les applications et les jeux pour présenter de grands ensembles de données ou des collections sans surcharger l'utilisateur avec tous les éléments en même temps.

Dans ce didacticiel, nous apprendrons comment implémenter un système de défilement infini efficace dans le cadre de l'interface utilisateur d'Unity. Nous aborderons la configuration d'une vue de défilement, le chargement dynamique du contenu, la gestion des événements de défilement et l'optimisation des performances.

Étape 1: Mise en place du projet

Commencez par créer un nouveau projet 2D ou 3D dans Unity. Nommez votre projet "InfiniteScrollingUI". Assurez-vous que les composants d'interface utilisateur nécessaires sont installés en sélectionnant Window -> Package Manager et en installant les packages UIElements et TextMeshPro s'ils ne sont pas déjà installés.

Étape 2: Création de la vue de défilement

Dans l'éditeur Unity:

1. Cliquez avec le bouton droit dans la fenêtre Hierarchy et sélectionnez UI -> ScrollView.
2. Développez ScrollView dans la hiérarchie pour localiser les objets de jeu Viewport et Content.
3. Supprimez le composant Text par défaut de l'objet de jeu Content.

Étape 3: configuration du modèle d'élément

Créez un modèle d'interface utilisateur pour les éléments qui seront affichés dans la vue déroulante:

1. Faites un clic droit sur l'objet de jeu Content et sélectionnez UI -> Text. Ce sera votre modèle d'article.
2. Personnalisez l'apparence de l'élément Texte en fonction de votre conception (par exemple, taille de police, couleur).
3. Désactivez le modèle d'élément en décochant le composant Text pour l'empêcher d'être visible dans le jeu.

Étape 4: Scripter le comportement de défilement infini

Créez un script pour gérer le chargement et l'affichage dynamiques des éléments dans la vue déroulante. Cliquez avec le bouton droit sur le dossier Assets, sélectionnez Create -> C# Script et nommez-le "InfiniteScrollingUI". Double-cliquez sur le script pour l'ouvrir dans votre éditeur de code.

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

Attachez le script InfiniteScrollingUI à l'objet de jeu ScrollView. Dans la fenêtre Inspecteur, attribuez les RectTransforms Item Template et Content à leurs champs respectifs.

Étape 5: Gestion des événements de défilement

Ajoutez un déclencheur d'événement au ScrollView pour détecter les événements de défilement et appelez la méthode OnScroll du script InfiniteScrollingUI.

1. Sélectionnez l'objet de jeu ScrollView dans la hiérarchie.
2. Dans la fenêtre Inspecteur, cliquez sur Ajouter un composant et sélectionnez Event Trigger.
3. Cliquez sur Ajouter un nouveau type d'événement et choisissez Défilement.
4. Faites glisser l'objet de jeu ScrollView de la hiérarchie vers le champ Object du nouvel événement de défilement.
5. Dans la liste déroulante Event, sélectionnez InfiniteScrollingUI -> OnScroll.

Étape 6: Test du système de défilement infini

Appuyez sur le bouton de lecture en Unity pour tester votre système de défilement infini. Faites défiler de haut en bas dans ScrollView pour voir les éléments chargés et recyclés dynamiquement.

Conclusion

La mise en œuvre d'un système de défilement infini dans l'interface utilisateur Unity est une technique précieuse pour gérer de grands ensembles de données et améliorer la réactivité de l'interface utilisateur. En tirant parti du chargement et du recyclage dynamiques du contenu, vous pouvez créer une expérience de navigation transparente pour les utilisateurs, qu'ils naviguent dans des listes, des grilles ou d'autres composants de l'interface utilisateur.

Expérimentez avec différentes dispositions d'interface utilisateur, vitesses de défilement et optimisations pour adapter le système de défilement infini aux exigences spécifiques de votre projet. Cette approche améliore non seulement l'engagement des utilisateurs, mais garantit également que votre application fonctionne efficacement sur différents appareils et plates-formes.