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

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

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

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

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

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

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

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

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

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

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

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

سلوك التنقّل

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

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

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

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

أمثلة

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

صغير

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

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

@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.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