Compose의 CompositionLocal 이해하기

컴포저블 함수는 트리(tree)로 구성된다. 이 때 상태는 일반적으로 트리에서 가능한 한 가장 높은 노드에 선언되어야 한다(상태 호이스팅). 그리고 일반적으로 이렇게 선언된 상태는 하위 트리로 전달되곤 한다. 하지만 트리에서 여러 단계를 통해 상태를 전달해야 할 때는 다소 번거로울 수 있다. 예를 들어보자. 우선 컴포저블 함수 트리의 깊이(depth)가 n개라고 가정한다. 최상위 노드로부터 더보기…

Android MVI 라이브러리 Orbit-MVI

이전 포스팅 Android 프로젝트에 MVI 도입하기 를 먼저 읽는 것을 권장합니다. Orbit 개요 Orbit은 안드로이드 뿐만 멀티플랫폼을 지원하는 Redux/MVI 같은 라이브러리 이며, 쉽고 가벼운 것이 특징이다. 자세한 내용은 아래의 링크에서 참조하자 orbit-mvi github 저장소 공식 페이지 orbit을 프로젝트에 추가하기 위해 build.gradle에 다음 의존성을 추가 할 수 있다.(최신버전 확인) Orbit은 다음과 더보기…

Android 프로젝트에 MVI 도입하기

MVI 도입배경 프로젝트에 Jetpack Compose를 도입하고 1년정도 적극 쓰면서 ‘상태’ 관리의 중요성을 머리가 아닌 몸으로 느껴버렸다. 상태 관리를 어떻게 하면 좋을까 고민하던 중 동료 개발자가 이전에 나에게 말해줬던 MVI가 떠올랐다.  “MVI 는 상태를 쉽게 관리해준다구 blah blah…” Compose 도입 이전에는 그땐 상태 관리를 크게 중요하게 생각하지 않았다. 아니 어쩌면 관리가 더보기…

First step in Canvas – (2) Path Basics

Path Basics 이번 포스팅에서는 Path가 무엇인지 살펴보고, Path로 어떤일들을 할 수 있는지 살펴보도록 하겠습니다. Path란? 안드로이드의 Path 클래스는 위에 있는 이미지 처럼 직선 및 곡선 등으로 구성된 복합적이고 기하학적인 내용을 그릴 수 있도록 도와줍니다. Path로 그리기 Canvas 스코프 내에서 path를 그릴 때 사용하는 메서드로 drawPath가 있습니다. 이미지 상의 두 drawPath는 더보기…

First step in Canvas – (1) Canvas Basics

캔버스 기초 이 포스팅은 캔버스의 전반적인 기초에 대해서 요약합니다. 캔버스 좌표계 안드로이드의 캔버스는 다른 좌표계들과 달리 좌측 상단을 원점으로 하여 값이 우측 하단 방향으로 증가합니다. 사각형 그려보기 이 캔버스의 정중앙에 사각형을 하나 그리기 위해서는 두 점이 필요합니다. 두 점은 각각 (x1,y1), (x2,y2)로 표현할 수 있습니다. 두 점 대신 하나의 점(x1,y1)과 함께 더보기…

Compose Canvas를 활용한 시계 만들기

Prerequisite 수학적으로 원을 그리려면 어떻게 해야할까? 컴포즈로 시계 만들기 위 영상과 같은 시계 UI를 만들려면 어떻게 해야할까? 복잡하다고 느낄수록 잘게 나누면 답이 보일 때가 있다. 시계를 구성하는 요소를 정리하면 다음과 같다. 시계 배경에 해당하는 커다란 원 시침, 분침, 초침 눈금 및 시간을 나타내는 텍스트 우선 각 요소의 스타일을 다음과 같이 더보기…

수학적으로 원을 그리려면 어떻게 해야할까?

컴퓨터를 이용하여 수학적으로 평면상에 무언가를 그리고 싶을 때, 반드시 알아야 하는 몇가지 재미없는 내용을 정리했다. 원(Circle) 지름(diameter) : 원의 중심을 지나 그 둘레위의 두 점을 직선으로 이은 선분의 길이. 한자어로는 직경이라고 하며, 지름은 순우리말. 반지름(radius) : 원의 중심에서 그 둘레에 이르는 선분의 길이. 지름의 절반이다. 원주(Circumference) : 원의 둘레 원주율(π, 더보기…

SVG 파일을 Compose용 ImageVector로 변환하기

비트맵 형식과 달리 벡터형식은 수학적인 연산으로 이미지를 표현한다. 그렇기 때문에 확대해도 품질이 떨어지지 않으며, 일반적으로 용량이 적어 버튼, 아이콘과 같은 이미지를 표현하는데 많이 사용된다. 일반적으로 벡터형식의 이미지는 SVG포맷을 이용하게 되는데, 안드로이드 앱 개발에서는 SVG파일을 직접적으로 참조 할 순 없다. Vector형식의 Drawable로 변경하기 위해 일반적으로 SVG를 XML 포맷으로 컨버팅하게 되는데, 오늘은 더보기…

Migrating to Jetpack Compose – 테스트 하기

식물 세부 정보 화면의 일부를 컴포즈로 마이그레이션한 후, 아무 것도 손상되지 않았는지 테스트하는 것이 중요하다. Note: 실제 앱에서는 테스트 없이 레거시 코드를 다시 작성해서는 안된다. 또한 코드를 컴포즈로 마이그레이션하는 동안 테스트를 리팩토링하고 패스(녹색) 할수 있도록 유지해야 한다. Sunflower에서 androidTest 폴더에 있는 PlantDetailFragmentTest는 앱의 일부 기능을 테스트한다. 파일을 열고 현재 코드를 더보기…

Migrating to Jetpack Compose – 테마 상호운용

컴포즈로 마이그레이션된 식물 세부 정보의 텍스트 콘텐츠가 있다. 그러나 컴포즈가 올바른 테마 색상을 사용하지 않는다는 것을 눈치챌 수 있다. 녹색을 사용해야 할 때 식물 이름에 보라색을 사용한다. 이 초기 마이그레이션 단계에서, 컴포즈에서 처음부터 Material 테마를 다시 작성하는 대신 View 시스템에서 사용 가능한 테마를 상속하기를 원할 수 있다. Material 테마는 컴포즈와 더보기…