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

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

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

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

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

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

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

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

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

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

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

الوسيط

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