어질어질 개발노트/Android

[Android] [Kotlin] Compose 기초 - 시작하기

tia.mom 2024. 8. 27. 13:44
반응형

새 Compose 프로젝트 시작

File > New > New Project 

Compose 아이콘의 Empty Activity 선택 후 Next 클릭

Compose 파일 구조

 

Compose 프로젝트를 생성하게 되면 기존 Android 프로젝트와 큰 차이는 없어보입니다. 그러나, ui.theme라는 디렉토리가 자동으로 생성됩니다. 디렉토리 안에는 Color, Theme, Type 파일이 있습니다. 각 파일은 색상, 테마, 타입을 전역변수로 UI에 사용될 변수를 정의하고 있습니다. 웹으로 표현한다면 CSS와 같은 역활을 하는거 같습니다. 

ui.theme 디렉토리가 있는 이유?
resource 디렉토리에 colors.xml, theme.xml 모두 있습니다. 그러나, 이것은 Android 기존 개발 방식이고 Compose에서는 Color 객체와 Color객체를 이용한 Theming를 지원하게 되면서 코드상에 Color 객체를 정의하는 방식이 표준이 되었습니다.

그렇다면, 기존 Android 개발된 프로젝트에서 Compose로 변환시 모든 color를 일일히 변경해야 하는가?
그렇지 않습니다. colorResource 메소드와 color.xml을 이용한 Color 객체 로딩 방법도 제공하고 있습니다.

 

@Composable Annotation

구성 가능한 함수는 @Composable 이라는 주석이 달린 함수이다. 

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}
  • Greeting 함수를 `@Composable` 로 어떻게 표시하는지 확인할 수 있습니다.
  • `Text`는 라이브러리에서 제공하는 구성가능한 함수 입니다.

Android 앱의 Compose

`setContent`를 사용하여 레이아웃을 정의하지만, 기존 뷰 시스템에서 하던 것 처럼 XML 레이아웃을 사용하는 대신 구성가능한 함수를 이용합니다.

 

`BasicsCodelabTheme`는 구성가능한 함수의 스타일을 지정하는 방법입니다. 이는 ui.theme 디렉토리에 theme.kt 파일에 정의되어 있습니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicsCodelabTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                  modifier = Modifier.fillMaxSize(),
                  color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

Comose Preview

Android 스튜디오 미리보기를 사용하려면 매개변수가 없는 구성가능한 함수 또는 기본 매개변수를 포함한 함수를 `@Preview` 주석으로 표시하고 프로젝트를 빌드하면 됩니다. 

*** 동일한 파일에 여러 개의 미리보기를 만들 수 있습니다.

@Preview(showBackground = true, name = "Text preview")
@Composable
fun GreetingPreview() {
    BasicsCodelabTheme {
        Greeting(name = "Android")
    }
}

 

References

https://developer.android.com/courses/jetpack-compose/course?hl=ko

https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko#0

반응형