[android] ImageButton in Compose (IconButton)

 

#

Android View 시스템의 ImageButton 는 Compose 에서 'IconButton' 에 매칭된다.

 

#

IconButton 의 function signature 는 아래와 같다.

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
)

 

#

Button 과의 차이점은 IconButton 은 내부에 보통 Icon 을 포함하고, Button 은 내부에 보통 Text 를 포함한다.

일반적인 IconButton 용례는 아래와 같다.

IconButton(onClick = { /* .. */ }){
    Icon(
	imageVector = Icons.Filled.ExpandMore,
        tint = MaterialTheme.color.secondary,
        contentDescription = null,
    )
}

 

#

여기서 Icon 에 대해서도 조금 알아보자.

Icon 의 function description 은 아래와 같다.

fun Icon(
    painter: Painter, // bitmap: ImageBitmap, imageVector: ImageVector 가 올 수 있음 
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)

 

위 예시에서는 Icons.Filled.ExpandMore 를 사용했는데, 이는 Material Design 에서 제공하는 vector 로 gradle 에 아래 dependency 를 추가해야 사용 가능하다.

implementation "androidx.compose.material:material-icons-extended:$compose_version"

 

제공되는 icon 들은 아래 링크에서 확인 할 수 있다.

Material Symbols and Icons

 

끝