Temiz Boş Jetpack Uygulama Şablonu Oluştur

Temiz Boş Jetpack Uygulama Şablonu Oluştur

Saf Jetpack Compose uygulaması için teknik olarak themes.xml ve colors.xml artık, Android Görünüm sistemi içindir.

Ancak, orada bir sürü kod gördüm, hala bunlara sahip themes.xml ve colors.xml tanımlı. Şahsen, tekrarı veya karışıklığı önlemek için onları kaldırırdım.

1. theme.xml ve color.xml’i kaldırın

kaldırma themes.xml ve colors.xml hala referansta bulunulması nedeniyle derleme hatasına neden olabilir AndroidManifest.xml. değiştirmen gerekiyor AndroidManifest.xml

  • Kaldırmak android:theme="@style/Theme.EmptyComposeApp" hem de <application> ve<activity>
<application
    ...
    android:theme="@style/Theme.EmptyComposeApp">
    <activity
        ...
        android:theme="@style/Theme.EmptyComposeApp">
        ...
    </activity>
</application>
  • İle değiştirin android:theme="@android:style/Theme.Material.Light.NoActionBar" içinde <application> senin ebeveyn tarzın hangisi themes.xml.
<application
    ...
    android:theme="@android:style/Theme.Material.Light.NoActionBar">
    ...
</application>

Üst eylem çubuğu olmayan bir uygulama oluşturur. Üst eylem çubuğu kullanılarak oluşturulabilir Scaffold birleştirilebilir işlev. Bunu gör En İyi Uygulama Çubuğu Örneği Ekle Bu Basit LazyColumn Uygulamasında.

bunu eklememeye çalıştım android:theme="@android:style/Theme.Material.Light.NoActionBar" fakat ComponentActivity() Jetpack Compose kullanarak ondan kurtulmak için hiçbir fikrim olmayan varsayılan olarak üst eylem çubuğunu oluşturur.

2. Oluştur ile Durum Çubuğu Rengini Ayarlayın

Eh, uygulama çalışıyor, ancak durum çubuğundaki varsayılan mor renk gitti.

orjinaline bakarsanız themes.xmlorada durum çubuğu rengini ayarlar.

<resources>
    <style name="Theme.EmptyComposeApp" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@color/purple_700</item>
    </style>
</resources>

Bu kaldırıldığı için bunu Jetpack Compose’da uygulamamız gerekiyor. Bunu yapmak için, kullanmamız gereken Sistem Kullanıcı Arayüzü Denetleyicisi Accompanist’ten.

  • Ekle com.google.accompanist:accompanist-systemuicontroller kütüphane:
dependencies {
    ...
    implementation "com.google.accompanist:accompanist-systemuicontroller:0.24.1-alpha"
    ...
}
  • İçinde uiThemeTheme.ktbunu sete ekle purple_700 renk olan aynı zamanda primaryVariant renk
val systemUiController = rememberSystemUiController()
systemUiController.setStatusBarColor(
    color = colors.primaryVariant
)
  • Tam kod şöyle görünür:
fun EmptyComposeAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    val systemUiController = rememberSystemUiController()
    systemUiController.setStatusBarColor(
        color = colors.primaryVariant
    )

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

Android Studio’daki şablon projesi, gezinme çubuğu rengini ayarlamıyor. Bu nedenle, yukarıdaki örnekte onları burada ayarlamıyoruz. Ancak, genellikle hem gezinme hem de durum çubukları için aynı rengi ayarlamak istiyoruz. Bu durumda, kullanabilirsiniz systemUiController.setSystemBarsColor():

val systemUiController = rememberSystemUiController()
systemUiController.setSystemBarsColor(
    color = colors.primaryVariant
)

Bu örneği kendi şablon projem olarak kullanmak istediğim için. kullanmak için değiştireceğim systemUiController.setSystemBarsColor() bu uygulama örneğinde.

Önizleme Oluşturulmuyor

Sistem UI denetleyicisi kullanıldığında önizlemenin çalışmadığı bir hata var. Sorun izleyiciye bakın burada.

java.lang.IllegalArgumentException: The Compose View must be hosted in an Activity with a Window!

Bu soruna geçici bir çözüm bulmak için, ön izlemede Sistem UI denetleyicisini devre dışı bırakmanız gerekir. useSystemUIController parametre.

İçinde Theme.kt:

@Composable  
fun EmptyComposeAppTheme(  
  ...  
  useSystemUIController: Boolean = true,  
  ...
) {  
    ...
    if (useSystemUIController) {  
        val systemUiController = rememberSystemUiController()  
        systemUiController.setStatusBarColor(  
            color = colors.primaryVariant)  
    }  
    ...
}

İçinde MainActivity.kt:

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    EmptyComposeAppTheme(useSystemUIController = false) {
        ...
    }
}

Özet

şimdi sadece sahibim strings.xml kaynak klasörümde. Harika, değil mi?

Muhtemelen bunu herhangi bir Jetpack Compose projesinin başlangıç ​​noktası olarak kullanacağım. Bu fark burada paket ve proje adlarını değiştirmek için gereken değişiklikleri gösterir.

Kaynak kodu

GitHub Deposu: Demo_CleanEmptyOluştur

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.