Layouts in Jepack Compose – Modifiers

Modifier를 사용하면 컴포저블을 꾸밀 수 있다. 동작, 모양을 변경하고, 접근성 레이블과 같은 정보를 추가하고, 사용자 입력을 처리하거나, 클릭, 스크롤, 드래그 또는 확대/축소 가능 항목을 만드는 것과 같은 고급 상호 작용을 추가할 수도 있다. Modifier는 일반 Kotlin 객체다. 변수에 할당하고 재사용할 수 있다. 여러 Modifier를 차례로 연결하여 구성할 수도 있다. 이전 더보기…

Layouts in Jepack Compose – 새로운 컴포즈 프로젝트 시작하기

새 Compose 프로젝트를 시작하려면 Android Studio Arctic Fox를 열고 아래와 같이 새 Android Studio 프로젝트 시작을 선택한다. 이 화면이 나타나지 않는다면, File > New > New Project로 가자. 새로운 프로젝트를 생성할 때, Empty Compose Activity를 사용가능한 템플릿으로 부터 선택한다. Next를 클릭하고 평소와 같이 프로젝트를 구성한다. minimumSdkVersion을 컴포즈가 지원하는 최소 API레벨인 더보기…

Layouts in Jepack Compose – 시작하기

Jetpack Compose basics 코드랩을 통해 간단한 UI를 컴포즈로 만들어 보았다. 화면에 아이템(세로 및 가로, 제각기)을 배치하고 그 안에 있는 요소의 정렬을 구성할 수 있는 Column 및 Row와 같은 유연한 레이아웃 컴포저블 뿐만 아니라 Text와 같은 컴포저블 함수를 사용하여 Compose로 간단한 UI를 구축하는 방법을 배웠다. 반면에 아이템이 세로 또는 가로로 표시되는 더보기…

Jetpack Compose basics – 마무리 작업

이번 과정에서는 이미 알고있는 것들을 적용하고 몇가지 힌트와 함께 새로운 개념을 배우것이다. 이 화면을 만들어 보자. 버튼을 아이콘으로 교체하기 하위 Icon과 IconButton 컴포저블을 함께 사용한다. 아이콘 리소스는 material-icons-extended 아티팩트에서 사용가능한 Icons.Filled.ExpandLess 및 Icons.Filled.ExpandMore를 사용한다. 다음의 코드라인을 app/build.gradle 파일의 의존성으로 추가한다. padding을 수정하여 정렬한다. 접근성을 위해 content description을 추가하자. 문자열 리소스 더보기…

Jetpack Compose basics – 앱 스타일링 및 테마 적용

지금까지는 컴포저블 함수에 어떠한 스타일도 적용하지 않았고, 다크모드 지원을 포함하는 적당한 기본값으로만 코드를 작성했다. BasicsCodelabTheme과 MaterialTheme을 내부를 살펴보자. ui/Theme.kt 파일을 열어보면 BasicsCodelabTheme이 MaterialTheme을 사용하여 구현한 것을 확인할 수 있다. MaterialTheme은 컴포저블 함수로 머테리얼 디자인 가이드로부터 스타일링 원칙들을 반영하고 있다. 해당 스타일 정보는 콘텐츠 내부에 있는 컴포넌트들에게 폭포수 형식으로 상위에서 하위로 더보기…

Jetpack Compose basics – 목록에 애니메이션 적용하기

컴포즈에서 여러 방법으로 UI에 애니메이션을 적용할 수 있다. 간단한 애니메이션을 위한 고수준의 API 부터 전체를 제어하고 복잡한 트렌지션을 위한 저수준의 API까지 있다. 자세한 내용은 문서를 참조하자. 애니메이션을 구현하기 위해 animateDpAsState라는 컴포저블 함수를 사용해볼 것이다. 이 함수는 애니메이션이 끝날 때까지 값이 지속적으로 갱신되는 State 객체를 반환한다. 이 함수는 타입이 Dp인 타겟값을 더보기…

Jetpack Compose basics – 상태 보존하기

지금까지 만든 앱에는 한가지 문제가 있다. 기기에서 앱을 실행하고 온보딩 스크린에서 “Continue” 버튼을 눌러 목록으로 진입한 뒤, 기기를 회전하면 다시 온보딩 스크린이 나온다. remember 함수는 Composition 내에서 컴포저블 객체들이 유지될때만 올바르게 동작한다. 화면이 회전 되었을 때는 Activity가 재시작되기 때문에 모든 상태를 다 잃게 된다. 화면 회전 뿐만 아니라 어떠한 환경구성이 더보기…

Jetpack Compose basics – 성능 좋은 목록 만들기

좀 더 현실적인 이름 목록을 만들어보자! 지금까지는 Column에 직접만든 greeting 함수를 사용하여 아이템을 2개만 나타냈었다. 하지만 만약 1000개 또는 그 이상을 다뤄야 한다면 어떨지 상상해보자. Greetings에 있는 매개변수 기본 목록 값을 변경하고, 목록의 사이즈 및 내용을 람다 표현식으로 채울 수 있는 다른 목록을 사용해보도록 하자. 이 목록을 사용하면 1000개의 greeting을 더보기…

Jetpack Compose basics – State Hoisting(상태 끌어올리기)

컴포저블 함수에서 다양한 함수들에 의해 불러와 지거나 수정되어지는 상태(state)는 공통적인 부모내에 존재한다. 이러한 처리를 상태 끌어올리기(state hoisting) 이라고 한다. hoist의 의미는 끌어 올려지는 것을 의미한다.(lift or elevate) 상태를 끌어올려 만들면 중복되는 상태 및 버그를 피할 수 있고, 컴포저블 함수의 재사용성과 테스트 용이성을 상당히 좋게 만들수 있다. 컴포저블 함수의 부모가 제어 더보기…

Jetpack Compose basics – Compose에서의 상태(State)

Compose의 상태  지금까지는 정적인 레이아웃을 만들었지만 이제 사용자 액션에 반응하도록 만들어 보자. 어떻게 버튼을 클릭가능하게 만들고 아이템의 사이즈를 조절할 수 있는지 알기 전에, 각각의 아이템이 확장되거나 축소되는 상태값을 어딘가에 저장해야만 한다. 앞에서 만든 Greeting 함수별로 이러한 값을 가질 필요가 있기 때문에, 논리적으로 생각해보면 이러한 값은 Greeting 내에 있어야 한다. 하지만 더보기…