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

عندما يستهدف تطبيقك الإصدار 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,
) {
    Spacer(
        modifier = Modifier
            .fillMaxWidth()
            .height(
                with(LocalDensity.current) {
                    (WindowInsets.statusBars.getTop(this) * 1.2f).toDp()
                }
            )
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        color.copy(alpha = 1f),
                        color.copy(alpha = 0.8f),
                        Color.Transparent
                    )
                )
            )
    )
}

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

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