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

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

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

ایجاد نوارهای سیستم شفاف

با هدف قرار دادن اندروید ۱۵ یا بالاتر یا با فراخوانی 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) }
}

شکل ۱. یک نوار وضعیت شفاف.

برای برنامه‌های تطبیقی، یک ترکیب‌بندی سفارشی وارد کنید که با رنگ‌های هر صفحه مطابقت داشته باشد، همانطور که در طراحی Edge-to–edge دیده می‌شود. برای ایجاد یک نوار ناوبری شفاف، Window.setNavigationBarContrastEnforced را روی true تنظیم کنید.