Android 스튜디오에 새로운 Jetpack Compose 전용 기능이 많이 추가되었습니다. Android 스튜디오는 코드 중심 접근 방식을 지원하므로 개발자는 디자인 인터페이스나 코드 편집기 중에서 선택할 필요 없이 생산성을 개선할 수 있습니다.
뷰 기반 UI와 Jetpack Compose의 기본적인 차이점은 Compose가 컴포저블을 렌더링하는 데 View
에 의존하지 않는다는 것입니다. 이 아키텍처 접근 방식을 사용하면 Android 스튜디오는 Android 뷰 방식과 달리 에뮬레이터를 열거나 기기에 연결하지 않고도 Jetpack Compose용 확장 기능을 제공하므로, 개발자가 더 빠른 반복 프로세스로 UI 디자인을 구현할 수 있습니다.
Android 스튜디오의 Jetpack Compose 전용 기능을 사용 설정하려면 애플리케이션 build.gradle
파일에 다음 종속 항목을 추가해야 합니다.
debugImplementation "androidx.compose.ui:ui-tooling:1.2.1"
implementation "androidx.compose.ui:ui-tooling-preview:1.2.1"
컴포저블 미리보기
컴포저블은 @Composable
로 주석 처리된 함수에 의해 정의됩니다.
@Composable
fun SimpleComposable() {
Text("Hello World")
}
이 컴포저블의 미리보기를 사용 설정하려면 @Composable
및 @Preview
주석이 있는 추가 컴포저블을 만들어 처음에 만든 컴포저블을 방출해야 합니다.
@Preview
@Composable
fun ComposablePreview() {
SimpleComposable()
}
마지막으로 분할(디자인/코드) 뷰를 클릭하여 오른쪽 측면 패널을 엽니다. 이 패널에 미리보기가 표시됩니다.
코드에 매개변수를 수동으로 추가하여 Android 스튜디오의 @Preview
렌더링 방식을 맞춤설정할 수 있습니다.
@Preview
기능
Android 스튜디오는 컴포저블 미리보기를 확장할 수 있는 기능을 제공합니다. 컨테이너 디자인을 변경하거나 미리보기와 상호작용하거나 에뮬레이터 또는 기기에 미리보기를 직접 배포할 수 있습니다.
LocalInspectionMode
LocalInspectionMode
CompositionLocal
에서 읽어 컴포저블이 미리보기에서 렌더링되고 있는지 확인할 수 있습니다.
그러면 실제 데이터를 표시하는 대신 미리보기 창에 자리표시자 이미지를 표시하는 등의 작업을 실행할 수 있습니다. 컴포지션이 미리보기에서 렌더링되는 경우 LocalInspectionMode.current
가 true
로 평가됩니다.
if (LocalInspectionMode.current) {
// Show this text in a preview window:
Text("Hello preview user!")
} else {
// Show this text in the app:
Text("Hello $name!")
}
대화형 모드
대화형 모드를 사용하면 기기에서와 유사한 방식으로 미리보기와 상호작용할 수 있습니다. 대화형 모드는 샌드박스 환경에서 다른 미리보기로부터 격리됩니다. 샌드박스 환경에서는 요소를 클릭하여 미리보기에 사용자 입력을 제공할 수 있습니다. 미리보기에서 애니메이션도 재생됩니다. 대화형 모드를 사용하면 체크박스가 선택되어 있는지 또는 비어 있는지와 같이 컴포저블의 여러 상태 및 동작을 빠르게 테스트할 수 있습니다.
미리보기 대화형 모드는 에뮬레이터를 실행하지 않고 Android 스튜디오 내에서 직접 실행되며 따라서 일부 제한사항이 초래됩니다.
- 네트워크에 액세스할 수 없음
- 파일에 액세스할 수 없음
- 일부
Context
API를 완전히 사용하지 못할 수도 있음
미리보기 배포
특정 @Preview
를 에뮬레이터 또는 실제 기기에 배포할 수 있습니다. 미리보기는 새 활동과 동일한 프로젝트 앱 내에 배포되므로 동일한 컨텍스트와 권한을 공유합니다. 즉, 권한이 이미 부여된 경우 권한을 요청하는 것과 같은 상용구 코드를 작성할 필요가 없습니다.
@Preview
주석 옆이나 미리보기 상단에 있는 Deploy to Device 아이콘 을 클릭하면 Android 스튜디오에서 연결된 기기나 에뮬레이터에 @Preview를 배포합니다.
다중 미리보기 주석
다중 미리보기를 사용하면 자체적으로 다양한 구성과 함께 여러 @Preview
주석을 포함하는 주석 클래스를 정의할 수 있습니다. 구성 가능한 함수에 이 주석을 추가하면 다양한 미리보기가 모두 한 번에 자동 렌더링됩니다. 예를 들어, 이 주석을 사용하면 하나의 컴포저블에 관한 정의를 모두 반복하지 않고도 여러 기기, 글꼴 크기, 테마를 동시에 미리 볼 수 있습니다.
먼저 나만의 맞춤 주석 클래스를 만듭니다.
@Preview(
name = "small font",
group = "font scales",
fontScale = 0.5f
)
@Preview(
name = "large font",
group = "font scales",
fontScale = 1.5f
)
annotation class FontScalePreviews
미리보기 컴포저블에 이 맞춤 주석을 사용할 수 있습니다.
@FontScalePreviews
@Composable
fun HelloWorldPreview() {
Text("Hello World")
}
여러 개의 다중 미리보기 주석과 일반 미리보기 주석을 조합하여 더 완전한 미리보기 조합을 만들 수 있습니다. 다중 미리보기 주석을 결합한다고 해서 여러 조합이 모두 표시되는 것은 아닙니다. 대신 각 다중 미리보기 주석이 독립적으로 작동하며 다중 미리보기 주석 고유의 변형만 렌더링합니다.
@Preview(
name = "dark theme",
group = "themes",
uiMode = UI_MODE_NIGHT_YES
)
@FontScalePreviews
@DevicePreviews
annotation class CombinedPreviews
@CombinedPreviews
@Composable
fun HelloWorldPreview() {
MyTheme { Surface { Text("Hello world") } }
}
코드 탐색 및 컴포저블 개요
미리보기 위로 마우스를 가져가면 미리보기 내에 포함된 컴포저블의 개요가 표시됩니다. 컴포저블 개요를 클릭하면 편집기 뷰가 컴포저블 정의로 이동합니다.
@Preview
렌더링 복사
렌더링된 모든 미리보기는 마우스 오른쪽 버튼으로 클릭하여 이미지로 복사할 수 있습니다.
배경 색상 설정
기본적으로 컴포저블은 투명한 배경에 표시됩니다.
배경을 추가하려면 showBackground
및 backgroundColor
매개변수를 추가하세요.
backgroundColor
는 Color
값이 아니라 ARGB Long
입니다.
@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
Text("Hello World")
}
크기
기본적으로 콘텐츠를 래핑하기 위해 @Preview
크기가 자동으로 선택됩니다.
크기를 수동으로 설정하려면 heightDp
및 widthDp
매개변수를 추가하면 됩니다. 이 값은 이미 Dp
로 해석되므로 값의 끝에 .dp
를 추가할 필요가 없습니다.
@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
Box(Modifier.background(Color.Yellow)) {
Text("Hello World")
}
}
언어
여러 사용자 언어를 테스트하려면 locale
매개변수를 추가해야 합니다.
@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
Text(text = stringResource(R.string.greetings))
}
시스템 UI
미리보기 내에 상태 표시줄과 작업 모음을 표시해야 하는 경우 showSystemUi
매개변수를 추가하세요.
@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
Text("Hello World")
}
@PreviewParameter
@PreviewParameter
주석이 있는 매개변수를 추가하여 컴포저블 미리보기 함수에 샘플 데이터를 전달할 수 있습니다.
@Preview
@Composable
fun UserProfilePreview(
@PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
UserProfile(user)
}
샘플 데이터를 제공하려면 PreviewParameterProvider
를 구현하고 샘플 데이터를 시퀀스로 반환하는 클래스를 만듭니다.
class UserPreviewParameterProvider : PreviewParameterProvider<User> {
override val values = sequenceOf(
User("Elise"),
User("Frank"),
User("Julia")
)
}
시퀀스에서는 데이터 요소당 미리보기 하나가 렌더링됩니다.
여러 미리보기에 같은 제공자 클래스를 사용할 수 있습니다. 필요하다면 limit 매개변수를 설정하여 렌더링할 미리보기 수를 제한합니다.
@Preview
@Composable
fun UserProfilePreview(
@PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
UserProfile(user)
}
UI 모드
uiMode 매개변수는 모든 Configuration.UI_* 상수를 사용할 수 있으므로 개발자가 적절하게 미리보기의 동작을 변경할 수 있습니다. 예를 들어 미리보기를 야간 모드로 설정하여 테마가 어떻게 반응하는지 확인할 수 있습니다.
편집기 작업
Android 스튜디오의 편집기 영역 내부에는 Jetpack Compose로 생산성을 개선할 수 있는 기능도 있습니다.
라이브 템플릿
Android 스튜디오에 Compose 관련 라이브 템플릿이 추가되었습니다. 이 템플릿을 사용하면 상응하는 템플릿 약어를 입력하여 코드 스니펫을 빠르게 삽입할 수 있습니다.
comp
:@Composable
함수 설정prev
: 구성 가능한@Preview
함수 만들기paddp
: dp에padding
수정자 추가weight
:weight
수정자 추가W
,WR
,WC
: 현재 컴포저블을Box
,Row
또는Column
컨테이너로 둘러싸기
여백 아이콘
여백 아이콘은 줄 번호 옆 사이드바에 표시되는 상황별 작업입니다. 개발자가 편리하게 사용할 수 있도록 Android 스튜디오에 Jetpack Compose 전용 여백 아이콘이 여러 개 추가되었습니다.
미리보기 배포
여백 아이콘에서 직접 에뮬레이터 또는 실제 기기에 @Preview를 배포할 수 있습니다.
색상 선택 도구
컴포저블 내부 또는 외부에서 색상이 정의될 때마다 여백에 미리보기가 표시됩니다. 다음과 같이 색상을 클릭하여 색상 선택 도구를 통해 변경할 수 있습니다.
이미지 리소스 선택 도구
컴포저블 내부 또는 외부에서 드로어블, 벡터 또는 이미지가 정의될 때마다 여백에 미리보기가 표시됩니다. 다음과 같이 이미지 리소스를 클릭하여 이미지 리소스 선택 도구를 통해 변경할 수 있습니다.
반복적 코드 개발
모바일 개발자는 일반적으로 앱의 UI를 모두 한 번에 개발하는 대신 단계별로 개발합니다. Android 스튜디오는 Jetpack Compose를 통해 전체 빌드가 없어도 검사, 값 수정, 최종 결과 확인이 가능한 도구를 제공하여 이러한 개발 방식을 지원합니다.
리터럴 실시간 편집
Android 스튜디오는 미리보기, 에뮬레이터, 실제 기기 내 컴포저블에 사용되는 상수 리터럴을 실시간으로 업데이트할 수 있습니다. 지원되는 유형은 다음과 같습니다.
Int
String
Color
Dp
Boolean
리터럴 실시간 편집 UI 표시기를 통해 리터럴 장식을 사용 설정하여 컴파일 단계 없이 실시간 업데이트를 트리거하는 상수 리터럴을 확인할 수 있습니다.
실시간 편집
Android 스튜디오 Android 스튜디오의 카나리아 릴리스에서 실시간 편집을 사용하여 Compose 개발 환경을 가속화할 수 있습니다. 실시간 편집은 리터럴의 더 강력한 실시간 편집 버전입니다. 이 기능을 사용하면 에뮬레이터 또는 기기에 코드 변경사항을 자동으로 배포하여 컴포저블의 업데이트 효과를 실시간으로 확인할 수 있습니다.
변경사항 적용
변경사항 적용 기능을 사용하면 앱을 에뮬레이터 또는 실제 기기에 다시 배포할 필요 없이 코드 및 리소스를 업데이트할 수 있습니다(일부 제한사항이 있음).
컴포저블을 추가, 수정 또는 삭제할 때마다 이 버튼을 클릭하여 앱을 다시 배포할 필요 없이 앱을 업데이트할 수 있습니다.
Layout Inspector
Layout Inspector를 사용하면 에뮬레이터나 실제 기기에서 실행 중인 앱 내의 Compose 레이아웃을 검사할 수 있습니다.
재구성 횟수 가져오기
Layout Inspector를 사용하여 컴포저블이 재구성되거나 건너뛰는 빈도를 확인할 수 있습니다. UI 성능이 낮은 경우는 종종 UI가 과도하게 재구성되어야 하는 코딩 오류로 인한 것입니다. 반대로 일부 코딩 오류로 인해 UI가 재구성되어야 할 때 재구성되지 않는 경우도 있습니다. 즉, UI 변경사항이 화면에 표시되지 않습니다. 재구성을 추적하면 이러한 종류의 문제를 모두 찾는 데 도움이 됩니다.
재구성을 추적하려면 뷰 옵션에서 Show Recomposition Counts를 사용 설정합니다.
재구성 횟수가 사용 설정된 후 Layout Inspector의 왼쪽에는 재구성 횟수가 표시되고 오른쪽에는 건너뛴 재구성이 표시됩니다.
Layout Inspector에서 컴포저블을 더블클릭하면 분석에 맞는 대응 코드로 이동합니다.
애니메이션
Android 스튜디오를 사용하면 애니메이션 미리보기에서 애니메이션을 검사할 수 있습니다. 컴포저블 미리보기에 애니메이션이 표시되는 경우, 변화 과정 동안 애니메이션을 디버그하기 위해 특정 시간에 각 애니메이션된 값의 정확한 값을 검사하거나 애니메이션을 일시중지하거나 반복하거나 빨리 감거나 느리게 재생할 수 있습니다.
애니메이션 미리보기를 사용하여 애니메이션 곡선을 그래프로 시각화할 수도 있습니다. 이는 애니메이션 값이 제대로 구성되었는지 확인하는 데 유용합니다.
애니메이션 미리보기는 Start Animation Inspection 아이콘 으로 표시되는 검사 가능한 애니메이션을 자동으로 감지합니다.
애니메이션 미리보기는 현재 updateTransition
API를 지원합니다. updateTransition
과 함께 애니메이션 미리보기를 사용하려면 Compose 버전 1.0.1 이상을 사용하세요.
실험용 기능 사용 설정
일부 기능은 Android 스튜디오 환경설정에 있는 실험용 섹션(File > Settings > Experimental, Mac에서는 Android Studio > Preferences > Experimental)에서 수동으로 사용 설정한 후에만 사용할 수 있습니다.