[Compose UI] IconButton

 

IconButton은 지정한 action을 수행하도록 할 수 있는 클릭가능한 아이콘이다. 사용자 접근성 가이드라인에 따라 IconButton의 최소 터치 아이콘 크기는 48x48dp 이다. 이 사이즈보다 작은 사이즈는 사용자 접근성을 저해한다고 판단하기에 해당 가이드라인을 준수하는 것이 좋다.

주의할 사항은 IconButton의 인자 중 하나인 content는 androidx.compose.material.icons.Icons의 아이콘을 사용하는 아이콘 이여야 한다. 만약 사용자 지정 아이콘을 사용하는 경우에는 내부 아이콘의 일반적인 크기는 24x24에가 된다.

 

IconButton 함수 인자

• onClick: () -> Unit,
  : 클릭 시 발생할 action
• modifier: Modifier = Modifier,
  : IconButton에 적용할 Modifier
• enabled: Boolean = true,
  : IconButton이 사용자 입력 이벤트를 받을지 말지에 대한 여부 
• interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
  : IconButton의 상호작용을 위한 Source로 정보를 저장하고 인터렉션 시 변경되어 유지되어야 할 정보에 대해 다룬다.
• content: @Composable () -> Unit
  : IconButton에 그려질 Icon을 포함한다.

 

IconButton 함수 내부 분석

fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
) {
    Box(
        modifier = modifier
            .minimumTouchTargetSize()
            .clickable(
                onClick = onClick,
                enabled = enabled,
                role = Role.Button,
                interactionSource = interactionSource,
                indication = rememberRipple(bounded = false, radius = RippleRadius)
            ),
        contentAlignment = Alignment.Center
    ) {
        val contentAlpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled
        CompositionLocalProvider(LocalContentAlpha provides contentAlpha, content = content)
    }
}

• IconButton은 Box를 내부에 포함하고 있다. 해당 박스 내부에 우리가 전달한 content(Icon)이 그려지게 된다.
• 클릭 시 발생하는 이벤트는 Box의 Modifier의 clickable 인자로 전달되어 이벤트가 처리된다.

 

IconButton 함수 사용 예시

위의 Card는 안드로이드 코드랩에서 제공하는 정보를 이용하여 만든 내용이다. 여기에 Card 확장을 위한 기능을 추가하기 위해 확장 버튼을 추가해본다.

@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier.padding(8.dp),
        elevation = 6.dp
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
        ) {
            DogIcon(dog.imageResourceId) // Dog 사진 표시
            DogInformation(dog.name, dog.age) // Dog 정보 표시
        }
    }
}

위 코드에서 DogInformation 아래에 새로운 Composable 함수를 추가하여 아이콘버튼을 추가한다.

@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
    var expanded by remember { mutableStateOf(false) }

    Card(
        modifier = modifier.padding(8.dp),
        elevation = 6.dp
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
        ) {
            DogIcon(dog.imageResourceId)
            DogInformation(dog.name, dog.age)
            Spacer(Modifier.weight(1f))
            DogItemButton(expanded = expanded, onClick = { /*TODO*/ })
        }
    }
}

@Composable
private fun DogItemButton(
    expanded: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.ExpandMore,
            tint = MaterialTheme.colors.secondary,
            contentDescription = stringResource(id = R.string.expand_button_content_description)
        )
    }
}

DogItemButton을 추가하여 확장 아이콘이 추가된 것을 아래와 같이 확인할 수 있다.

 

IconButton 의 action으로 Card 확장 기능 사용하기.

확장 시와 접을 때의 아이콘은 각각 아래 아이콘을 사용하였다.

• Icons.Filled.ExpandLess 
• Icons.Filled.Expand

@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
    var expanded by remember { mutableStateOf(false) }

    Card(
        modifier = modifier.padding(8.dp),
        elevation = 6.dp
    ) {
        Column() {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
            ) {
                DogIcon(dog.imageResourceId)
                DogInformation(dog.name, dog.age)
                Spacer(Modifier.weight(1f))
                DogItemButton(
                    expanded = expanded,
                    onClick = { expanded = !expanded })
            }
            if (expanded) {
                DogHobby(dog.hobbies)
            }
        }
    }
}

@Composable
private fun DogItemButton(
    expanded: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = 
                if (expanded) Icons.Filled.ExpandLess 
                else Icons.Filled.ExpandMore,
            tint = MaterialTheme.colors.secondary,
            contentDescription = stringResource(id = R.string.expand_button_content_description)
        )
    }
}

 

해당 코드를 적용하면 아래와 같이 Card가 확장되는 기능을 추가할 수 있다.

이런 기능들을 이용해서 다양한 기능들을 추가할 수 있을 것 같다.

 

참고

https://developer.android.com/codelabs/basic-android-kotlin-compose-woof-animation

https://fonts.google.com/icons?selected=Material+Icons