(LiveTemplate) Composable Function 쉽게 만들기

요즘 안드로이드 개발하면서 Compose로 UI개발 하시는 분들이 많이 늘었습니다.

Android Studio에서는 기본적으로 comp나 prev와 같은 LiveTemplate를 제공해주고 있습니다.

comp LiveTemplate

prev LiveTemplate

이런 LiveTemplate을 사용하게 된다면 코드를 쉽고 간편하고 빠르게 작성할 수 있습니다.

 

나는 매번 함수 이름을 작성하기 귀찮다

하지만 매번 함수의 이름을 적어주는게 저에게는 매우 귀찮았습니다.

그래서 파일명에 맞춰서 함수명까지 만들어주는 LiveTemplate을 만들었습니다.

제가 파일명을 SampleScreen.kt로 만들었더니 그 이름에 맞게 Composable Function을 생성할 수 있게 됐습니다.

LiveTemplate 만들기

Settings(cmd + ,)에 들어와서 Editor > Live Templates 로 진입합니다.

 

상단에 + 버튼을 눌러서 Live Template을 추가 할 수 있고 Template Group을 만들 수도 있습니다.

저는 Android Studio에서 기본 제공하는 것과 제가 따로 만드는 것을 구분하기 위해서 Template Group을 따로 만들어서 사용하고 있습니다.

 

- Abbreviation: 코드에서 어떤 단어로 live template을 사용할지 작성

- Description: Live Template이 어떤 것인지 설명을 작성

- Template text: 실제 코드를 작성

- Edit Variables: 코드에 들어가는 변수들을 편집

compn

@androidx.compose.runtime.Composable
fun $NAME$(modifier: androidx.compose.ui.Modifier = androidx.compose.ui.Modifier) {
$END$
}

LiveTemplate에 Variable을 Edit할 수 있는데 거기서 NAME에 Expression을 fileNameWithoutExtension()으로 작성하고 Skip if defined를 check 합니다.

prevn

@androidx.compose.ui.tooling.preview.Preview
@androidx.compose.runtime.Composable
private fun $NAME$$EXTRA_NAME$() {
$END$
}

prevn은 compn과 다르게 Preview를 여러개 만들 수 있는 것을 생각하고 EXTRA_NAME을 추가로 지정할 수 있게 했습니다.

NAME은 compn과 동일하게 만들어주고 EXTRA_NAME은 따로 건들지 않겠습니다.

 

마무리

아마 여기까지 하면 kotlin 파일에서 compn과 prevn을 사용하실 수 없습니다.

각 LiveTemplate이 어디서 사용할 수 있는지 설정을 추가로 해야합니다.

Template text 하단에 Change 텍스트를 눌러서 Kotlin의 Top-level을 체크하면 마무리 됩니다.

 

마치며

안드로이드 스튜디오는 안드로이드 개발자에게 필수적인 도구로, 이를 효과적으로 활용하는 것이 개발 생산성을 크게 향상시킬 수 있습니다. 이 블로그를 통해서 여러분의 개발 생산성을 크게 향상시켰길 기대해봅니다.