حفاظت از نوار سیستم

هنگامی که برنامه شما SDK 35 یا بالاتر را هدف قرار می دهد، لبه به لبه اجرا می شود . نوار وضعیت سیستم و نوارهای پیمایش حرکتی شفاف هستند، اما نوار ناوبری سه دکمه شفاف است. با enableEdgeToEdge تماس بگیرید تا این نسخه پشتیبان سازگار شود.

با این حال، پیش فرض های سیستم ممکن است برای همه موارد استفاده کار نکنند. راهنمای طراحی نوارهای سیستم Android و راهنمای طراحی لبه به لبه را برای مروری بر اینکه چه زمانی باید میله‌های سیستم شفاف یا نیمه شفاف را در نظر بگیرید، مشورت کنید.

میله های سیستم شفاف ایجاد کنید

با هدف قرار دادن Android 15 یا جدیدتر یا با فراخوانی enableEdgeToEdge() با آرگومان‌های پیش‌فرض برای نسخه‌های قبلی، یک نوار پیمایش حرکتی شفاف ایجاد کنید. برای نوار پیمایش سه دکمه‌ای، Window.setNavigationBarContrastEnforced را روی false تنظیم کنید، در غیر این صورت یک scrim نیمه شفاف اعمال می‌شود.

میله های سیستم نیمه شفاف ایجاد کنید

برای ایجاد یک نوار وضعیت نیمه شفاف، یک ترکیب سفارشی ایجاد کنید که با محتوای اصلی همپوشانی داشته باشد و یک گرادیان در ناحیه پوشیده شده توسط inset ها ترسیم کند.

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 تنظیم کنید.