بعد أن يستهدف تطبيقك الإصدار 35 من حزمة تطوير البرامج (SDK) أو إصدارًا أحدث، يتم فرض ميزة "العرض حتى حافة الشاشة". يكون شريط حالة النظام وأشرطة التنقّل بالإيماءات شفافة، بينما يكون شريط التنقّل بثلاثة أزرار شبه شفاف. اتّصِل بالرقم enableEdgeToEdge
لجعل هذا التنسيق متوافقًا مع الأنظمة القديمة.
ومع ذلك، قد لا تعمل الإعدادات التلقائية للنظام في جميع حالات الاستخدام. راجِع إرشادات تصميم أشرطة النظام في Android وإرشادات التصميم من الحافة إلى الحافة للحصول على نظرة عامة حول الحالات التي يجب فيها استخدام أشرطة نظام شفافة أو شبه شفافة.
إنشاء أشرطة نظام شفافة
يمكنك إنشاء شريط تنقّل شفاف يستند إلى الإيماءات من خلال استهداف الإصدار 15 من نظام التشغيل Android أو الإصدارات الأحدث أو من خلال استدعاء enableEdgeToEdge()
باستخدام وسيطات تلقائية للإصدارات الأقدم. بالنسبة إلى شريط التنقّل الذي يتضمّن ثلاثة أزرار، اضبط قيمة Window.setNavigationBarContrastEnforced
على false
، وإلا سيتم تطبيق طبقة شفافة.
إنشاء أشرطة نظام شفّافة
لإنشاء شريط حالة شبه شفاف، أنشئ عنصرًا قابلاً للإنشاء مخصّصًا يتداخل مع المحتوى الرئيسي ويرسم تدرّجًا في المنطقة التي تغطيها الحواف الداخلية.
class SystemBarProtectionSnippets : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // enableEdgeToEdge sets window.isNavigationBarContrastEnforced = true // which is used to add a translucent scrim to three-button navigation enableEdgeToEdge() setContent { MyTheme { // Main content MyContent() // After drawing main content, draw status bar protection StatusBarProtection() } } } } @Composable private fun StatusBarProtection( color: Color = MaterialTheme.colorScheme.surfaceContainer, heightProvider: () -> Float = calculateGradientHeight(), ) { Canvas(Modifier.fillMaxSize()) { val calculatedHeight = heightProvider() val gradient = Brush.verticalGradient( colors = listOf( color.copy(alpha = 1f), color.copy(alpha = .8f), Color.Transparent ), startY = 0f, endY = calculatedHeight ) drawRect( brush = gradient, size = Size(size.width, calculatedHeight), ) } } @Composable fun calculateGradientHeight(): () -> Float { val statusBars = WindowInsets.statusBars val density = LocalDensity.current return { statusBars.getTop(density).times(1.2f) } }
بالنسبة إلى التطبيقات المتكيّفة، أدرِج عنصرًا قابلاً للإنشاء مخصّصًا يتطابق مع ألوان كل جزء، كما هو موضّح في التصميم من الحافة إلى الحافة. لإنشاء شريط تنقّل شبه شفاف، اضبط قيمة Window.setNavigationBarContrastEnforced
على true.