Android-jetpack Compose 20

jetpack compose 시작하기, 관련 링크, 교육 자료 등

https://developer.android.com/jetpack/compose/documentation?hl=ko Jetpack Compose 시작하기 | Android Developers Jetpack Compose 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Jetpack Compose는 네이티브 Android UI를 빌드하기 위한 최신 도구 키트입니다. 여기에서 Compo developer.android.com Jetpack Compose 시작하기 기본 적인 내용에 대한 reference를 제시 하는 가장 기본이 되는 내용 전체 한번 읽어 봐야 함... https://m3.material.io/ Material Design Build beautiful,..

jackpack compose - Android Studio 설정

gradle 설정 buildscript { ext { // compose_ui_version = '1.4.0' compose_ui_version = '1.3.3' -> 이 버전은 별도 임 => 문서 확인 } plugins { id 'com.android.application' version '7.4.2' apply false id 'com.android.library' version '7.4.2' apply false id 'org.jetbrains.kotlin.android' version '1.8.10' apply false => 이게 코트린 버전임 } composeOptions { kotlinCompilerExtensionVersion '1.4.3' => 코트린 버전과 맞아야함(1.8.10에 맞는 ..

jackpack compose - text extended by click

이 단계에서는 이미 알고 있는 내용을 적용하고 몇 가지 힌트만 사용하여 새로운 개념을 학습합니다. 다음과 같이 만들어 보겠습니다. 버튼을 아이콘으로 대체 하위 요소인 Icon과 함께 IconButton 컴포저블을 사용합니다. Icons.Filled.ExpandLess와 Icons.Filled.ExpandMore를 사용합니다. 이는 material-icons-extended 아티팩트에서 사용할 수 있습니다. app/build.gradle 파일의 종속 항목에 다음 줄을 추가합니다. implementation "androidx.compose.material:material-icons-extended:$compose_version" 정렬을 고정하기 위해 패딩을 수정합니다. 접근성을 위해 콘텐츠 설명을 추가합니다..

jackpack compose - 스타일 및 테마 설정

지금까지 컴포저블의 스타일을 지정하지 않았지만 어두운 모드 지원을 비롯한 적절한 기본값을 얻었습니다. 이제 BasicsCodelabTheme과 MaterialTheme이 무엇인지 살펴보겠습니다. ui/theme/Theme.kt 파일을 열면 BasicsCodelabTheme이 구현에서 MaterialTheme을 사용하는 것을 확인할 수 있습니다. @Composable fun BasicsCodelabTheme( darkTheme: Boolean = isSystemInDarkTheme(), // Dynamic color is available on Android 12+ dynamicColor: Boolean = true, content: @Composable () -> Unit ) { MaterialTheme..

jackpack compose - 애니메이션 적용

Compose에서는 여러 가지 방법으로 UI에 애니메이션을 지정할 수 있습니다. 간단한 애니메이션을 위한 상위 수준의 API에서 전체 제어 및 복잡한 전환을 위한 하위 수준의 메서드까지 다양한 방법이 있습니다. 자세한 내용은 문서를 참고하세요. 이 섹션에서는 하위 수준의 API 중 하나를 사용하지만 걱정하지 않아도 됩니다. 매우 간단할 수도 있습니다. 이미 구현한 크기 변경에 애니메이션을 적용해 보겠습니다. 이를 위해 animateDpAsState 컴포저블을 사용합니다. 이 컴포저블은 애니메이션이 완료될 때까지 애니메이션에 의해 객체의 value가 계속 업데이트되는 상태 객체를 반환합니다. 유형이 Dp인 '목표 값'을 사용합니다. 펼쳐진 상태에 따라 달라지는 extraPadding을 만들고 애니메이션을 ..

jackpack compose - Lazy 목록 만들기

이제 이름을 더 현실적으로 나열해 보겠습니다. 지금까지 Column에 두 개의 인사말을 표시했습니다. 하지만 수천 개의 인사말을 처리할 수 있을까요? 목록 크기를 설정하고 람다에 포함된 값으로 목록을 채우도록 허용하는 다른 목록 생성자를 사용하기 위해 Greetings 매개변수의 기본 목록 값을 변경합니다(여기서 $it은 목록 색인을 나타냄). names: List = List(1000) { "$it" } 이렇게 하면 화면에 맞지 않는 인사말을 포함하여 1,000개의 인사말이 생성됩니다. 이는 분명히 성능 기준에 맞지는 않습니다. 에뮬레이터에서 실행해 볼 수 있습니다(경고: 이 코드로 인해 에뮬레이터가 중단될 수도 있음). 스크롤이 가능한 열을 표시하기 위해 LazyColumn을 사용합니다. LazyCo..

jetpack compose : state hoisting ☞ viewModel

Befor viewModel : 각각의 함수에서 List를 관리하고 적용함 => 전체를 동기화하고 데이터를 관리하기 불편 After ViewModel : 하나의 point에서 데이터를 관리 : single source of truth ================================================ befor viewModel stateless 함수를 만듦(상태 hoisting) == > state 변수를 지정 ==> state에 값을 넣음 stateless 함수 : 자체적으로 내부에는 메모리에 저장 할 수 있는 state, remember 변수 가 없음 변경되는 내용에 대해서는 lambda로 처리 : (Any) -> Unit (onTextChange) @OptIn(Experimen..

jackpack compose - 열과 행 만들기

Compose의 세 가지 기본 표준 레이아웃 요소는 Column, Row, Box입니다. 이러한 요소는 컴포저블 콘텐츠를 사용하는 구성 가능한 함수이므로 내부에 항목을 배치할 수 있습니다. 예를 들어 Column 내부의 각 하위 요소는 세로로 배치됩니다. Column { Text("First row") Text("Second row") } 이제 아래의 예와 같이 두 개의 텍스트 요소가 있는 열을 표시하도록 Greeting을 변경해 보겠습니다. 패딩을 이동해야 할 수도 있습니다. 이 솔루션과 결과를 비교해 보세요. import androidx.compose.foundation.layout.Column ... @Composable private fun Greeting(name: String) { Surfac..

App 예제 : Calculator, Day of Birth - xml 사용

Calculator App 전체적으로 복잡한 합수는 없으나, 로직이 좀 복잡함... 숫자, 계산, =, - , clear, "."에 대한 별도의 함수를 구현해서 화면에 출력 기타 기능 구현 activity_Main.xml MainActivity.kt package kr.logcenter.mycalculator import android.annotation.SuppressLint import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.view.View import android.widget.Button import android.widget.TextView import android.widget.Toast..