Path Basics 이번 포스팅에서는 Path가 무엇인지 살펴보고, Path로 어떤일들을 할 수 있는지 살펴보도록 하겠습니다. Path란? 안드로이드의 Path 클래스는 위에 있는 이미지 처럼 직선 및 곡선 등으로 구성된 복합적이고 기하학적인 내용을 그릴 수 있도록 도와줍니다. Path로 그리기 Canvas 스코프 내에서 path를 그릴 때 사용하는 메서드로 drawPath가 있습니다. 이미지 상의 두 drawPath는 더보기…
캔버스 기초 이 포스팅은 캔버스의 전반적인 기초에 대해서 요약합니다. 캔버스 좌표계 안드로이드의 캔버스는 다른 좌표계들과 달리 좌측 상단을 원점으로 하여 값이 우측 하단 방향으로 증가합니다. 사각형 그려보기 이 캔버스의 정중앙에 사각형을 하나 그리기 위해서는 두 점이 필요합니다. 두 점은 각각 (x1,y1), (x2,y2)로 표현할 수 있습니다. 두 점 대신 하나의 점(x1,y1)과 함께 더보기…
Prerequisite 수학적으로 원을 그리려면 어떻게 해야할까? 컴포즈로 시계 만들기 위 영상과 같은 시계 UI를 만들려면 어떻게 해야할까? 복잡하다고 느낄수록 잘게 나누면 답이 보일 때가 있다. 시계를 구성하는 요소를 정리하면 다음과 같다. 시계 배경에 해당하는 커다란 원 시침, 분침, 초침 눈금 및 시간을 나타내는 텍스트 우선 각 요소의 스타일을 다음과 같이 더보기…
컴퓨터를 이용하여 수학적으로 평면상에 무언가를 그리고 싶을 때, 반드시 알아야 하는 몇가지 재미없는 내용을 정리했다. 원(Circle) 지름(diameter) : 원의 중심을 지나 그 둘레위의 두 점을 직선으로 이은 선분의 길이. 한자어로는 직경이라고 하며, 지름은 순우리말. 반지름(radius) : 원의 중심에서 그 둘레에 이르는 선분의 길이. 지름의 절반이다. 원주(Circumference) : 원의 둘레 원주율(π, 더보기…
비트맵 형식과 달리 벡터형식은 수학적인 연산으로 이미지를 표현한다. 그렇기 때문에 확대해도 품질이 떨어지지 않으며, 일반적으로 용량이 적어 버튼, 아이콘과 같은 이미지를 표현하는데 많이 사용된다. 일반적으로 벡터형식의 이미지는 SVG포맷을 이용하게 되는데, 안드로이드 앱 개발에서는 SVG파일을 직접적으로 참조 할 순 없다. Vector형식의 Drawable로 변경하기 위해 일반적으로 SVG를 XML 포맷으로 컨버팅하게 되는데, 오늘은 더보기…
식물 세부 정보 화면의 일부를 컴포즈로 마이그레이션한 후, 아무 것도 손상되지 않았는지 테스트하는 것이 중요하다. Note: 실제 앱에서는 테스트 없이 레거시 코드를 다시 작성해서는 안된다. 또한 코드를 컴포즈로 마이그레이션하는 동안 테스트를 리팩토링하고 패스(녹색) 할수 있도록 유지해야 한다. Sunflower에서 androidTest 폴더에 있는 PlantDetailFragmentTest는 앱의 일부 기능을 테스트한다. 파일을 열고 현재 코드를 더보기…
컴포즈로 마이그레이션된 식물 세부 정보의 텍스트 콘텐츠가 있다. 그러나 컴포즈가 올바른 테마 색상을 사용하지 않는다는 것을 눈치챌 수 있다. 녹색을 사용해야 할 때 식물 이름에 보라색을 사용한다. 이 초기 마이그레이션 단계에서, 컴포즈에서 처음부터 Material 테마를 다시 작성하는 대신 View 시스템에서 사용 가능한 테마를 상속하기를 원할 수 있다. Material 테마는 컴포즈와 더보기…
기본적으로 컴포즈는 ComposeView가 윈도우에서 분리될 때마다 컴포지션을 삭제한다. 이런 부분은 ComposeView가 프레그먼트내에서 사용될 때 여러가지 이유로 바람직 하지않다. 컴포지션은 Compose UI 보기 타입이 상태를 저장하기 위해, 프래그먼트의 View 생명주기를 따라야 한다. 트랜지션 또는 윈도우 트랜지션이 발생할 때 Compose UI 요소를 화면에 유지한다는 것은, 전환하는 동안 ComposeView 자체는 윈도우에서 분리된 후에도 더보기…
이제 식물 설명을 마이그레이션해 해보자. fragment_plant_detail.xml의 코드에는 화면에 표시할 텍스트를 XML에 알려주기 위해 app:renderHtml=”@{viewModel.plant.description}”이 있는 TextView가 있다. renderHtml은 PlantDetailBindingAdapters.kt 파일에서 찾을 수 있는 바인딩 어댑터다. 구현은 HtmlCompat.fromHtml을 사용하여 TextView의 텍스트를 설정한다. 그러나 컴포즈는 현재 Spanned 클래스를 지원하지 않고, HTML 형식의 텍스트를 표시하지 않는다. 따라서 이 한계를 우회하려면, 컴포즈 코드의 View 더보기…
이제 UI에서 누락된 사항인 물주기 정보 및 식물 설명의 마이그레이션을 완료하는 것이 더 쉬워졌다. 이전에 수행한 XML 코드 접근 방식을 동일하게 살펴보면, 이미 나머지 화면을 마이그레이션 할 수 있다. fragment_plant_detail.xml에서 이전에 제거한 물주기 정보 XML 코드는 ID가 plant_watering_header 및 plant_watering인 두 개의 TextView로 구성된다. 이전에 했던 작업과 유사하게 PlantWatering이라는 새 더보기…
