[Android] Compose 컴포저블 참고사항

😶 이미지 컴포저블(Image)

val image = painterResource(id = R.drawable.androidparty)

Image(
    painter = image,
    contentDescription = null,
    contentScale = ContentScale.Crop,
    alpha = 0.5F,
    modifier = Modifier
)

alpha 는 이미지의 불투명도를 설정한다.

contentScale 는 이미지의 크기를 설정한다.

 

 

🙂 아이콘 컴포저블(Icon)

Material Design 의 아이콘을 추가할 수 있다. Tint 매개변수를 변경하여 원하는 스타일에 맞게 아이콘의 색상을 조정할 수 있다. Image 컴포저블과 마찬가지로 contentDescription 매개변수를 채워야 한다.

Icon(Icons.Rounded.Menu, contentDescription = "Localized description")

 

 

Icons  |  Android Developers

 

 

🙂 Spacer 컴포저블

빈 레이아웃을 나타내는 컴포저블로 Modifier 의 너비, 높이 등 주로 크기를 정의한다.

Row {
    Box(Modifier.size(100.dp).background(Color.Red))
    Spacer(Modifier.width(20.dp))
    Box(Modifier.size(100.dp).background(Color.Magenta))
    Spacer(Modifier.weight(1f))
    Box(Modifier.size(100.dp).background(Color.Black))
}

 

 

😶 버튼 컴포저블 (Button)

import androidx.compose.material3.Button

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
): Unit

 

버튼  스타일을 직접적으로 결정하는 것은 shape, colors, elevation, border 매개변수이다. 먼저 Shape 로는 둥근 모서리 모양이나 직사각형 모양 등 버튼의 모양을 결정할 수 있다.

 

shape 매개변수

@Composable
fun TestButton() {
    Row(
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.fillMaxSize()
    ) {
        Button(
            onClick = {},
            shape = RoundedCornerShape(0.dp)
        ) { Text("Buttton") }
        Spacer(modifier = Modifier.width(12.dp))
        Button(
            onClick = {},
            shape = RoundedCornerShape(10.dp)
        ) { Text("Buttton") }
    }
}

 

 

color 매개변수

Button 의 색상을 설정할 수 있다. Button() 컴포저블에서는 ButtonDefaults.buttonColors() 를 사용한다. enabled 인자가 true 이면 contentColor, containerColor 값이 표현되고 enabled 가 false 이면 disabledContainerColor, disabledContentColor 값이 표현된다.

Button(
    onClick = {},
    shape = RoundedCornerShape(0.dp),
    enabled = true,
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.DarkGray,
        contentColor = Color.White,
        disabledContainerColor = Color.LightGray,
        disabledContentColor = Color.Black,
    )
) { 
    Text("Buttton") 
}

 

 

elevation 매개변수

elevation 매개변수로 버튼의 음영을 표시할 수 있다. Button() 컴포저블은 ButtonDefaults.buttonElevation() 값을 사용할 수 있다. 버튼의 상태에 따라 음영의 표시를 다르게 표현할 수 있다.

Button(
    onClick = {},
    shape = RoundedCornerShape(10.dp),
    elevation = ButtonDefaults.buttonElevation(
        defaultElevation = 5.dp,
        pressedElevation = 10.dp,
        hoveredElevation = 10.dp,
        disabledElevation = 0.dp,
    )
) { Text("Buttton") }

 

 

border 매개변수

border 는 버튼의 테두리를 표현할 수 있다. BorderStroke() 를 사용할 수 있다.

Button(
    onClick = {},
    shape = RoundedCornerShape(10.dp),
    border = BorderStroke(2.dp, Color.Black)
) { Text("Buttton") }

 

 

contentPadding 매개변수

contentPadding 매개변수로 버튼 내의 content 사이의 패딩값을 설정할 수 있다.

Button(
    onClick = {},
    shape = RoundedCornerShape(10.dp),
    contentPadding = PaddingValues(horizontal = 25.dp, vertical = 10.dp)
) { Text("Buttton") }

 

 

androidx.compose.material3  |  Android Developers

 

 

 

😶 스위치(Switch) 컴포저블

@Composable
fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    thumbContent: (@Composable () -> Unit)? = null,
    enabled: Boolean = true,
    colors: SwitchColors = SwitchDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): Unit

checked 매개변수로 스위치의 온 오프 모양을 설정할 수 있다. 사용자가 스위치를 클릭하면 onCheckedChange 가 호출된다. enabled 매개변수로 스위치의 활성/비활성 상태를 결정할 수 있다. 

 

 

State 와 함께 사용

체크 상태가 바뀔 때마다 UI를 업그레이드 해야 한다.

@Composable
fun CustomSwitch() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        modifier = Modifier.semantics { contentDescription = "Demo with icon" },
        checked = checked,
        onCheckedChange = { checked = it },
        thumbContent = icon
    )
}

 

color 매개변수

color 매개변수로 스위치의 색상을 변경할 수 있다. 체크한 상태(checked), 체크 안 한 상태(unchecked), 비활성 상태(disabledChecked) 에 따라 각각 다르게 변경할 수 있다. 

Switch(
    checked = roundUp,
    onCheckedChange = onRoundUpChanged,
    modifier = modifier
        .fillMaxWidth()
        .wrapContentWidth(Alignment.End),
    colors = SwitchDefaults.colors(
        checkedBorderColor = Color.Black,
        disabledCheckedBorderColor = Color.Gray,
        uncheckedThumbColor = Color.Blue,
        uncheckedBorderColor = Color.Red,
        uncheckedTrackColor = Color.Black
    )
)

 

thumbContent 매개변수

thumbContent 로 외부의 아이콘을 스위치 상태에 따라 설정할 수 있다. 

@Composable
fun CustomSwitch() {
    var checked by remember { mutableStateOf(true) }
    val icon: (@Composable () -> Unit)? = if (checked) {
        {
            Icon(
                imageVector = Icons.Filled.Share,
                contentDescription = null,
                modifier = Modifier.size(SwitchDefaults.IconSize),
            )
        }
    } else {
        null
    }

    Switch(
        modifier = Modifier.semantics { contentDescription = "Demo with icon" },
        checked = checked,
        onCheckedChange = { checked = it },
        thumbContent = icon
    )
}

 

Switch – Material Design 3

 

 

😶 TextField

사용자 입력 폼에 대한 UI 컴포저블이다.

@Composable
fun TextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: (@Composable () -> Unit)? = null,
    placeholder: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    prefix: (@Composable () -> Unit)? = null,
    suffix: (@Composable () -> Unit)? = null,
    supportingText: (@Composable () -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = TextFieldDefaults.shape,
    colors: TextFieldColors = TextFieldDefaults.colors()
): Unit

value 로 입력 폼에 텍스트를 표현할 수 있다. 사용자가 키보드로 입력할 때마다 onValueChange 가 호출된다.

 

State 와 함께 사용

입력할 때마다 텍스트가 표현되는 입력 폼(UI)이 업데이트되어야 한다.

@Composable
fun CustomTextFieldLayout() {
    var input by remember { mutableStateOf("") }

    TextField(
        value = input,
        onValueChange = { input = it },
        modifier = Modifier.fillMaxWidth(),
    )
}

 

keyboardOptions

키보드 타입(keyboardType), 입력 방법(imeAction) 등을 지정할 수 있다.

@Composable
fun CustomTextFieldLayout() {
    var input by remember { mutableStateOf("") }
   
    TextField(
        value = input,
        onValueChange = { input = it },
        modifier = Modifier.fillMaxWidth(),
        keyboardOptions = KeyboardOptions.Default.copy(
            keyboardType = KeyboardType.Number,
            imeAction = ImeAction.Done
        )
    )
}

 

입력 폼 모양

기존 TextField 의 모양은 위의 이미지 왼쪽에 해당된다. 오른쪽과 같이 테두리가 둘러진 모양의 컴포저블은 OutlineTextField 를 사용할 수 있다. 사용되는 매개변수는 TextField 와 동일하다.

OutlinedTextField(
    value = outlineInput,
    onValueChange = { outlineInput = it },
)

 

 

Text fields – Material Design 3

 

 

😶 Card

카드 모양 UI 를 만드는 데 유용한 컴포저블이다. 

@ExperimentalMaterial3Api
@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    elevation: CardElevation = CardDefaults.cardElevation(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit
): Unit

 

여러가지 모양의 Card 를 만들 수 있는데 왼쪽에서부터 ElevatedCard, Card, OutlinedCard 로 구현할 수 있다. ElevatedCard 와 OutlinedCard 모두 Card 매개변수를 사용할수 있다. 

 

 

기본 사용방법이다.

Card(modifier = modifier) {
    Column {
        Image(
            painter = painterResource(id = affirmation.imageResourceId),
            contentDescription = stringResource(id = affirmation.stringResourceId),
            modifier = Modifier
                .fillMaxSize()
                .height(194.dp),
            contentScale = ContentScale.Crop
        )
        Text(
            text = LocalContext.current.getString(affirmation.stringResourceId),
            modifier = Modifier.padding(16.dp),
            style = MaterialTheme.typography.headlineSmall
        )
    }
}

 

 

Cards – Material Design 3

 

 

😶 Scaffold

Compose 는 Material 구성요소를 일반 화면 패턴으로 결합하는 편리한 레이아웃을 제공한다. Scaffold 컴포저블은 다양한 구성요소와 기타 화면 요소를 위한 슬롯을 제공한다.

Scaffold(/* ... */) { contentPadding ->
    // Screen content
    Box(modifier = Modifier.padding(contentPadding)) { /* ... */ }
}

Scaffold 의 contentPadding 은 다음과 같이 Status bar 나 Naivigation bar 를 합쳐 system bars 라고 불리는데 이 값에 대한 값이다.

 

 

Lay out your app within window insets  |  Android Developers

Material 구성요소 및 레이아웃  |  Jetpack Compose  |  Android Developers