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