عرض شريط تطبيق سفلي

أنشئ شريط تطبيق سفلي لمساعدة المستخدمين في التنقّل والوصول إلى الوظائف في تطبيقك. اتّبِع هذه الإرشادات لإضافة شريط تطبيق سفلي إلى تطبيقك باستخدام العنصر القابل للتجميع BottomAppBar.

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

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

التبعيات

إنشاء شريط تطبيق سفلي

استخدِم الرمز البرمجي التالي لإنشاء شريط تطبيق سفلي يحتوي على أربعة أزرار رموز، وزر إجراء عائم:

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}

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

  • Scaffold خارجي تم ضبط bottomBar له
  • عملية تنفيذ bottomBar تحتوي على قائمة إجراءات
  • الإجراءات التي هي عمليات تنفيذ IconButton التي تحتوي على Icon لنص وصف الصورة والمحتوى، ولكل منها دالة onClick لامدا لتنفيذ هذه الإجراءات

يمكنك تمرير العناصر القابلة للتجميع للمَعلمات الرئيسية التالية:

  • actions: سلسلة من الرموز التي تظهر على الجانب الأيسر من الشريط وعادةً ما تكون هذه الإجراءات إما إجراءات رئيسية للشاشة المحدّدة أو عناصر تنقّل.
  • floatingActionButton: زر الإجراء العائم الذي يظهر على الجانب الأيمن من الشريط

النتائج

 مثال على شريط التطبيق السفلي
الشكل 1. مثال على شريط تطبيق في أسفل الشاشة

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

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

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

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

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