UI 도구 키트로서 선언형 프로그래밍 패러다임 트리 형태로 UI를 구성할 수 있다

Composable라는 ui 함수 형태의 위젯을 계층적으로 구성

참고: https://developer.android.com/develop/ui/compose/mental-model?hl=ko

compose에서 새로운 값을 업데이트할 때 변경되지 않은 함수는 재구성하지 않고, 구성 가능한 함수를 다시 호출

Composable(
    // 파라미터를 통해 외부에서 값을 받아서 사용하거나, 전체적인 설정을 변경할 때 사용
) {
    // 해당 composable 내부의 ui 구성으로 composable로 구성 -> composable의 트리 형태
}

Composable의 크기, 배경, 위치, 클릭 이벤트 등의 기본 설정

체인 형태로 조합할 수 있다

상위 Composable을 기준으로 최대 공간으로 채우는 설정

• 가로 세로 여백을 전부 주는 경우 -> .padding(10.dp)

• 가로, 세로 별개로 혹은 한쪽에만 주는 경우 -> .padding(horizontal = 32.dp) , .padding(vertical = 32.dp)

dp

• Density-independent Pixels
• 길이에 사용 화면 밀도에 따라 크기가 조정되는 단위
• 화면 밀도에 따라 조정되기에 해상도에 맞춰서 적절한 크기 설정 가능

sp

• Scale-independent Pixels
• 텍스트 크기에 사용

Button(
    onClick = {
        viewModel.handleIntent(LoginIntent.NavigateToKaKao)
    },
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 32.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFFFFEB3B),
        contentColor = Color.Black
    ), // color에는 ButtonDefaults.buttonColors객체를 받을 수 있고 그 세부 설정으로 `containerColor`, `contentColor`등을 입력 가능
    shape = RoundedCornerShape(10.dp)
) {...}

Text(
    text = "카카오로 계속하기",
    modifier = Modifier.padding(
        vertical = 8.dp
    ),
    style = TextStyle(
        fontSize = 16.sp,
        fontWeight = FontWeight.Bold,
        color = Color(0xFF371C1D)
    ) // 텍스트 스타일은 `TextStyle` 객체와 그 하위 클래스 입력으로 설정 가능
)

Composable 별로 color나 shape같은 설정 매개변수들이 존재하며, Color나 shape 같이 정해진 템플릿이 필요한 경우에 이를 제공해주는 객체들이 있음

앱의 최상단 기본 레이아웃 설정 가능

• TopBar, BottomBar, Snack-Bar, fab 등의 ui 요소 설정 가능
• 해당 앱 ui 요소들의 레이아웃 길이 값 이용 가능
  • 예시) 상단 상태 바의 height 값인 innerPadding 이용 가능
    • 최상단 ui 요소에 적용

    • Scaffold(
          modifier = Modifier
              .fillMaxSize(),
      ) { innerPadding ->
          Box(
              modifier = Modifier
                  .fillMaxSize()
                  .padding(innerPadding),
              contentAlignment = Alignment.Center
          ) {}
      }

• 자식 Composable을 Stack 형태로 자유롭게 배치 가능
• 겹쳐서 배치 가능
• 기본 영역 구분을 할 때도 사용

contentAlignment :

• 예시 : contentAlignment = Alignment.Center

자식 컴포서블을 수평으로 배치

horizontalArrangement : 수평으로는 간격 설정

• Arrangement객체를 통해 입력
• 예시 : horizontalArrangement = Arrangement.SpaceBetween

verticalAlignment: 수직으로는 위치 설정

• 예시 : verticalAlignment = Alignment.CenterVertically

자식 Composable을 수직으로 배치

verticalArrangement : 수직으로 간격을 설정

• Arrangement 객체를 통해 입력
• 예시 : verticalArrangement = Arrangement.SpaceBetween

horizontalAlignment : 수평으로 위치 설정

• 예시 : horizontalAlignment = Alignment.CenterHorizontally
• 역할 : Column 내부의 자식 Composable을 수평 방향으로 어떻게 정렬할지 결정합니다. 예를 들어, 왼쪽, 오른쪽 또는 중앙 정렬을 설정할 수 있습니다.

Spacer(modifier = Modifier.width(10.dp))

여백 처리할 때 사용 padding/gap같은 modifier 설정의 일부 쓸모와도 겹치는 Composable

Composable간의 간격을 만들때 사용한다

height, width 설정을 통해 간격을 만듦

Scaffold
    └── Button
          └── Row
               ├── Image
               ├── Spacer
               └── Text

// LoginScreen.kt
import ...

@Composable
fun LoginScreen(
    navController: NavController,
    modifier: Modifier = Modifier,
    viewModel: LoginViewModel = viewModel()
) {
    Scaffold(...) { innerPadding ->
        Box(...) {
            Button(...) {
                Row(...) {
                    Image(...)
                    Spacer(...)
                    Text(...)
                }          
            }
        }
    }
}

• https://developer.android.com/develop/ui/compose/documentation?hl=ko