أشرطة التطبيقات

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

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

الشكل 1. شريط التطبيقات العلوي (على اليسار) وشريط التطبيقات السفلي (على اليمين)

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

ملاحظة مهمة: يتم بشكل عام تمرير أشرطة التطبيقات إلى العنصر القابل للتجميع Scaffold الذي يحتوي على مَعلمات محدّدة لتلقّيها. للحصول على مزيد من المعلومات حول كيفية توفير Scaffold طريقة ملائمة لتنظيم بنية تطبيقك، يُرجى الانتقال إلى صفحة "Scaffold".

أهم أشرطة التطبيقات

يوضّح الجدول التالي الأنواع الأربعة لشرائط التطبيقات العلوية:

النوع	مثال
صغير: للّوحات التي لا تتطلّب الكثير من التنقّل أو الإجراءات.
المحاذاة إلى الوسط: للشاشات التي تحتوي على إجراء أساسي واحد.
متوسط: للشاشات التي تتطلّب قدرًا متوسطًا من التنقّل والإجراءات.
كبير: للشاشات التي تتطلّب الكثير من التنقّل والإجراءات.

واجهة برمجة التطبيقات

تتشابه إلى حد كبير العناصر القابلة للتجميع المختلفة التي تتيح لك تنفيذ شريط الأدوات الأربعة المختلفين في أعلى التطبيق. يتشاركان عدة مَعلمات رئيسية:

• title: النص الذي يظهر في شريط التطبيق
• navigationIcon: الرمز الأساسي للتنقّل يظهر على يسار شريط التطبيق.
• actions: الأيقونات التي تمنح المستخدم إمكانية الوصول إلى الإجراءات الرئيسية وتظهر على يسار شريط التطبيقات.
• ‫scrollBehavior: لتحديد كيفية استجابة شريط التطبيق العلوي لانتقال التمرير في المحتوى الداخلي للإطار.
• ‫colors: لتحديد كيفية ظهور شريط التطبيق

سلوك التمرير

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

هناك ثلاثة أنواع من TopAppBarScrollBehavior. وهي على النحو التالي:

• enterAlwaysScrollBehavior: عندما يسحب المستخدم المحتوى الداخلي للإطار التمهيدي، يتم تصغير شريط التطبيق العلوي. يتم توسيع شريط التطبيق عندما يجذب المستخدم المحتوى الداخلي للأسفل.
• exitUntilCollapsedScrollBehavior: يشبه enterAlwaysScrollBehavior، ولكن يتم توسيع شريط التطبيق أيضًا عندما يصل المستخدم إلى نهاية المحتوى الداخلي للإطار.
• pinnedScrollBehavior: يبقى شريط التطبيقات في مكانه ولا يستجيب للتنقل.

تطبّق الأمثلة التالية العديد من هذه الخيارات.

أمثلة

تقدّم الأقسام التالية عمليات تنفيذ للأنواع الأربعة المختلفة من أشرطة التطبيقات العلوية، بما في ذلك أمثلة متنوعة حول كيفية التحكّم في سلوك الانتقال للأعلى أو للأسفل.

صغير

لإنشاء شريط تطبيق صغير في أعلى الشاشة، استخدِم العنصر القابل للتجميع TopAppBar. هذا هو أبسط شريط تطبيق علوي ممكن، وفي هذا المثال يحتوي على عنوان فقط.

لا يُرسِل المثال التالي إلى TopAppBar قيمة scrollBehavior، وبالتالي لا يستجيب للتمرير في المحتوى الداخلي.

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

تظهر عملية التنفيذ هذه على النحو التالي:

الشكل 2. شريط تطبيق صغير في أعلى الشاشة

تمت المحاذاة إلى الوسط

شريط التطبيقات العلوي الذي يتم ضبطه في المنتصف هو نفسه شريط التطبيقات الصغير، مع أنّ العنوان يكون في المنتصف داخل المكوّن. لتنفيذ ذلك، استخدِم العنصر القابل للتجميع المخصّص CenterAlignedTopAppBar.

يستخدم هذا المثال enterAlwaysScrollBehavior() للحصول على القيمة التي يتم تمريرها لـ scrollBehavior. ونتيجةً لذلك، يتم تصغير الشريط عندما ينتقل المستخدم إلى المحتوى الداخلي للإطار.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

تظهر عملية التنفيذ هذه على النحو التالي:

الشكل 3. شريط التطبيقات العلوي الذي تم توسيطه

متوسط

يضع شريط التطبيق العلوي المتوسط العنوان أسفل أي رموز إضافية. لإنشاء واحد، استخدِم العنصر القابل للتجميع MediumTopAppBar.

مثل المقتطف السابق، يستخدم هذا المثال enterAlwaysScrollBehavior() لمحاولة الحصول على القيمة التي يتم تمريرها إلى scrollBehavior.

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

تظهر طريقة التنفيذ هذه على النحو التالي مع عرض توضيحي لطريقة عمل التمرير من enterAlwaysScrollBehavior():

الشكل 4. شريط التطبيقات العلوي الذي تم توسيطه

كبير

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

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

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

تظهر عملية التنفيذ هذه على النحو التالي:

الشكل 5. مثال على تنفيذ شريط تطبيق كبير في أعلى الشاشة

شريط التطبيق السفلي

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

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

@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."
        )
    }
}
AppBar.kt

تظهر عملية التنفيذ هذه على النحو التالي:

الشكل 6. مثال على تنفيذ شريط تطبيق سفلي

ملاحظة: يمكنك أيضًا استخدام BottomAppBar بدون إدخال قيمة لكل من actions وfloatingActionButton. في هذه الحالة، يمكنك إنشاء شريط تطبيق سفلي مخصّص من خلال ملء BottomAppBar بالمحتوى كما تفعل مع الحاويات الأخرى.

مصادر إضافية

• مستندات Material3 - شريط التطبيق العلوي
• مستندات Material3 - شريط التطبيق السفلي
• Scaffold