كيفية تنفيذ التمرير اللانهائي في Unity UI

يشير التمرير اللانهائي في واجهة المستخدم إلى تقنية حيث يتم تحميل المحتوى (مثل القوائم أو الشبكات أو طرق عرض التمرير) بشكل ديناميكي ويعرض عناصر إضافية أثناء قيام المستخدم بالتمرير، مما يخلق وهمًا بمحتوى غير محدود. تُستخدم هذه الميزة بشكل شائع في التطبيقات والألعاب لتقديم مجموعات أو مجموعات بيانات كبيرة دون إغراق المستخدم بجميع العناصر في وقت واحد.

في هذا البرنامج التعليمي، سوف نتعلم كيفية تنفيذ نظام تمرير لا نهائي فعال ضمن إطار عمل واجهة مستخدم Unity. سنغطي إعداد عرض التمرير، وتحميل المحتوى ديناميكيًا، والتعامل مع أحداث التمرير، وتحسين الأداء.

الخطوة 1: إعداد المشروع

ابدأ بإنشاء مشروع جديد ثنائي أو ثلاثي الأبعاد في Unity. قم بتسمية مشروعك "InfiniteScrollingUI". تأكد من تثبيت مكونات واجهة المستخدم الضرورية عن طريق تحديد Window -> Package Manager وتثبيت حزم UIElements وTextMeshPro إذا لم تكن مثبتة بالفعل.

الخطوة 2: إنشاء عرض التمرير

في محرر Unity:

1. انقر بزر الماوس الأيمن في نافذة Hierarchy وحدد UI -> ScrollView.
2. قم بتوسيع ScrollView في التسلسل الهرمي لتحديد كائنات اللعبة Viewport وContent.
3. احذف المكون الافتراضي Text من كائن اللعبة Content.

الخطوة 3: إعداد قالب العنصر

قم بإنشاء قالب واجهة المستخدم للعناصر التي سيتم عرضها في عرض التمرير:

1. انقر بزر الماوس الأيمن على كائن اللعبة Content وحدد UI -> Text. سيكون هذا هو قالب العنصر الخاص بك.
2. قم بتخصيص مظهر عنصر النص ليناسب التصميم الخاص بك (على سبيل المثال، حجم الخط واللون).
3. قم بتعطيل قالب العنصر عن طريق إلغاء تحديد مكون Text لمنع ظهوره في اللعبة.

الخطوة 4: برمجة سلوك التمرير اللانهائي

قم بإنشاء برنامج نصي للتعامل مع التحميل الديناميكي وعرض العناصر في عرض التمرير. انقر بزر الماوس الأيمن فوق المجلد Assets، وحدد Create -> C# Script، وقم بتسميته "InfiniteScrollingUI". انقر نقرًا مزدوجًا فوق البرنامج النصي لفتحه في محرر التعليمات البرمجية الخاص بك.

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

قم بإرفاق البرنامج النصي InfiniteScrollingUI بكائن اللعبة ScrollView. في نافذة المفتش، قم بتعيين Item Template وContent RectTransforms إلى الحقول الخاصة بهم.

الخطوة 5: التعامل مع أحداث التمرير

أضف مشغل حدث إلى ScrollView لاكتشاف أحداث التمرير واستدعاء طريقة OnScroll للبرنامج النصي InfiniteScrollingUI.

1. حدد كائن اللعبة ScrollView في التسلسل الهرمي.
2. في نافذة المفتش، انقر فوق إضافة مكون وحدد Event Trigger.
3. انقر على إضافة نوع حدث جديد واختر Scroll.
4. اسحب كائن اللعبة ScrollView من التسلسل الهرمي إلى الحقل Object الخاص بحدث التمرير الجديد.
5. في القائمة المنسدلة Event، حدد InfiniteScrollingUI -> OnScroll.

الخطوة 6: اختبار نظام التمرير اللانهائي

اضغط على زر التشغيل في Unity لاختبار نظام التمرير اللانهائي لديك. قم بالتمرير لأعلى ولأسفل في ScrollView لرؤية العناصر التي يتم تحميلها وإعادة تدويرها ديناميكيًا.

خاتمة

يعد تنفيذ نظام التمرير اللانهائي في Unity UI أسلوبًا قيمًا للتعامل مع مجموعات البيانات الكبيرة وتحسين استجابة واجهة المستخدم. من خلال الاستفادة من تحميل المحتوى الديناميكي وإعادة تدويره، يمكنك إنشاء تجربة تصفح سلسة للمستخدمين، سواء كانوا يتنقلون عبر القوائم أو الشبكات أو مكونات واجهة المستخدم الأخرى.

قم بتجربة تخطيطات مختلفة لواجهة المستخدم، وسرعات التمرير، والتحسينات لتخصيص نظام التمرير اللانهائي ليناسب متطلبات مشروعك المحددة. لا يعمل هذا النهج على تعزيز مشاركة المستخدم فحسب، بل يضمن أيضًا أداء تطبيقك بكفاءة عبر الأجهزة والأنظمة الأساسية المختلفة.