إضافة مؤشر صفحة مخصّص

باستخدام مؤشرات الصفحات، يمكنك مساعدة المستخدمين في فهم موقعهم الحالي ضمن محتوى تطبيقك، ما يقدّم لهم مؤشرًا مرئيًا للتقدّم. تكون هذه العلامات الإرشادية للتنقّل مفيدة عند عرض المحتوى بشكل تسلسلي، مثل عمليات تنفيذ لوحات العرض الدوّارة أو معارض الصور وعروض الشرائح أو تقسيم الصفحات في القوائم.

توافق الإصدار

يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو إصدار أحدث.

التبعيات

إنشاء شريط تنقّل أفقي باستخدام مؤشر صفحة مخصّص

ينشئ الرمز التالي وحدة تنقّل أفقية تتضمّن مؤشر صفحة، ما يمنح المستخدم إشارات مرئية لعدد الصفحات والصفحة التي تكون مرئية:

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

النقاط الرئيسية حول الرمز

  • ينفِّذ الرمز HorizontalPager، ما يتيح لك التمرير سريعًا أفقيًا بين صفحات المحتوى المختلفة. في هذه الحالة، تعرِض كل صفحة رقم الصفحة.
  • تعمل الدالة rememberPagerState() على إعداد فهرس الصفحات وضبط عدد الصفحات على 4. تنشئ هذه الدالة عنصر حالة يتتبّع الصفحة الحالية، ويتيح لك التحكّم في فهرس الصفحات.
  • تُستخدَم السمة pagerState.currentPage لتحديد مؤشر الصفحة الذي يجب تمييزه.
  • يظهر مؤشر الصفحة في أداة تنقّل بين الصفحات التي تمّ تطبيق Row عليها.
  • يتم رسم دائرة بحجم 16 نقطة شاشة لكل صفحة في شريط التنقل. يتم عرض مؤشر الصفحة الحالية على شكل DarkGray، في حين تظهر LightGray في بقية دوائر المؤشر.
  • يعرض العنصر Text القابل للتجميع ضمن HorizontalPager النص "الصفحة: [رقم الصفحة]" على كل صفحة.

النتائج

الشكل 1. شريط تنقّل يعرض مؤشر دائرة أسفل المحتوى

المجموعات التي تتضمّن هذا الدليل

هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا:

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

إذا كانت لديك أسئلة أو ملاحظات

يمكنك الانتقال إلى صفحة الأسئلة الشائعة والاطّلاع على الأدلة السريعة أو التواصل معنا وإعلامنا برأيك.
الانتقال إلى الأسئلة الشائعة تقديم ملاحظات