מידע על הגנה על שורת המערכת

אחרי שהאפליקציה מטרגטת ל-SDK 35 ומעלה, התצוגה מקצה לקצה נאכפת. סרגל הסטטוס של המערכת וסרגלי הניווט באמצעות תנועות הם שקופים, אבל סרגל הניווט באמצעות שלושה כפתורים הוא שקוף למחצה. כדי להגדיר את המינוי כתואם לדור הקודם, צריך להתקשר למספר enableEdgeToEdge.

עם זאת, יכול להיות שברירות המחדל של המערכת לא יתאימו לכל תרחישי השימוש. במאמרים הנחיות לעיצוב סרגלי מערכת ב-Android והנחיות לעיצוב מקצה לקצה מוסבר מתי כדאי להשתמש בסרגלי מערכת שקופים או שקופים למחצה.

יצירת סרגלי מערכת שקופים

כדי ליצור סרגל ניווט שקוף באמצעות מחוות, צריך לטרגט ל-Android מגרסה 15 ואילך או להפעיל את 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.