Compose 도구

Android 스튜디오에 새로운 Jetpack Compose 전용 기능이 많이 추가되었습니다. Android 스튜디오는 코드 중심 접근 방식을 지원하므로 개발자는 디자인 인터페이스나 코드 편집기 중에서 선택할 필요 없이 생산성을 개선할 수 있습니다.

뷰 기반 UI와 Jetpack Compose의 기본적인 차이점은 Compose가 컴포저블을 렌더링하는 데 View를 사용하지 않는다는 것입니다. 이 아키텍처 접근 방식을 통해 Android 스튜디오는 Android 뷰와 비교하여 에뮬레이터를 열거나 기기에 연결할 필요 없이 Jetpack Compose용 확장 기능을 제공하므로, 개발자가 더 빠른 반복 프로세스로 UI 디자인을 구현할 수 있습니다.

Jetpack Compose용 특정 Android 스튜디오 기능을 사용 설정하려면 애플리케이션 build.gradle 파일에 이 종속 항목을 추가해야 합니다.

implementation "androidx.compose.ui:ui-tooling:1.0.5"

컴포저블 미리보기

컴포저블은 @Composable로 주석 처리된 함수에 의해 정의됩니다.

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

'Hello World' 문구가 포함된 간단한 텍스트 요소

이 컴포저블의 미리보기를 사용 설정하려면 @Composable@Preview 주석이 있고, 처음에 만든 컴포저블을 방출하는 추가 컴포저블을 만들어야 합니다.

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

마지막으로 분할(디자인/코드) 뷰를 클릭하여 오른쪽 측면 패널을 엽니다. 이 패널에 미리보기가 표시됩니다.

Android 스튜디오 '분할 뷰' 선택기

미리보기 창에 표시된 간단한 텍스트 뷰

@Preview는 Android 스튜디오에서 렌더링하는 방식을 맞춤설정하는 매개변수를 수락합니다. 이러한 매개변수를 코드에 수동으로 추가하거나 @Preview 옆의 여백 아이콘을 클릭하여 구성 선택 도구를 표시한 후 구성 매개변수를 선택하고 변경할 수 있습니다.

@Preview 기능

Android 스튜디오는 컴포저블 미리보기를 확장할 수 있는 기능을 제공합니다. 컨테이너 디자인을 변경하거나 미리보기와 상호작용하거나 에뮬레이터 또는 기기에 미리보기를 직접 배포할 수 있습니다.

대화형 모드

대화형 모드를 사용하면 기기에서와 유사한 방식으로 미리보기와 상호작용할 수 있습니다. 대화형 모드는 샌드박스 환경에서 다른 미리보기와 격리됩니다. 샌드박스 환경에서는 요소를 클릭하여 미리보기에 사용자 입력을 제공할 수 있습니다. 미리보기에서 애니메이션도 재생됩니다. 대화형 모드를 사용하면 체크박스가 선택되어 있는지 또는 비어 있는지와 같이 컴포저블의 여러 상태 및 동작을 빠르게 테스트할 수 있습니다.

미리보기 대화형 모드는 에뮬레이터를 실행하지 않고 Android 스튜디오 내에서 직접 실행되며 따라서 일부 제한사항이 초래됩니다.

  • 네트워크에 액세스할 수 없음
  • 파일에 액세스할 수 없음
  • 일부 Context API를 완전히 사용하지 못할 수도 있음

미리보기의 '대화형' 버튼을 클릭하는 사용자

미리보기와 상호작용하는 사용자의 동영상

미리보기 배포

특정 @Preview를 에뮬레이터 또는 실제 기기에 배포할 수 있습니다. 미리보기는 새 활동과 동일한 프로젝트 앱 내에 배포되므로 동일한 컨텍스트와 권한을 공유합니다. 즉 권한이 이미 부여된 경우 권한을 요청하는 것과 같은 상용구 코드를 작성할 필요가 없습니다.

미리보기의 '배포' 버튼을 클릭하는 사용자

기기에 미리보기를 배포하는 사용자의 동영상

코드 탐색 및 컴포저블 개요

미리보기 위로 마우스를 가져가면 미리보기 내에 포함된 컴포저블의 개요가 표시됩니다. 컴포저블 개요를 클릭하면 편집기 뷰가 컴포저블 정의로 이동합니다.

사용자가 미리보기 위로 마우스를 가져가면 스튜디오에 컴포저블의 개요가 표시됩니다.

@Preview 렌더링 복사

렌더링된 모든 미리보기는 마우스 오른쪽 버튼으로 클릭하여 이미지로 복사할 수 있습니다.

미리보기를 클릭하여 이미지로 복사하는 사용자

배경 색상 설정

기본적으로 컴포저블은 투명한 배경에 표시됩니다. 배경을 추가하려면 showBackgroundbackgroundColor 매개변수를 추가하세요. backgroundColorColor 값이 아니라 ARGB Long입니다.

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

'Hello World' 문구가 있는 녹색 직사각형

크기

기본적으로 콘텐츠를 래핑하기 위해 @Preview 크기가 자동으로 선택됩니다. 크기를 수동으로 설정하려면 heightDpwidthDp 매개변수를 추가하면 됩니다. 이 값은 이미 Dp로 해석되므로 값의 끝에 .dp를 추가할 필요가 없습니다.

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}

'Hello World' 문구가 있는 노란색 정사각형

언어

여러 사용자 언어를 테스트하려면 locale 매개변수를 추가해야 합니다.

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

'Bonjour' 단어와 프랑스 국기가 포함된 간단한 텍스트 요소

시스템 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)
}

편집기 작업

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

소스 코드에서 리터럴을 변경하는 사용자의 동영상 및 동적으로 업데이트되는 미리보기

다음 강조표시된 값을 사용 설정하여 컴파일 단계 없이 실시간 업데이트를 트리거하는 상수 리터럴을 확인할 수 있습니다.

라이브 리터럴의 강조표시를 사용 설정하는 사용자의 동영상

변경사항 적용

변경사항 적용 기능을 사용하면 앱을 에뮬레이터 또는 실제 기기에 다시 배포할 필요 없이 코드 및 리소스를 업데이트할 수 있습니다(일부 제한이 있음).

컴포저블을 추가, 수정 또는 삭제할 때마다 이 버튼을 클릭하여 앱을 다시 배포할 필요 없이 앱을 업데이트할 수 있습니다.

&#39;변경사항 적용&#39; 버튼을 클릭하는 사용자

Layout Inspector

Layout Inspector를 사용하면 에뮬레이터나 실제 기기에서 실행 중인 앱 내의 Compose 레이아웃을 검사할 수 있습니다.

애니메이션

Android 스튜디오를 사용하면 대화형 미리보기에서 애니메이션을 검사할 수 있습니다. 컴포저블 미리보기에서 애니메이션이 설명된 경우 전환 기간 동안 애니메이션을 디버그하기 위해 특정 시간에 각 애니메이션된 값의 정확한 값을 검사하거나 애니메이션을 일시중지하거나 루핑하거나 빨리 감거나 느리게 재생할 수 있습니다.

@Preview
@Composable
fun PressedSurface() {
    val (pressed, onPress) = remember { mutableStateOf(false) }
    val transition = updateTransition(
        targetState = if (pressed) SurfaceState.Pressed else SurfaceState.Released
    )

    val width by transition.animateDp { state ->
        when (state) {
            SurfaceState.Released -> 20.dp
            SurfaceState.Pressed -> 50.dp
        }
    }
    val surfaceColor by transition.animateColor { state ->
        when (state) {
            SurfaceState.Released -> Color.Blue
            SurfaceState.Pressed -> Color.Red
        }
    }
    val selectedAlpha by transition.animateFloat { state ->
        when (state) {
            SurfaceState.Released -> 0.5f
            SurfaceState.Pressed -> 1f
        }
    }

    Surface(
        color = surfaceColor.copy(alpha = selectedAlpha),
        modifier = Modifier
            .toggleable(value = pressed, onValueChange = onPress)
            .size(height = 200.dp, width = width)
    ){}
}

애니메이션 검사기를 사용 설정하려면 다음 버튼을 클릭하세요.

애니메이션 검사기를 여는 사용자의 데모

실험용 기능 사용 설정

양방향 미리보기 및 애니메이션 검사기와 같은 일부 기능은 Android 스튜디오 환경설정에 있는 실험용 섹션에서 수동으로 사용 설정한 후에만 사용할 수 있습니다.

Android 스튜디오 실험용 환경설정에서 사용 설정된 Compose 도구