Jetpack Compose
Android를 위해 만든 선언형 UI 도구 키트. 2021년에 런칭되었다.
장점
-
상호 작용
기존 앱과 완벽하게 상호작용이 된다.
Viewe들을 컴포즈 UI 안에 넢을 수 있고, 컴포즈를 뷰 안에 넣을 수 있다. -
Jetpack 통합
Compose는 Jetpack과 통합되도록 설계되었다.
ex) Navigation, Paging, LiveData, Flow/RxJava, ViewModel, Hilt -
Material
Material Design 컴포넌트와 테마를 제공한다.
복잡한 XML을 다루지 않고, 이해하기 쉽고 추적하기 쉽다. -
코드 감소
RecyclerView로 빌드한 모든 화면에서 상당한 감소 효과가 나타난다.
Kotlinr과 XML 사이를 전환하는 것이 아니라 모든 것이 같은 언어로 종종 같은 파일에서 작성되면 코드를 추적하기가 훨씬 쉬워진다. -
Stateless UI
상태를 위부에 모아두고, 컴포즈 함수 내에서는 상태를 가지지 않으려고 하는 경향이 있다.
주요 개념
@Composable
@Composable은 Jetpack Compose에서 UI를 구성하는 기본 단위이다.
@Composable이 붙은 함수는 컴포저블 함수라고 하며, UI를 정의하고 구성하는 데 사용된다.
텍스트, 버튼, 이미지 등 UI 요소를 포함할 수 있다.
기본 함수와 다르게, 대문자로 시작하는 것을 표준으로 한다.
@Composable
fun Greeting(name: String) {
Text(text = "Hello, $name")@Preview
@Preview는 디자인 화면에서 UI를 미리 보기 위해 사용된다.
@Preview(showBackground = true) // 미리보기에서 배경을 흰색으로 표시
@Composable
fun PreviewGreeting() {
Greeting(name = "Compose")
}Scaffold
Material Design에서 UI를 구성하는 기본 구조이다. 이를 통해 복잡한 UI 요소들을 통합적으로 관리하며, 앱에 일관된 디자인과 사용성을 제공한다.
TopAppBar, BottomAppBar, FloatingActionButton 등 다양한 UI 요소를 포함하여 앱의 통합된 디자인을 만든다.
주요 매개 변수
topBar: 화면 상단에 표시되는 appBar를 정의bottomBar: 화면 하단에 표시되는 appBar를 정의floatingActionButton: 화면 하단 오른쪽에 떠 있는 버튼content: 앱의 주요 콘텐츠를 정의. innerPadding 값을 통해 레이아웃 패딩 설정 가능
Modifier
Jetpack Compose에서 UI 요소의 모양, 배치, 동작 등을 지정하거나 확장하는 데 사용되는 객체이다.
컴포저블 함수와 함께 사용되어 다양한 UI 속성(레이아웃 크기, 정렬, 배경색, 클릭 이벤트, 패딩, 마진 등)을 설정할 수 있다.
레이아웃 설정
padding: 콘텐츠 주위에 간격 추가
size: 요소의 고정 크기 설정
fillMaxWidth/fillMaxHeight/fillMaxSize: 부모 레이아웃의 크기에 맞게 채우기
wrapContentWidth/wrapContentHeight: 콘텐츠 크기에 맞추기
Box(
modifier = Modifier
.size(100.dp)
.padding(8.dp)
.background(Color.Blue)
)배경 및 스타일
background: 배경색 설정
border: 테두리 추가
clip: 요소 모양을 특정 모양으로 자르기
Text(
text = "Styled Text",
modifier = Modifier
.background(Color.Yellow)
.border(2.dp, Color.Red)
.padding(16.dp)
)alignment는 진행 방향과 수직으로, arrangement는 진행 방향으로 이루어진다.
