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

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

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

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

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

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

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

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

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

مساحة عرض واجهة برمجة التطبيقات

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

• 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.topAppBarColors(
                    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.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.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.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 - شريط التطبيق السفلي
• سافولد