Чистый пустой шаблон приложения Jetpack Compose

Простой и чистый пример пустого приложения Jetpack Compose, в котором нет themes.xml и colors.xml.

Для чистого приложения Jetpack Compose технически нам больше не нужны themes.xml и colors.xml, которые предназначены для системы Android View.

Однако, я видел много кода, в котором все еще определены эти themes.xml и colors.xml. Лично я бы удалил их, чтобы избежать дублирования или путаницы.

1. Удалить themes.xml и colors.xml

Удаление themes.xml и colors.xml может привести к ошибке компиляции из-за того, что на них все еще ссылаются из AndroidManifest.xml. Вам необходимо изменить AndroidManifest.xml.

  • Удалите android:theme="@style/Theme.EmptyComposeApp" в <application> и <activity>.
<application
    ...
    android:theme="@style/Theme.EmptyComposeApp">
    <activity
        ...
        android:theme="@style/Theme.EmptyComposeApp">
        ...
    </activity>
</application>
Войдите в полноэкранный режим Выйти из полноэкранного режима
  • Замените на android:theme="@android:style/Theme.Material.Light.NoActionBar" в <application>, который является родительским стилем в вашем themes.xml.
<application
    ...
    android:theme="@android:style/Theme.Material.Light.NoActionBar">
    ...
</application>
Вход в полноэкранный режим Выход из полноэкранного режима

Создает приложение без верхней панели действий. Верхняя панель действий может быть создана с помощью композитной функции Scaffold. Смотрите пример добавления верхней панели действий в этом простом приложении LazyColumn.

Я пытался не добавлять эту android:theme="@android:style/Theme.Material.Light.NoActionBar", но ComponentActivity() создает верхнюю панель действий по умолчанию, и у меня нет идеи, как избавиться от нее с помощью Jetpack Compose.

2. Установка цвета строки состояния с помощью Compose

Приложение работает, но фиолетовый цвет по умолчанию в строке состояния исчез.

Если вы посмотрите на оригинальный themes.xml, там задан цвет строки состояния.

<resources>
    <style name="Theme.EmptyComposeApp" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@color/purple_700</item>
    </style>
</resources>
Вход в полноэкранный режим Выход из полноэкранного режима

Поскольку эта функция была удалена, нам нужно реализовать ее в Jetpack Compose. Для этого нам нужно использовать System UI Controller из Accompanist.

  • Добавьте библиотеку com.google.accompanist:accompanist-systemuicontroller:
dependencies {
    ...
    implementation "com.google.accompanist:accompanist-systemuicontroller:0.24.1-alpha"
    ...
}
Войти в полноэкранный режим Выход из полноэкранного режима
  • В uiThemeTheme.kt добавьте следующее, чтобы установить цвет purple_700, который также является цветом primaryVariant.
val systemUiController = rememberSystemUiController()
systemUiController.setStatusBarColor(
    color = colors.primaryVariant
)
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Полный код выглядит следующим образом:
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 не устанавливает цвет навигационной панели. Поэтому в приведенном примере мы их не задаем. Однако обычно мы хотим установить один и тот же цвет для навигационной и статусной строк. В этом случае вы можете использовать systemUiController.setSystemBarsColor():

val systemUiController = rememberSystemUiController()
systemUiController.setSystemBarsColor(
    color = colors.primaryVariant
)
Вход в полноэкранный режим Выход из полноэкранного режима

Поскольку я хочу использовать этот пример в качестве собственного шаблонного проекта. Я собираюсь изменить его, чтобы использовать systemUiController.setSystemBarsColor() в этом примере приложения.

Предварительный просмотр не рендерится

Существует ошибка, из-за которой предварительный просмотр не работает, когда используется контроллер System UI. См. трекер проблем здесь.

java.lang.IllegalArgumentException: The Compose View must be hosted in an Activity with a Window!
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы обойти эту проблему, вам нужно отключить контроллер System UI в предварительном просмотре, передав параметр useSystemUIController.

В Theme.kt:

@Composable  
fun EmptyComposeAppTheme(  
  ...  
  useSystemUIController: Boolean = true,  
  ...
) {  
    ...
    if (useSystemUIController) {  
        val systemUiController = rememberSystemUiController()  
        systemUiController.setStatusBarColor(  
            color = colors.primaryVariant)  
    }  
    ...
}
Войти в полноэкранный режим Выйти из полноэкранного режима

В MainActivity.kt:

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    EmptyComposeAppTheme(useSystemUIController = false) {
        ...
    }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Резюме

Теперь у меня есть только strings.xml в папке ресурсов. Круто, не правда ли?

Вероятно, я также буду использовать его в качестве отправной точки для любого проекта Jetpack Compose. Этот diff здесь показывает изменения, необходимые для изменения имен пакета и проекта.

[Обновлено — 18 июля, 2022]: Если вы переименуете пакет и т.д. из приложения шаблона, вы, возможно, получите ошибку компиляции (обычно это связано со строковыми ресурсами). В этом случае вы можете аннулировать кэши. Я включаю только Clear VCS Log caches and indexes, и это работает для меня.

Исходный код

Репозиторий GitHub: Demo_CleanEmptyCompose


Первоначально опубликовано на https://vtsen.hashnode.dev.

Оцените статью
Procodings.ru
Добавить комментарий