Jetpack Compose는 Android 앱을 개발하기 위한 현대적인 선언형 UI 프레임워크로, 명령형으로 UI를 조작하지 않고 선언형으로 UI를 렌더링 할 수 있게 해주는 라이브러리이다.Jetpack Compose를 사용하면 UI를 더 직관적이고 선언적으로 작성할
☝🏻 @Composable의 의미 Compose는 UI를 작성하기 위해 선언적인 방식을 사용하는데, @Composable 주석은 선언적 UI를 작성하는 데 사용된다. ☝🏻 Compose에서 Greeting이란?Greeting은 Compose에서 사용자에게 화면에 표
Surface는 머티리얼 디자인의 기본적인 패턴으로 UI를 구성하는 데 도움을 주는 요소이다. ✨ 주요 특징 Clipping : UI 요소들을 원하는 모양으로 잘라내거나 불필요한 부분을 가리는 데 사용될 수 있다. Elevation : 높이가 있어서 그림자를 만들 수
Compose에서 Image를 사용하는 방법은 Image 컴포넌트를 사용하는 것이다. 이 컴포넌트는 특정 위치에 이미지를 표시하는 데 사용된다. painter 속성은 이미지를 로드하고 그리는 데 사용되는 Painter 객체를 지정한다.painterResource(id
☝🏻 기존의 안드로이드 레거시 뷰와 Jetpack Compose에서 Checkbox의 다른점기존의 안드로이드 레거시 뷰에서는 체크박스의 상태를 사용자가 체크박스를 탭할 때마다 체크 상태가 토글 되었다. Jetpack Compose에서는 이러한 동작을 명시적으로 정의해
LazyColumn은 화면에 표시되는 항목만 렌더링하므로 대량의 데이터를 다룰 때 메모리 사용이 효율적이다. 사용자가 스크롤할 때마다 새로운 항목을 생성하고 이전 항목을 재활용하여 성능을 향상시킨다.items 매개변수를 사용하여 데이터 목록을 전달하고, 각 항목에 대한
Jetpack Compose의 ConstraintLayout은 UI 요소들을 배치하는 데 사용되는 도구로 XML을 사용하는 대신에 코드로 UI를 작성할 수 있다. ConstraintLayout을 사용하여 UI 요소들의 위치, 크기, 간격을 선언적으로 정의할 수 있어 유
AlertDialog 함수를 사용하여 다이얼로그를 생성하고, 그 안에 제목, 내용 및 버튼을 정의할 수 있다. onDismissRequestonDismissRequest는 다이얼로그가 닫히는 시점을 알려주는 이벤트 핸들러로 다이얼로그가 사용자에 의해 닫힐 때 호출된다.
Jetpack Compose에서 Animation은 UI 요소의 변화를 시각적으로 부드럽게 표현하고 상호작용성을 향상시키는 데 사용된다. animateColorAsState 및 animateFloatAsState 함수는 Jetpack Compose에서 사용되는 애니메이
Jetpack Compose를 사용하여 ToDo 앱 구현 Crossfade는 Jetpack Compose에서 제공하는 애니메이션 효과를 쉽게 적용할 수 있는 컴포저블 중 하나로 두 가지 상태 사이의 전환을 부드럽게 처리하여 사용자에게 시각적으로 부드러운 경험을 제공한다
navController는 Navigation을 관리하는 데 사용되는 NavHostController이다.NavHostController는 Jetpack Compose에서 사용되며, 탐색 그래프를 관리하고 탐색 명령을 처리한다. 이를 통해 앱 내에서 화면 간의 탐색을
이전에 구현한 Kakao API 이미지 검색 앱을 Jetpack Compose로 변환하는 작업을 진행하였다. SearchListScreen 함수는 전체 검색 화면을 나타낸다.LiveData를 Composable에서 사용하기 위해 observeAsState() 함수를
✨ MainScreenView 함수는 하단 바를 포함하여 메인 화면을 구성하며, 화면 탐색을 위한 네비게이션 그래프를 호스팅하는 역할을 한다. Scaffold는 앱의 레이아웃을 설정하는 데 사용된다. bottomBar는 Scaffold의 하단에 배치되는 요소로 Bott
BottomSheetDialog 함수는 Compose를 사용하여 바텀 시트 다이얼로그를 생성하는 역할을 하며, 바텀 시트 다이얼로그를 표시하여 사용자가 특정 항목을 제거하거나 취소할 수 있도록 한다. sheetState를 통해 다이얼로그의 상태를 관리하고, onRem
Jetpack Compose에서 DatePickerDialog를 구현하는 방법에 대해 정리해보려 한다. Material3에서 제공하는 DatePickerDialog와 DatePicker를 사용하여 DatePicker Dialog를 구현하였다. DatePickerDial
Kotlin으로 아래로 당겼을 때 화면이 새로고침 되는 것을 Swiperefreshlayout를 사용하여 구현하였는데, Jetpack Compose에서도 해당 기능을 구현 하고 싶어 찾아보다 rememberPullToRefreshState 라는 것을 알게 되었다.rem
프로젝트 진행 중에 사용자가 입력한 데이터 목록을 그래프로 표현하였는데, Jetpack Compose의 Canvas를 사용하여 도넛형 그래프를 그리는 방법을 정리해보려 한다. 사용자가 입력한 데이터를 기반으로 도넛형 그래프의 크기와 색상을 설정하고, 각 데이터 항목의
Compose를 사용하여 도넛형 그래프를 그리는 컴포저블 함수를 만들었는데, 그래프를 그릴 때 각 조각의 각도를 애니메이션을 통해 그려지도록 수정하였다.데이터의 합을 계산하고, 각 데이터 값을 전체 데이터 합으로 나누어 각도를 계산한다. 각 데이터 조각에 대해 Anim
서버로부터 데이터를 불러오는 과정에서 데이터를 로딩 중인 상태를 사용자에게 보여주기 위해 스켈레톤 로딩 화면을 구현하였는데, 이 부분을 정리해보고자 한다. LoadingShimmerEffect는 Shimmer 효과를 적용하기 위한 Brush를 생성하고 이를 conten
Composable은 Composable 함수에서 사용되는 어노테이션 이름이자 Jetpack Compose를 구성하는 함수의 이름 선언형 UI를 구성하기 위한 기본 단위이자 최소 단위Composition은 Composable 함수가 화면에 그려지기 위한 전체의 과정을