Study Record

😶 앱에서 대상 경로 정의 Compose 에서 한 화면에서 다른 화면으로 넘어가는 탐색의 기본 개념 중 하나는 경로이다. 경로는 URL 개념과 유사하게 다른 URL 이 웹사이트의 다른 페이지에 매핑되는 것처럼 경로는 대상에 매핑되어 고유한 식별자 역할을 하는 문자열이다. 대상은 일반적으로 사용자에게 표시되는 항목에 상응하는 단일 컴포저블리거나 그 컴포저블 그룹을 뜻한다. 😶 Navigation 구성요소 Naviagtion 구성요소는 세가지로 나뉜다. NavController 대상(앱의 화면) 간 이동을 담당한다. NavGraph 이동할 컴포저블 대상을 매핑한다. NavHost NavGraph 의 현재 대상을 표시하는 컨테이너 역할을 하는 컴포저블이다. 😶 화면 이동 방법 (NavHost, NavContr..

😶 Alert Dialog AlertDialog( onDismissRequest = { // Dismiss the dialog when the user clicks outside the dialog or on the back // button. If you want to disable that functionality, simply use an empty // onCloseRequest. }, title = { Text(text = stringResource(R.string.congratulations)) }, text = { Text(text = stringResource(R.string.you_scored, score)) }, modifier = modifier, dismissButton = { Te..

😶 gradle 추가 build.gradle.kts(Module: app) 을 열고 dependencies 에 ViewModel 종속 항목을 추가한다. dependencies { implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1") } 😶 설계 권장 앱 아키텍처에 따르면 먼저 앱 기능에 따라 사용될 데이터를 정의하고 그 데이터에 따라 UI를 설계하는 것이 원칙이라고 한다. 그 원칙에 따라 로그인 기능을 만들려고 한다. 로그인 기능을 위한 데이터는 이메일 주소와 비밀번호다. 데이터에 따라 UI는 이메일 주소와 비밀번호를 사용자가 입력할 수 있는 입력 폼 2개와 제출하는 버튼이 하나 필요하다. 디자인을 고려해 완성된 UI 도안은 다음과..

Jetpack Compose 에서는 앱 UI에서 다양한 애니메이션을 쉽게 구현하도록 지원하는 강력하고 확장 가능한 API 를 제공한다. 😶 AnimatedVisibility 컴포저블 콘텐츠 나타남과 사라짐에 대한 애니메이션을 처리할 수 있다. 기본적인 사용 방법은 visible 가 true 이면 나타나고 false 이면 사라진다. enter 매개변수에는 나타날 때 보여질 애니메이션 효과(EnterTransition)를 exit 매개변수에는 사라질 때 보여질 애니메이션 효과(ExitTransition)을 설정할 수 있다. var editable by remember { mutableStateOf(true) } AnimatedVisibility( visible = editable, enter = fadeIn..

😶 Compose 간단한 앱바 앱바를 구현하는 간단한 방법은 Scaffod 의 topBar 매개변수를 이용하는 것이다. 간단하게 중앙에 글자만 있는 버전이다. Scaffold( topBar = { TestAppBar() } ) { it -> /* */ } @Composeable fun TestAppBar() { CenterAlignedTopAppBar( title = { Row( verticalAlignment = Alignment.CenterVertically ) { Text( text = stringResource(id = R.string.app_name), style = MaterialTheme.typography.displayLarge ) } }, modifier = modifier, ) }

😶 Material 테마 빌더를 사용하여 색 구성표 만들기 Material 테마 빌더를 이용하면 쉽게 색 구성표를 얻을 수 있다. Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. m3.material.io Material 테마 빌더로 이동하면 핵심 색상들이 보이는데 색상을 클릭하면 직접 수정할 수 있다. 주 색상(Primary)을 수정하면 주 색상에 맞게 Secondary, Tertiary, Neutral 색상도 변경된다. 설정한 핵심..

😶 Compose 이전 환경 설정 class TipUiTest { @get:Rule val composeTestRule = createComposeRule() } 😶 UI 콘텐츠 설정 setContent 안에 UI 구성요소를 호출한다. class TipUiTest { @get:Rule val composeTestRule = createComposeRule() @Test fun calculate_20_percent_tip() { composeTestRule.setContent { TipTimeTheme { TipTimeLayout() } } } } 😶 특정 컴포저블 엑세스하기 onNodeWithText() 메서드로 특정 문자열이 포함된 컴포저블(ex. TextField)을 찾아 performTextInpu..

😶 State (상태) Compose 는 선언형 UI 프레임워크로 UI 모습을 코드를 선언 한다. 앱이 실행되는 동안 또는 앱이 사용자와 상호작용할 때 UI 를 변경하고자 하면, 예를 들어 사용자가 입력폼에 검색할 단어를 가상 키보드를 클릭한다면 내부 코드에서는 사용자의 키보드 입력 값을 받아 UI 를 다시 업데이트하여 입력 폼의 값을 업데이트해야 한다. 이 과정을 Compose 는 리컴포지션이라는 프로세스를 사용해 앱의 컴포지션을 업데이트하여 UI 를 업데이트할 것이다. 여기서 컴포지션은 Compose가 컴포저블을 실행할 때(컴포저블 함수에 표함된 UI 를 사용자에게 표시할 때) 빌드한 UI 에 대한 정보이다. 상태(State)가 변경되면 Compose 는 영향을 받는 컴포저블을 새 상태로 다시 실행하..