반응형 Jetpack Compose11 [Jetpack Compose] 가이드맵 - Jetpack Compose UI 앱 개발 무료 강의, 강좌 가이드맵 강의 시작 전 ( ↓↓아래 내용을 클릭하시면 해당 게시글로 이동 됩니다!↓↓ ) Jecpack Compose 란?기본개념과 활용방법 Jetpack Compose - 강의 시작 1단원 : 기본Jetpack Compose 시작하기 UI Text () 변경하기 - color,size, padding컴포저블 재사용 - @Composable / 가독성레이아웃 Column과 RowUI Button()상태 -remember & mutableStateOf상태 호이스팅성능 지연 목록 - LazyColumn / LazyRow상태유지 - rememberSaveable애니메이션 효과 - animateDpAsState 유용 팁 [코틀린/Kotlin] 구글 개발자 참고 사이트 - Google developer.. 2024. 4. 26. 12. 애니메이션 효과 - animateDpAsState (Jetpack Compose UI 코틀린 앱 개발 강의) [Jetpack Compose] 가이드 맵 - 전체 보기 애니메이션 효과주기Compose를 사용하여 앱의 UI에 동적인 애니메이션을 추가하는 것은 사용자 경험을 향상시키는 훌륭한 방법입니다. 이번 포스트에서는 Compose의 애니메이션 기능 중 하나인 animateDpAsState 컴포저블을 사용하여 간단한 애니메이션을 구현하는 방법을 안내하겠습니다. 기본 애니메이션 구현먼저, animateDpAsState를 사용하여 특정 조건에 따라 UI 요소의 크기를 변화시키는 기본적인 애니메이션을 만듭니다. 예를 들어, 아래 코드는 "Show more" 버튼을 클릭하면 추가적인 패딩이 적용되도록 합니다. @Composableprivate fun Greeting(name: String) { var expand.. 2024. 4. 26. 11. 상태유지 - rememberSaveable (Jetpack Compose UI 코틀린 앱 개발 강의) [Jetpack Compose] 가이드 맵 - 전체 보기 Jetpack Compose에서 상태 관리는 앱의 UI를 동적으로 변경하는 데 중요한 역할을 합니다. 이번에는 상태 유지에 대해 알아보겠습니다.상태 유지란?상태 유지는 구성 변경(예: 회전)이나 프로세스 중단(예: 앱 종료) 후에도 상태를 유지하는 것을 말합니다. 일반적으로 Compose에서는 remember 함수를 사용하여 상태를 생성하지만, 이 함수는 컴포저블이 컴포지션에 유지되는 동안에만 상태를 유지합니다.상태 유지 방법상태를 유지하기 위해서는 rememberSaveable 함수를 사용해야 합니다. 이 함수는 구성 변경이나 프로세스 중단 후에도 상태를 저장합니다.예를 들어, 온보딩 화면의 상태를 유지하려면 다음과 같이 코드.. 2024. 4. 24. 10. 성능 지연 목록 - LazyColumn / LazyRow (Jetpack Compose UI 코틀린 앱 개발 강의) [Jetpack Compose] 가이드 맵 - 전체 보기 10. 성능 지연 목록 - LazyColumn / LazyRow 성능을 고려하여 많은 항목을 처리해야 할 때, LazyColumn을 사용하는 것이 좋습니다. LazyColumn은 화면에 보이는 항목만 렌더링하여 성능을 향상시킵니다.LazyColumn의 사용LazyColumn은 Android의 RecyclerView와 비슷한 역할을 합니다.화면에 표시될 항목을 처리할 때 유용합니다.LazyColumn은 필요한 항목만 렌더링하여 메모리 사용량을 줄이고 성능을 향상시킵니다.LazyColumn을 사용한 목록 생성LazyColumn을 사용하여 많은 항목을 표시합니다.items 함수를 사용하여 개별 항목을 렌더링합니다... 2024. 4. 24. 9. 상태 호이스팅 (Jetpack Compose UI 코틀린 앱 개발 강의) [Jetpack Compose] 가이드 맵 - 전체 보기 9. 상태 호이스팅 상태 호이스팅은 Compose에서 중복되는 상태를 방지하고 버그를 줄이며 컴포저블의 재사용성을 높이는 중요한 개념입니다.상태(State) 호이스팅이란?여러 컴포저블에서 공유되는 상태는 해당 상태를 컴포저블의 상위 항목에 위치시켜야 합니다.상태를 공통 상위 요소로 이동하여 상태가 중복되지 않고 버그가 발생하지 않도록 합니다.상태를 이동하는 이유코드의 일관성과 가독성을 유지하고 버그를 방지합니다.컴포저블을 재사용할 수 있도록 합니다.테스트가 쉬워집니다.상태를 호이스팅하는 방법컴포저블에서 사용하는 상태를 해당 컴포저블 바깥으로 이동합니다.필요한 경우 함수를 통해 콜백을 전달하여 상태를.. 2024. 4. 24. 7. Button (Jetpack Compose UI 코틀린 앱 개발 강의) [Jetpack Compose] 가이드 맵 - 전체 보기7. Button (Jetpack Compose 코틀린 앱 개발 강의) Jetpack Compose에서 Button은 사용자와 상호작용할 수 있는 중요한 UI 요소 중 하나입니다. 버튼을 통해 사용자는 앱에서 작업을 수행하거나 기능을 실행할 수 있습니다.Button의 역할:Button은 사용자의 터치나 클릭과 같은 상호작용을 감지하여 특정 동작을 실행하는 역할을 합니다.사용자에게 앱 내에서 가능한 기능을 제시하고, 사용자의 요청에 따라 앱의 상태를 변경합니다.Jetpack Compose의 Button 특징:Jetpack Compose의 Button은 안드로이드 UI를 선언적으로 정의하는 방식에 따라 사용됩니다.기존의 .. 2024. 4. 22. 6. 레이아웃 Column과 Row (Jetpack Compose UI 코틀린 앱 개발) [Jetpack Compose] 가이드 맵 - 전체 보기Jetpack Compose로 열과 행 만들기Jetpack Compose를 사용하면 UI를 구성하는 데 사용되는 다양한 레이아웃 요소를 간편하게 만들 수 있습니다. 이번에는 Column과 Row을 사용하여 열과 행을 만드는 방법을 알아보겠습니다. Column과 Row 소개 Column은 세로 방향으로 UI 요소를 배치할 때 사용되고, Row는 가로 방향으로 UI 요소를 배치할 때 사용됩니다. 각 요소는 구성 가능한 함수로, 내부에 배치할 항목을 넣을 수 있습니다. 열에 텍스트 요소 추가하기기존의 Greeting 함수를 수정하여 두 개의 텍스트 리스트가 있는 열을 표시하도록 만들어보겠습니다. @Composablef.. 2024. 4. 19. 5. 컴포저블 재사용 - 가독성 (Jetpack Compose UI 코틀린 앱 개발) [Jetpack Compose] 가이드 맵 - 전체 보기 안드로이드 Jetpack Compose에서는 컴포저블을 재사용하여 코드 중복을 줄이고, UI를 더욱 효율적으로 구성할 수 있습니다. 이번에는 컴포저블을 재사용하는 방법에 대해 알아보겠습니다.1.컴포저블이란?컴포저블은 UI를 구성하는 데 사용되는 함수입니다. 컴포저블은 @Composable 어노테이션이 붙은 함수로 정의되며, 이 함수는 UI를 구성하는 데 필요한 모든 요소를 반환합니다. 2.컴포저블 재사용 방법컴포저블을 재사용하는 방법은 다음과 같습니다.함수를 @Composable로 선언합니다.함수 내에서 UI를 구성하는 데 필요한 컴포넌트를 반환합니다.반환된 컴포넌트를 다른 컴포저블에서 호출하여 재사용합니다.예를 .. 2024. 4. 19. 4. UI 변경하기 - color,size, padding (Jetpack Compose UI 코틀린 앱 개발) [Jetpack Compose] 가이드 맵 - 전체 보기 안드로이드 Jetpack Compose에서는 UI를 조정하기 위해 다양한 방법을 제공합니다. 이번에는 UI 요소의 색상, 크기, 배치 등을 조정하는 방법에 대해 알아보겠습니다.1. UI 요소의 색상 조정Jetpack Compose에서는 UI 요소의 색상을 조정하기 위해 다양한 방법을 제공합니다. 대표적인 방법은 다음과 같습니다.MaterialTheme.colorScheme: Material Theme에서 제공하는 색상 스키마를 사용하여 UI 요소의 색상을 조정할 수 있습니다.예를 들어, Surface 컴포넌트의 색상을 아래와 같이 설정 할 수있습니다. MaterialTheme.colorScheme.primary Mat.. 2024. 4. 19. 3. Jetpack Compose 시작하기 (Jetpack Compose UI 코틀린 앱 개발) [Jetpack Compose] 가이드 맵 - 전체 보기 안드로이드 개발자라면 새로운 UI 프레임워크인 Jetpack Compose에 대해 들어봤을 것입니다. 이번에는 안드로이드 스튜디오에서 Jetpack Compose를 사용하는 방법에 대해 알아보겠습니다.1. 구성 가능한 함수Jetpack Compose에서 UI를 구성하는 기본 단위는 구성 가능한 함수입니다. 구성 가능한 함수는 @Composable이라는 주석이 달린 일반 함수입니다. 이 함수는 UI 요소를 반환합니다.예를 들어, 다음은 "Hello World!"를 표시하는 구성 가능한 함수입니다.2. Android 앱의 ComposeCompose를 사용하면 안드로이드 앱의 진입점은 여전히 Activity입니다. 앱을 .. 2024. 4. 19. 1. Jetpack Compose 란? (Jetpack Compose UI 코틀린 앱 개발) [Jetpack Compose] 가이드 맵 - 전체 보기 안녕하세요, 안드로이드 앱 개발자 여러분! 오늘은 Jetpack Compose를 사용하여 Android 앱의 UI를 개발하는 방법에 대해 소개해드리려고 합니다. Jetpack Compose는 최신 Android UI 개발 트렌드 중 하나로, XML이나 View 계층 구조 대신 Kotlin 코드로 UI를 작성할 수 있게 해줍니다. 이것은 기존의 방식과는 다른 새로운 개발 경험을 제공합니다!우리는 이 코드랩을 통해 Jetpack Compose의 기본 개념부터 시작하여 실전 프로젝트에 적용할 수 있는 실용적인 기술까지 배울 것입니다. 코드랩에서는 간단한 앱을 만들면서 Jetpack Compose의 다양한 기능을 탐색할 것입니.. 2024. 4. 19. 이전 1 다음 반응형
