4월, 2024의 게시물 표시

Jetpack Compose Navigation 정리

 Navigation 구성요소 Navigation은 크게 3가지 구성요소로 이뤄진다. NavController: 대상(즉, 앱의 화면) 간 이동을 담당한다.  NavGraph: 이동할 컴포저블 대상을 매핑을 담당 NavHost: NavGraph의 현재 대상을 표시하는 컨테이너 역할을 하는 컴포저블 NavController NavController는 Navigation 구성요소의 중심 API로, 스테이트풀(Stateful)이며 앱의 화면과 각 화면 상태를 구성하는 컴포저블의 백 스택을 추적한다. 컴포즈 환경에서 NavController는 rememberNavController()를 이용하여 가져올 수 있다. val navController = rememberNavController() rememberNavController()를 호출하여 NavContoller 인스턴스를 생성할 때 유의해야 할 점은 상태호이스팅에 유의해야 한다. 컴포저블 계층 구조에서 NavController를 만드는 위치는 이를 참조해야 하는 모든 컴포저블이 액세스할 수 있는 곳이어야 한다. 이러한 구조가 상태 호이스팅의 원칙을 준수하는 것이다.   NavGraph NavGraph는 ID로 가져올 수 있는 NavDestination 노드의 집합이다. NavGraph는 '가상' 대상 역할을 합니다. NavGraph 자체는 백 스택에 나타나지 않지만 NavGraph로 이동하면 시작 대상이 백 스택에 추가된다. 새로운 NavGraph는 대상을 추가하고 시작 경로을 설정할 때까지 유효하지 않다. 대상을 추가하는 방법은 NavGraphBuilder.composable() 함수를 이용한다. 자세한 내용은 아래에서 설명한다. NavHost NavHost는 자체 포함된 탐색이 발생할 수 있도록 Compose 계층 구조에 제공한다. 지정된 NavGraphBuilder 내의 모든 컴포저블을 제공된 navController에서 탐색할 수 있다. 즉 각 NavController를 단일 NavHost

Jetpack Compose 기초정리

 Jetpack Compose 기초는 다음의 링크에서 확인 가능 https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko *최근 진행중인 개인 프로젝트는 다음의 구조로 진행 MVVM 디자인 패턴(통신 Retrofit) + DI(Dagger Hilt) + Compose 프로젝트를 위해 접해보지 못했던 Compose를 먼저 이해해 보기로 함. *Compose 정리 **Compose로 Layout을 어떻게 구성하는지 공부 1) 기본적으로 사용되는 레이아웃은 3가지가 있습니다. Column , Row, Box (단순한 컨테이너로, Compose의 레이아웃을 구성하는데 사용) - 수직 Column - 수평 Row - 중첩 Box 2) 수정자 (Modifier.함수()로 사용 ) - **Modifiers는 순서가 매우 중요함 - Composable의 크기, 레이아웃, 동작 및 모양 변경 - 접근성 라벨과 같은 정보 추가 - 사용자 입력 처리 - UI요소를 클릭 가능, 스크롤 가능, 드래그 가능 또는 확대/축소 가능하게 만드는 것과 같은 높은 수준의 상호작용 추가 Column(modifier = Modifier .padding(24.dp) .fillMaxWidth()) { Text(text = "Hello,") Text(text = name) } (1) 지정한 크기가 레이아웃의 상위 요소를 무시하고 Composable의 크기를 고정해야 하는 경우 requiredSize 수정자를 사용 Box(Modifier.size(90.dp, 150.dp).background(Color.Green)) { Box(Modifier.requiredSize(100.dp, 100.dp).background(Color.Red)) }     - 가장 하위에 있는  Box가 상위 Box 90.dp 크기를 무시하고 100.dp로 설정      (2) 레