Jetpack Compose - 제트팩 컴포즈 개념과 구조

-> Jetpack Compose란?

Jetpack Compose는 네이티브 UI를 빌드하기 위한 Android의 최신 도구 키트입니다.

적은 수의 코드, 강력한 도구 및 직관적인 Kotlin API를 사용하여 앱을 빠르고 생동감 있게 구현할 수 있습니다

 

즉, 기존의 XML레이아웃을 꾸며서 UI를 작성하는 방식이 아닌 코드로 작성하는 것이다.

Compose에서는 단 몇줄의 코드만 작성하면 된다.

@Composable 이라는 어노테이션을 사용하여 Composable 단위로 UI을 작성한다.

---

• 프로젝트 생성 -> Empty Compose Activity로 생성해준다.

 

 

생성하면 이제 XML파일 대신 코드를 통해 레이아웃을 생성한다.

여기서 2가지의 어노테이션을 확인해볼수있다.

• @Preview: 레이아웃 미리보기를 지원한다.
• @Composable: 기존의 View의 역할. 실행시 컴파일러에게 UI를 그리게 한다.

---

• 간단한예제를통해 코드를 작성해보앗다.

먼저 @Composable 로 작성된 Greeting 함수는 텍스트를 받아서 생성해주는 역할을 하며, Suface를 사용하여

텍스트 배경색을 지정해주엇고 "안녕하세요"라는 텍스트를 넘겨주어 ui를 생성해주도록한다.

레이아웃을 만들려면 @Composable을 통해  매개변수를 전혀 사용하지 않는 구성 가능한 함수를 작성하고 

Colum은  "열"을 말하며, text값을 다음 열로 바꿔주는걸말한다.

@Preview 어노테이션을 추가합니다. 앱을 빌드하면 미리보기 함수의 UI가 스튜디오의 Preview 창에 표시됩니다.

 

• 간단한예제를 통해 두개의 레이아웃을 미리보기

@Composable을통해   매개변수를 전혀 사용하지 않는 구성 가능한 함수를 작성하고 @Preview 어노테이션을 추가합니다.

Colum을 통해  fillmaxSize()는 스크린을 최대로맞추고,    verticalArragement를  아이템을 수직으로 중앙에맞추고, horizontalAlignment를 CenterHorizontal 아이템 수평 중앙으로 맞추겟다. 그러면 Text값이 가운데로  맞춰지는걸 볼수있었다.  애뮬레이터에 미리보기를 하고싶으면 deploy 버튼을 클릭하면된다.

Box는  Row랑 다르게 글자가 겹쳐서보이게 되므로, Spacer를 줘도 겹쳐서 보이게된다..

그래서 Box를 하나더 만들어서  Box 함수만이 제공하는 contentAlignment를 통해 bottomend를주어 기존에햇던 Greeting을 사용해 프리뷰를 만들어보앗다.

 

 

 

출처: 레이아웃 미리보기  |  Jetpack Compose  |  Android Developers

레이아웃 미리보기  |  Jetpack Compose  |  Android Developers