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

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

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

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