빈 Jetpack Compose 앱 템플릿 정리

themes.xml 및 colors.xml이 없는 단순하고 깨끗한 빈 Jetpack Compose 앱 예제입니다.

이 기사는 원래 2022년 5월 7일 vtsen.hashnode.dev에 게시되었습니다.

순수한 Jetpack Compose 앱의 경우 기술적으로 Android 보기 시스템용인 themes.xml 및 colors.xml가 더 이상 필요하지 않습니다.

그러나 나는 여전히 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>

The creates an app without the top action bar. The top action bar can be created using Scaffold composable function. See this Add Top App Bar Example in this Simple LazyColumn App.

나는 이것을 추가하지 않으려고 했지만android:theme="@android:style/Theme.Material.Light.NoActionBar" ComponentActivity()는 기본적으로 상단 작업 표시줄을 생성하므로 Jetpack Compose를 사용하여 제거할 생각이 없습니다.

2. 작성으로 상태 표시줄 색상 설정

음, 앱은 작동하지만 상태 표시줄의 기본 보라색이 사라졌습니다.

원본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에서 이를 구현해야 합니다. 그러기 위해서는 Accompanist의 System UI Controller을 사용해야 합니다.

라이브러리 추가com.google.accompanist:accompanist-systemuicontroller:

dependencies {
    ...
    implementation "com.google.accompanist:accompanist-systemuicontroller:0.24.1-alpha"
    ...
}

ui\Theme\Theme.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
)

Since I want to use this example as my own template project. I'm going to change it to use systemUiController.setSystemBarsColor() in this app example.

미리보기가 렌더링되지 않음

시스템 UI 컨트롤러를 사용할 때 미리보기가 작동하지 않는 버그가 있습니다. 문제 추적기here를 참조하십시오.

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

이 문제를 해결하려면 미리보기에서 useSystemUIController 매개변수를 전달하여 시스템 UI 컨트롤러를 비활성화해야 합니다.
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 프로젝트의 시작점으로 이것을 사용할 것입니다. 이 diffhere는 패키지 및 프로젝트 이름을 변경하는 데 필요한 변경 사항을 보여줍니다.

[Updated - 18 July, 2022]: If you rename the package and etc. from the template app, you're maybe getting the compilation error (usually is related to string resources). In that case, you can invalidate caches. I only turn on the Clear VCS Log caches and indexes and it works for me.

소스 코드

GitHub 저장소: Demo_CleanEmptyCompose

또한보십시오

Android Development Tips and Tricks