[Compose] 컴포넌트 클릭 상태를 감지하여 Text 변화주기

- 보통 버튼이나 FAB 클릭하면 명암이 짙어지는 Ripple 효과가 발생하는 것을 볼 수 있다.

 

- 이번엔 Text를 가진 상위 컴포저블로부터 onClick 이벤트를 받아 하위 Text의 굵기를 변경하는 작업을 진행했다.

 

- 일단 아래 두 개 값이 pressed 상태를 경신하고 체크하는 기본 요소가 된다.

val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()

 

- MutableInteractionSource : InteractionSource는 컴포넌트에서 발생하는 사용자 상호작용을 감지하는 채널로서 Pressed, Focused, Dragged, Hovered 등 상태 변화를 감지할 수 있다.

 

- collectIsPressedAsState(): InteractionSource를 감시하면서, 현재 Press 상태인지를 반환한다. 결과를 State로 묶어서 반환하기 때문에 리컴포지션을 일으킨다.

 

- 그리고 pressed 효과를 적용할 대상 컴포넌트의 modifier - clickable에 해당 interactionSource를 연결해 준다.

.clickable(
    interactionSource = interactionSource,

 

- 굵기를 변경하는 작업이므로 FontFamily에 remember 변수 또한 선언해 준다.

var currentFont by remember { mutableStateOf(mainRegular) }

 

- 이제 isPressed의 변경에 따라 폰트를 같이 변경하는 로직을 구성한다.

if (isPressed) {
    currentFont = mainBold
    DisposableEffect(Unit) {
        onDispose {
            currentFont = mainRegular
        }
    }
}

- 눌림 상태가 true면 굵은 폰트로, 그리고 다시 리컴포지션으로 true 상태가 해제되면 보통 폰트로 되돌리는 로직이다.

 

- currentFont를 Text 컴포저블에 활용해 주면 끝

Text(
    modifier = Modifier
        .align(Alignment.CenterVertically)
        .offset(y = (-1).dp),
    text = title,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis,
    textAlign = TextAlign.Center,
    style = TextStyle(
        fontFamily = currentFont,
        platformStyle = PlatformTextStyle(
            includeFontPadding = false
        ),
        ...