08

< Navigation >

• 전통적인 Android 앱은 여러 Activity를 전환 → 코드 복잡
• Jetpack Navigation Architecture Component는 이를 구성요소로 단순화
  • NavHostController : 내비게이션 상태 및 스택 관리
  • NavHost : 목적지들을 정의하는 컨테이너

 

< 목적지 그래프 설정 >

• 목적지는 composable()로 정의
• startDestination은 초기 화면 지정

val navController = rememberNavController()

NavHost(navController = navController, startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("customers") { CustomersScreen() }
    composable("purchases") { PurchasesScreen() }
}

 

• sealed class + NavHost : 목적지 설정

 

< Sealed Class >

• 경로 관리 클래스
• 경로 오타 방지 및 재사용성 향상
• 경로 비교 시 안전성 확보

sealed class Routes(val route: String) {
    object Home : Routes("home")
    object Customers : Routes("customers")
    object Purchases : Routes("purchases")
}

 

 

< 이동 >

• navigate() : 특정 경로로 이동하는 함수
• navController.navigate(route) : 화면 이동
• 이동 시 옵션
  • popUpTo(): 백스택 제어, 이전 목적지 제거
  • inclusive: 해당 목적지도 제거 여부
  • launchSingleTop: 동일 목적지 중복 방지
  • restoreState: 저장된 상태 복구

 

< 인수 전달 >

• 경로에 값 포함 + backStackEntry에서 추출
• 인수 전달 : navController.navigate("welcome/$userName")
• 인수 수신 : backStackEntry.arguments?.getString("userName")
• 경로 설정 : "welcome/{userName}"

 

< 하단 내비게이션 바 >

 

• Scaffold : 상단바, 하단바, 본문 영역 제공
• NavHost :  목적지 라우팅 처리
• BottomNavigation : 하단 탭 UI
• BottomNavigationItem : 하단 아이템 반복 생성
• currentBackStackEntryAsState() : 현재 선택된 탭 식별
• popUpTo() + launchSingleTop : 중복 스택 방지 및 상태 복원

 

< 제스처 >

• 터치, 드래그, 스와이프, 확대, 축소 등
  • Modifier.clickable : 클릭 감지
  • detectTapGestures() : 다양한 단일 제스처 e.g. 탭, 롱프레스, 더블
  • Modifier.draggable : 수평 드래그, 드래그 방향은 Orientation.Horizontal 또는 Vertical
  • detectDragGestures : 수평+수직 드래그, 자유 방향 드래그, 두 방향(offset.x, offset.y) 모두 추적
  • Modifier.scrollable : 단일 방향 스크롤, offset 값을 갱신해 컴포넌트 위치 변경 가능
  • verticalScroll + horizontalScroll : 이중 스크롤, Image, Canvas, Box 등에서 사용, 이중 축 방향 스크롤 구현 가능
  • transformable : 확대/축소, scaleChange 값으로 크기 조절
  • 회전 : rotationZ에 따라 요소 회전
• 하나의 Box에 모든 트랜스폼 제스처 통합
• 멀티터치 기반의 인터랙션을 완전하게 구현 가능

.graphicsLayer(
    scaleX = scale,
    scaleY = scale,
    rotationZ = angle,
    translationX = offset.x,
    translationY = offset.y
)

 

 

< 스와이프 제스처 >

• 화면에 수평 또는 수직 방향으로 터치 후 이동하는 동작
• 주로 컴포넌트 간 상태 전환에 사용
• swipeable() 모디파이어
  • rememberSwipeableState()  : 스와이프 상태 보관
  • anchors : 스와이프 가능한 위치와 그에 대응하는 상태를 매핑하는 설정
  • thresholds : 임계점, 스와이프 전환 시점 기준 설정
  • offset : 현재 스와이프 위치를 이용해 UI 위치 변경
  • Orientation.Horizontal / Vertical : 이동 방향
  • velocityThreshold : 상태 전환을 위한 최소 속도
  • resistance : 사용자가 swipeable 범위를 넘어서 드래그 시 저항 효과 설정