حماية شريط النظام

بعد أن يستهدف تطبيقك الإصدار 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) }
}
SystemBarProtectionSnippets.kt

الشكل 1. شريط حالة شفاف

بالنسبة إلى التطبيقات التكيُّفية، أدرِج عنصرًا مكوّنًا مخصّصًا يتطابق مع ألوان كل لوحة، كما هو موضّح في التصميم من الحافة إلى الحافة. لإنشاء ملف شخصي شريط تنقّل شفاف، اضبط Window.setNavigationBarContrastEnforced على true.