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

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

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

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

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

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

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

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

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

• 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

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

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

شريط التطبيقات العلوي الذي يتم ضبطه في المنتصف هو نفسه شريط التطبيقات الصغير، مع أنّ العنوان يكون في المنتصف داخل المكوّن. لتنفيذ ذلك، استخدِم العنصر القابل للتجميع المخصّص 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

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

متوسط

يضع شريط التطبيق العلوي المتوسط الحجم العنوان أسفل أي رموز إضافية. لإنشاء واحد، استخدِم العنصر القابل للتجميع 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():

كبير

يشبه شريط التطبيقات العلوي الكبير الشريط المتوسط، إلا أنّ المسافة الفارغة بين العنوان والرموز أكبر، كما أنّه يشغل مساحة أكبر على الشاشة بشكل عام. ل إنشاء عنصر، استخدِم العنصر القابل للتجميع 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

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

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

لإنشاء شريط تطبيق سفلي، استخدِم العنصر القابل للتجميع 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

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

مصادر إضافية

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