4월, 2024의 게시물 표시

Jetpack Compose Navigation 정리

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