이동식 저장소

Compose에서 블러 효과를 그리는 방법은 여러 가지 있지만, 이 글에서는 ``Modifier.drawBehind``를 사용하는 방법을 소개한다. ``Modifier.drawBehind { ... }``를 사용하면 Composable의 뒤에 무언가를 그릴 수 있다. 람다 내부에서는 ``DrawScope``를 통해 Compose Canvas에 접근할 수 있다.디자인 확인쿠링에서는 CTA 버튼 위에 블러를 보여주는 경우가 있다. 주로 리스트의 내용을 자연스럽게 보여줄 때 적용한다.구현Composable 위에 하얀색과 투명으로 이루어진 사각형을 그리면 된다. 사각형의 높이는 임의로 줄 수 있으나, 여기서는 Composable 높이의 30%로 지정했다. 사각형의 너비는 물론 Composable의 너비와 같다...

Compose에는 여러 타입의 Material ``TextField``가 선언되어 있다.하지만 머티리얼 디자인과는 다른 커스텀 ``TextField``가 필요하다면? ``BasicTextField``를 커스터마이즈하면 된다.BasicTextField``BasicTextField``는 모든 머티리얼 ``TextField``의 backbone 컴포넌트이다. 실제로 ``OutlinedTextField`` 등의 코드를 보면, 내부적으로 ``BasicTextField``를 호출하고 있다.@Composablefun OutlinedTextField( // ...) { // ... BasicTextField( // ... decorationBox = @Composable { innerTextF..

(내가) 자주 실수하는 ``Icon``과 ``Image``! 어떻게 다른지 비교해 보자. Icon 주로 단색 아이콘을 보여줄 때 사용한다. Material 아이콘 또는 벡터 drawable 등을 사용할 수 있으며, 아이콘에 적절한 색깔을 tint로 입혀 사용한다. 색깔을 입히고 싶지 않다면 ``Color.Unspecified``를 사용하면 된다. @Composable fun Icon( painter: Painter, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current) ) ``contentDescription`..

``Density`` 객체에는 ``Float`` 타입의 ``fontScale`` 프로퍼티가 선언되어 있다. 공식 문서에서는 다음과 같이 설명하고 있다. The logical density of the display. This is a scaling factor for the Dp unit. 시스템 설정의 ``글자 크기`` 항목이 바로 이 fontScale을 설정하는 것이다. UI에서 설정한 ``sp`` 값에 fontScale을 곱하면 실제로 UI에 보일 글씨 크기를 얻을 수 있다. 기본값은 1.0이고, 최댓값은 2.0이다. 블린더 앱에서는 ``fontScale``의 값에 따라 서로 다른 UI를 보여주었다. fontScale이 일정 값 이상이라면 기본 UI 대신 저시력 UI를 보여준다. 저시력 UI는 예쁜..

문제 초기 문자열이 있는 ``TextField``를 다음과 같이 선언하였다. @LightPreview @Composable private fun TextFieldPreview() { var textFieldValue by remember { mutableStateOf("검색하세요") } KuringTheme { TextField( value = textFieldValue, onValueChange = { textFieldValue = it } ) } } 프리뷰를 실행해 보면, 처음부터 문자열이 있음에도 불구하고(``검색하세요``) 커서가 맨 앞에 있는 모습을 확인할 수 있다. 실제로는 문자열의 맨 끝에 와야 자연스럽다. 원인 원인을 파악하기 위해 ``TextField``의 내부 구현을 뜯어보자. 우선, ..