Jetpack Compose용 새로운 기능 Live Preview에서 있었던 일

본 보도에 관하여


FUN Advent Calendar 2019 Part2, 6일째 보도
급하게 Part2에 참여했습니다.
Part1을 쓰는 기사에서 방향성이 벗어난 부분을 Part2의 기사로 삼는다.
제가 약간의 품앗이를 하는 느낌을 용서해 주십시오.

개요


원래는 Part1에 사용된 예비 알파판을 사용할 수 있다는 보도Jetpack Compose였다.
가져오기에서 Live Preview 기능이 추가되었음을 알 수 있습니다.
자신이 시도하는 과정에서 실패한 부분을 총결해 낸다.

Live Preview


Live Preview는 Jetpack Compose와 함께 추가된 새로운 기능입니다.
원래 Jeapack Compose는 UI를 선언적으로 만들 수 있는 라이브러리입니다.
Jeapack Compose를 이용하여 기존의 안드로이드 응용 프로그램 개발에 큰 변화가 있었던 것은 레이아웃 파일을 사용하지 않는다는 것이다.
대신 Kotlin 파일에 UI를 직접 쓸 수 있습니다.
여기서 문제가 되는지 UI 확인이 안 됩니다.
이전에는 Layout 파일에서 UI를 조정하고 Design에서 UI 확인을 했습니다.
하지만 Jetpack Compose를 사용하면 응용 프로그램을 실행하기 전에 UI를 확인할 수 없습니다.
이에 따라 Jetpack Compose의 사전 제작 버전에 Live Preview를 추가했다.
Live Preview를 사용하면 Jetpack Compose에 기술된 UI가 어떻게 표시되는지 확인할 수 있습니다.
※ Jetpack Compose에 대한 설명은 없습니다. 참조여기.

라이브 미리보기 실제 사용


당장 라이브 프리뷰가 어떤 느낌인지 시험해 보세요.
기본적으로 사용 방법은 @Composable 이전에 추가@Preview할 뿐이다.
실제로 간단한 UI에 추가되었습니다@Preview.

오 마이 갓Σ(・□・;)
이렇게 해도 응용 프로그램 자체가 실행될 수 있지만 Live Preview에는 기능이 없습니다.
왜 그런지 생각하면서 사이트를 다시 읽었어요.To create a live preview, create a new composable function that takes no parameters and includes a @Preview annotation before @Composable, as shown below추가된 함수에 파라미터를 추가하지 말라는 것이다.
따라서 추가@Preview 함수에 대해서는 매개변수를 부여하지 않고 UI용 함수에 대해서는 매개변수를 부여하도록 변경합니다.

결국 안돼.
그러나 관찰공식 샘플 응용 프로그램을 해보니 Class 내에 사용되지 않았습니다(원래 공식 샘플 프로그램에서 UI에 사용된 함수는 Class에 기록되지 않았습니다).

드디어 드러났다.
왜 반에 나타나지 않는지 모르겠다.
사이트 제목에는 기술한 느낌이 없다.
결론은 Live Preview를 사용할 때 UI용 파일을 준비하는 것이 현재의 가장 좋은 선택이라는 것이다.

총결산


이 글에서 저는 Jetpack Compose에 사용할 새로운 기능인 Live Preview를 도입할 때 겪은 좌절을 썼습니다.
Live Preview라고 하지만 판면 디자인 변경 후 @Preview 를 누르지 않으면 업데이트할 수 없기 때문에 사용하기가 불편하다는 인상을 준다.
그리고 그림처럼 배경이 투명해서 이대로 가면 보기 어려워요. 저도 뭘 했으면 좋겠어요.
프로그램을 실행할 때 기본 배경이 흰색이기 때문에 이 부분의 배경도 기본적으로 흰색이었으면 합니다.
앞으로 어떤 변경을 넣었느냐에 따라 사용하기가 상당히 편리할 것 같다.

웹 페이지 정보

  • Jetpack Compose : https://developer.android.com/jetpack/compose
  • Tutorial Jetpack Compose Basics : https://developer.android.com/jetpack/compose/tutorial
  • compose-samples : https://github.com/android/compose-samples
  • Use Android Studio with Jetpack Compose : https://developer.android.com/jetpack/compose/setup
  • 좋은 웹페이지 즐겨찾기