Kullanıcı arayüzünüzü sistem durum çubuğuyla uyumlu hale getirme

Wear OS 7'ye (API 37) kadar platform, uygulama pencerelerinin üzerinde sistem durum çubuğu oluşturmuyordu. Uygulamalar tüm ekrana sahipti ve üst (saat 12) konumda herhangi bir içerik (ör. uygulama içi TimeText saat, özel kavisli başlıklar veya üst kontroller) çizebiliyordu.

Wear OS 8'den itibaren (ve şu anda Wear OS 7.1 Beta Önizleme Emülatörü'nde [API 37.2-beta1] erken erişim testleri için kullanılabilir) sistem, saat ve durum göstergelerini görüntülemek için uygulama pencerelerinin üzerinde saat 12 konumunda bir durum çubuğu oluşturur. Sistem durum çubuğuyla çakışmayı önlemek için uygulamalar kendi saatlerini (TimeText) oluşturmayı bırakmalı ve üst durum çubuğu pencere eklerine uymalıdır (Wear Compose 1.8'den itibaren AppScaffold ve ScreenScaffold tarafından otomatik olarak işlenir) veya tam ekran sürükleyici bir deneyim gerektiğinde sistem durum çubuğunu gizlemelidir.

Wear OS 8'de sistem durum çubuğu
Şekil 1. Wear OS 8'de sistem durum çubuğu.

Bazı temel avantajları şunlardır:

  • Görsel tutarlılık: Sistem genelinde ve tüm uygulamalarda tek tip saat yazı biçimi, yerleşimi ve arka plakası.
  • Sistem durumu göstergeleri: Platformun, durum simgelerini (etkin mikrofon ve konum göstergeleri, bağlantı durumu veya pil bilgileri gibi) ve saati farklı yüzeylerde göstermesine olanak tanır. Önceliğe göre aynı anda yalnızca bir simge gösterilir.
  • Otomatik kaydırma ve geçiş koordinasyonu: Jetpack Compose for Wear OS 1.8 ile eşlendiğinde, kullanıcılar içerikte gezinirken sistem durum çubuğu otomatik olarak gizlenir ve kısa bir (2 sn.) boşta kalma süresinden sonra tekrar görünür.

Uygulamanızı ayarlama

Başlamak için aşağıdaki ön koşul adımlarını tamamlayın:

  1. Android Studio Preview'u (Canary) yükleyin.
  2. SDK Manager'da Wear OS 7.1 Önizleme Emulator Sistem Resmi'ni (API 37.2-beta1) indirin. Bu sürüm, Wear OS 8 SDK'dan önce Wear OS 8 sistem durum çubuğuna erken erişim sağlar.
  3. Cihaz Yönetim Paneli'nde API 37.2-beta1 görüntüsünü kullanarak bir Wear OS sanal cihazı oluşturup başlatın.

Uygulamanızda sistem durum çubuğunu desteklemek için uygulamanızın targetSdk sürümünü 35 veya daha yeni bir sürüme güncelleyin. Platform, eski uygulamalar için geriye dönük uyumluluğu korumak amacıyla yalnızca API 35 ve sonraki sürümleri hedefleyen uygulamalar için sistem durum çubuğunu etkinleştirir. Ayrıca, aşağıdaki kod snippet'inde gösterildiği gibi Wear Compose bağımlılıklarınızı en son alfa sürümüne (şu anda 1.8.0-alpha02) güncelleyin. Uygulamanız Wear Compose'un eski bir sürümünü kullanıyorsa geçişi kolaylaştırmak için Wear Compose Material 3 geçiş becerisini kullanabilirsiniz.

android {
    defaultConfig {
        targetSdk = 35
    }
}

dependencies {
    implementation("androidx.wear.compose:compose-foundation:1.8.0-alpha02")
    implementation("androidx.wear.compose:compose-material3:1.8.0-alpha02")
}

Sistem durum çubuğunu kullanma

Wear Compose Material 3 1.8.0'ın en son alfa sürümünde (şu anda 1.8.0-alpha02) kitaplık, com.google.wear.ENABLE_GLOBAL_STATUS_BAR <meta-data> özelliğini AndroidManifest.xml dosyanızla birleştirerek uygulamanızı otomatik olarak etkinleştirir. Çalışma zamanında AppScaffold ve ScreenScaffold, cihazda sistem durum çubuğunun etkinleştirilip etkinleştirilmediğini ve bu manifest etkinleştirme özelliğinin true olarak ayarlanıp ayarlanmadığını kontrol eder:

  • Önizleme emülatöründe / Wear OS 8 ve sonraki sürümlerde (etkinleştirildiğinde): AppScaffold, dahili TimeText öğesini bastırır. Böylece sistem durum çubuğu, saat 12 konumunda kopyalanmadan düzgün bir şekilde oluşturulur. ScreenScaffold durum çubuğu iç sınırlarını hesaba katmak için contentPadding değerini yeniden hesaplar ve liste kaydırıldıkça durum çubuğunun gizlenmesini ve gösterilmesini koordine eder.
  • Wear OS 7 ve daha eski cihazlarda (veya etkinleştirilmediğinde): AppScaffold Otomatik olarak standart uygulama içi TimeText oluşturmaya geri döner ve tek bir kod tabanından tam geriye dönük uyumluluk sağlar.
@Composable
fun GsbSampleApp() {
    // AppScaffold coordinates the system status bar across the app
    // and falls back to rendering TimeText on Wear OS 7 and earlier.
    AppScaffold {
        val columnState = rememberTransformingLazyColumnState()

        // ScreenScaffold includes status bar top inset clearance in
        // contentPadding and hides/shows the status bar during list scrolling.
        ScreenScaffold(scrollState = columnState) { contentPadding ->
            TransformingLazyColumn(
                state = columnState,
                contentPadding = contentPadding,
            ) {
                item {
                    ListHeader { Text("Hello Status Bar") }
                }
                items(count = 15) { index ->
                    Button(onClick = { /* Handle click */ }) {
                        Text("Item #${index + 1}")
                    }
                }
            }
        }
    }
}

Örneği çalıştırdığınızda şunları göreceksiniz:

  • Bekleme durumunda (listenin en üstünde): Sistem durum çubuğu saat 12 konumunda gösterilir. "Hello Status Bar" başlığı, durum çubuğu iç alanının altında yer alır ve kırpılmaz veya çakışmaz.
  • Aşağı kaydırma: Liste öğelerini kaydırdığınızda durum çubuğu gizlenir ve liste öğeleri, üst çerçevenin arkasında uçtan uca kaydırılır.
  • Boşta: Kaydırmayı bırakıp ekranı serbest bıraktığınızda durum çubuğu yaklaşık 2 saniye sonra otomatik olarak yeniden görünür.

Sık karşılaşılan senaryoları ve özelleştirmeleri yönetme

Aşağıdaki bölümlerde, sistem durum çubuğuyla çalışırken karşılaşabileceğiniz yaygın senaryoların nasıl ele alınacağı açıklanmaktadır.

Kaydırılamayan (statik) ekranları işleme

Kaydırılabilir liste yerine statik düzen (ör. Column veya Box) kullanan ekranlarda, üst kullanıcı arayüzü öğelerinin sistem durum çubuğuyla çakışmaması için ScreenScaffold tarafından sağlanan contentPadding öğesini kök düzeninize uygulayın:

AppScaffold {
    ScreenScaffold { contentPadding ->
        Column(modifier = Modifier.padding(contentPadding)) {
            Text("Static Screen Content")
        }
    }
}

Tam ekran etkileşimli bileşenlerle çalışma

Wear Compose Material 3'teki tam ekran etkileşimli bileşenler (AlertDialog, Dialog, Stepper, TimePicker ve DatePicker dahil), ekrandayken sistem durum çubuğunu otomatik olarak gizler. Böylece kontrolleri, dairesel ekranın üst kısmına tam erişim sağlar. Kapatıldığında sistem durum çubuğu, pencere ekleri denetleyici API'si kullanılarak otomatik olarak geri yüklenir.

Yoğun içerik moduna geçme

Hem sistem durum çubuğunun hem de yerel TimeText öğesinin gizlendiği yoğun içerik moduna geçmek için uygulamanıza veya ekranınıza StatusBarSuppression bileşenini ekleyin. Yoğun içerik modunu, kullanıcının kısa bir süre gördüğü ekranlar (onay yer paylaşımları, iletişim kutuları) veya ekranın tamamını kullanan ekranlar (tam ekran ilerleme göstergeleri) için kullanın.

Ekran düzeyinde yoğun içerik modunu ne zaman kullanacağınızı düşünün.

Uygulamanızda yalnızca belirli bir ekranın tam ekran/tam ekran deneyimi olması gerekiyorsa ScreenScaffold içeriğinde StatusBarSuppression() yöntemini çağırın. ScreenScaffold, ilgili ekran etkinken sistem durum çubuğunu otomatik olarak gizler (ve üst durum çubuğu iç dolgusunu atlar), ardından diğer ekranlara geri dönüldüğünde sistem durum çubuğunu geri yükler:

AppScaffold {
    ScreenScaffold() {
        StatusBarSuppression()
        // Full-screen immersive content
    }
}

Uygulama düzeyinde yoğun içerik modunu ne zaman kullanacağınızı düşünme

Uygulamanızın tamamı (veya Activity) tüm ekranlarda tam ekran deneyimi sunuyorsa AppScaffold düzeyinde StatusBarSuppression kullanın ve tüm ekranlarda sistem durum çubuğunu gizlemek için içeriğinizi sarmalayın:

// Use StatusBarSuppression at AppScaffold level and wrap your content
// to suppress status bar in the entire scaffold.
AppScaffold {
    StatusBarSuppression {
        SwipeDismissableNavHost(...) {
            // Nested screens inherit suppression and 0.dp padding
        }
    }
}

Özel zaman metni geçersiz kılmalarını görüntüleme

Wear OS 8'e geçiş sırasında belirli bir ekranda veya uygulamanızın tamamında özel kavisli bir başlık göstermeniz ya da sistem durum çubuğunu geçici olarak kapsamı dışında kalmayı seçmeniz gerekiyorsa özel bir timeText composable ileterek sistem durum çubuğunu gizleyebilirsiniz:

// Screen-level custom TimeText override:
ScreenScaffold(
    timeText = { TimeText { timeTextCurvedText("Custom Status") } },
) {
    // Content
}

// App-level opt-out using in-app TimeText:
AppScaffold(
    timeText = { TimeText() },
) {
    // Screens
}

Görünümleri kullanarak uygulama (önerilmez)

Uygulamanız Wear OS için Jetpack Compose yerine Android Görünümleri kullanıyorsa AndroidManifest.xml kullanarak etkinleştirin. Sistem durum çubuğunu otomatik olarak etkinleştiren Wear Compose Material 3'ün en son alfa sürümünün aksine, görünüm tabanlı uygulamaların <application> içine ENABLE_GLOBAL_STATUS_BAR <meta-data> etiketini ekleyerek açıkça etkinleştirilmesi gerekir:

<application ...>
    <meta-data
        android:name="com.google.wear.ENABLE_GLOBAL_STATUS_BAR"
        android:value="true" />
</application>

Üst pencere iç kısımlarını izleme

ViewCompat.setOnApplyWindowInsetsListener kullanın ve windowInsets.getInsets(WindowInsetsCompat.Type.statusBars()) değerini kontrol edin. statusBarInsets.top > 0 ise eski saat 12 kullanıcı arayüzünüzü kaldırın ve üst dolguyu ayarlayın. Aksi takdirde eski kullanıcı arayüzünüze geri dönün:

ViewCompat.setOnApplyWindowInsetsListener(rootView) { view, windowInsets ->
    val statusBarInsets = windowInsets.getInsets(
        WindowInsetsCompat.Type.statusBars()
    )

    if (statusBarInsets.top > 0) {
        // status bar is visible: remove legacy 12 o'clock UI and apply top inset padding
        view.updatePadding(top = statusBarInsets.top)
    } else {
        // status bar is not visible: fall back to legacy UI and padding
    }

    WindowInsetsCompat.CONSUMED
}

Durum çubuğunu programatik olarak gizleme ve gösterme

Oluştur'daki ScreenScaffold özelliğinin aksine, görünüm tabanlı uygulamalar, WindowInsetsControllerCompat kullanarak sistem durum çubuğunu açıkça gizlemeli veya göstermelidir (örneğin, tam ekran sürükleyici görünüme girerken veya kaydırma davranışını koordine ederken):

val insetsController = WindowCompat.getInsetsController(window, window.decorView)

// Hide the status bar
insetsController.hide(WindowInsetsCompat.Type.statusBars())

// Show the status bar
insetsController.show(WindowInsetsCompat.Type.statusBars())

Uygulamanızı test etme

Uygulamanızı Wear OS 7.1 Beta Önizleme Emülatörü'nde (API 37.2-beta1) test ederken aşağıdakileri kontrol edin:

  • Saat yalnızca bir kez görünür: Saat 12 konumunda yalnızca sistem durum çubuğu saatinin göründüğünü ve eski uygulama içi TimeText ile uygulama içeriğinin bununla çakışmadığını doğrulayın.
  • Üst dolgu: Ekran başlıklarının, üstbilgilerin ve üst düğmelerin durum çubuğunun altında göründüğünü doğrulayın.
  • Tam ekran yer paylaşımları ve iletişim kutuları: İletişim kutuları, seçiciler, adımlar ve özel tam ekran etkinliklerinin açıldığında durum çubuğunu gizlediğini ve kapatıldığında geri yüklediğini doğrulayın.