Jetpack Compose
[Compose Canvas] Canvas drawOval 사용해 타원 그리는 방법 한 번에 정리하기
이번 글에서 다룰 내용 이번 글에서는 drawOval 사용법에 대해 다룬다. Oval은 타원이라는 뜻이고, 가로의 길이와 세로의 길이가 다를 수 있는 원이다. drawOval 또한 Color을 사용하는 drawOval 함수와 Brush를 사용하는 drawOval이 있는데, Brush 사용법은 이전 글 drawRect에서 다룬 것과 동일하므로 Color을 사용하는 drawCircle만 다루도록 한다. drawOval 함수 살펴보기 drawOval은 color, topLeft, size, alpha, style, colorFilter, blendMode를 파라미터로 받는다. *alpha, style, colorFilter, blendMode는 이전 글에서 다룬 drawRect와 동일하므로 설명을 생략한다...
[Compose Canvas] Canvas drawCircle 사용해 원 만드는 방법 한 번에 정리하기
이번 글에서 다룰 내용 이번 글에서는 drawCircle 사용법에 대해 다룬다. drawCircle 또한 Color을 사용하는 drawCircle 함수와 Brush를 사용하는 drawCircle이 있는데, Brush 사용법은 이전 글 drawRect에서 다룬 것과 동일하므로 Color을 사용하는 drawCircle만 다루도록 한다. drawCircle 함수 살펴보기 drawCircle은 color, radius, center, alpha, style, colorFilter, blendMode를 파라미터로 받는다. fun drawCircle( color: Color, radius: Float = size.minDimension / 2.0f, center: Offset = this.center, /*@Flo..
[Compose Canvas] Canvas drawRect 사용해 사각형 만드는 방법 한 번에 정리하기
이번 글에서 다룰 내용 이번 글에서는 Canvas의 drawRect를 사용해 사각형을 그리는 방법에 대해 깊게 다룬다. 두가지 함수가 지원되는 drawRect와 drawRect의 각 파라미터가 어떤 역할을 하는지 알아본다. Color 객체를 사용하는 drawRect함수 먼저 Color 객체를 사용하는 drawRect함수부터 살펴본다. fun drawRect( color: Color, topLeft: Offset = Offset.Zero, size: Size = this.size.offsetSize(topLeft), /*@FloatRange(from = 0.0, to = 1.0)*/ alpha: Float = 1.0f, style: DrawStyle = Fill, colorFilter: ColorFilte..
[Jetpack Compose] clickable 클릭 효과 제거하기 : Ripple 효과 제거하기
clickable에서 클릭 효과 제거가 필요한 이유 clickable에서 다양한 클릭 효과를 만드는 것 또한 중요하지만, 클릭 효과를 제거하는 것도 종종 필요하다. 예를 들어 뒤로 가기 버튼을 눌렀을 때 클릭 효과가 없이 뒤로 가기가 되었으면 한다던가, 필터 버튼을 눌렀을 때 뒤에 클릭 효과가 생기지 않고 필터 버튼의 색상만 변해야 한다던가 하는 요구사항이 있을 수 있다. Compose의 clickable은 기본적으로 클릭 효과를 가지고 있기 때문에, 이러한 요구사항을 맞추기 위해서는 click 효과를 제거하는 것이 필요하다. clickable에서 클릭 효과 제거하기 clickable에서 클릭 효과를 제거하기 위해서는 파라미터가 6개인 clickable 함수를 사용해야 한다. fun Modifier.cl..
[Jetpack Compose] clickable 클릭 효과 커스텀 하게 설정하기 : Custom Indication 구현하기
clickable의 기본 클릭 효과 살펴보기 이전 글에서 clickable의 기본 클릭 효과가 매우 어색한 것을 보았다. 이것이 왜 어색하게 느껴졌는지 구현체를 보면서 살펴보도록 하자. 만약 우리가 clickable { } 형태로 클릭 이벤트를 처리한다면 이 내부에서는 DefaultDebugIndication이란 클릭 효과를 사용한다. 그리고 이 클릭 효과는 아래와 같이 구현되어 있다. private object DefaultDebugIndication : Indication { private class DefaultDebugIndicationInstance( private val isPressed: State, private val isHovered: State, private val isFocused..