📱내비게이션 & 제스처 정리

💠내비게이션

내비게이션이란?

• 화면 간 이동을 관리하는 것
  ex) 로그인 화면 -> 홈 화면
• Jetpack Compose에서는 기존 XML 방식과 다르게 컴포저블 함수 중심의 선언형 내비게이션 제공
  
  

내비게이션 컨트롤러와 호스트

val navController = rememberNavController()

NavHost(
    navController = navController,
    startDestination = "home"
) {
    composable("home") { HomeScreen(navController) }
    composable("profile") { ProfileScreen() }
}

• NavController라는 내비게이션 전용 컨트롤러 선언
  • 화면 이동을 지시하는 역할을 하며, NavHost라는 구성 요소와 함께 사용

NavController: 화면 이동 제어
NavHost: 목적지들을 연결하고, 어느 화면에서 시작할지를 결정

=> 내비게이션 시스템은 NavController와 NavHost가 짝을 이뤄 동작!!

목적지 추가와 인수 전달

• NavHost에 여러 개의 목적지를 등록-> 각 화면을 정의 가능
• 특정 화면으로 이동할 때 필요한 정보 전달 가능
  ex) 사용자 ID를 넘겨서 프로필 페이지에서 해당 유저 정보를 불러오는 것

=> 목적지를 구성하고 인수를 전달함으로써 화면 간 데이터를 주고받는 내비게이션이 완성

하단 내비게이션 바 다루기

• 앱을 보다 직관적으로 만들기 위해 하단 바를 사용
• 홈, 설정, 마이페이지 등의 화면을 아이콘으로 표시
• Scaffold 컴포넌트와 함께 자주 사용되며, 아이템을 클릭할 때마다 NavController를 통해 해당 목적지로 이동하도록 설정

NavController와 BottomNavigationItem을 연결해 현재 선택된 화면을 표시하는 로직이 중요!!!

💠 NavigationDemo 튜토리얼

프로젝트 구성

• Welcome, Home, Profile 세 개의 화면을 구현
• 각 화면은 하나의 컴포저블 함수로 만들고, 내비게이션을 통해 화면을 넘나들 수 있도록 설정
  
  

핵심 개념

• 경로를 문자열로 선언
• 각 경로마다 대응되는 화면을 등록
• 버튼을 클릭하면 NavController를 통해 다른 화면으로 이동
  ex) 웰컴 화면에서 홈 화면으로 이동하고, 다시 홈에서 프로필 화면으로 전환하는 흐름을 따라가는 구조

💠 하단 내비게이션 바 튜토리얼

BottomBarDemo 프로젝트

@Composable
fun BottomBarDemo() {
    val navController = rememberNavController()
    Scaffold(
        bottomBar = {
            BottomNavigation {
                BottomNavigationItem(
                    icon = { Icon(Icons.Default.Home, contentDescription = null) },
                    label = { Text("Home") },
                    selected = true,
                    onClick = { navController.navigate("home") }
                )
            }
        }
    ) {
        NavHost(navController, startDestination = "home") {
            composable("home") { HomeScreen() }
        }
    }
}

• 하단 탭 UI를 가진 앱을 구성
• 사용자는 하단 바에 있는 여러 아이콘을 눌러 각기 다른 화면으로 이동 가능
• Scaffold 구조 내에 bottomBar 슬롯 사용 -> 화면의 상단, 본문, 하단을 명확하게 분리할 수 있어 깔끔한 UI 가능
  
  

핵심 개념

• 하단 바의 아이템은 리스트로 만들어 반복 출력 가능

• 현재 선택된 화면을 기준으로 아이템 강조 표시

• 아이콘 + 텍스트로 구성된 탭 UI
  
  
  

💠 제스처 감지하기

클릭 제스처

• 가장 기본적인 제스처
• 특정 영역을 터치했을 때 반응하도록 만드는 것-> Modifier.clickable을 사용
• 클릭 시 이벤트를 처리하거나 새로운 동작 유도 가능
  ex) 버튼처럼 작동하는 텍스트
  
  

스크롤 제스처

• 화면을 위아래로 스크롤하는 동작 -> Modifier.scrollable 또는 Modifier.verticalScroll 같은 모디파이어를 통해 구현 가능
• 상태를 기억하는 ScrollState를 함께 사용하면 현재 스크롤 위치도 추적 가능

일반적인 UI 스크롤은 verticalScroll, 사용자 정의 스크롤은 scrollable을 사용

확대/축소, 회전, 이동 제스처

• 이미지 뷰어나 지도를 확대/축소할 때 사용
• Compose에서는 pointerInput과 detectTransformGestures 함수를 사용하여 처리 가능

zoom, rotation, pan 값을 이용해 이미지나 객체의 속성을 동적으로 변경

💠스와이프 제스처 감지하기

스와이프란?

• 좌우 혹은 상하로 손가락을 움직여 특정 동작을 유도하는 제스처
  ex) 리스트에서 항목을 좌측으로 밀면 삭제 버튼이 나타나는 UI 같은 것
  
  

스와이프 구현 구조

• swipeable 모디파이어를 통해 스와이프 기능을 구현
• 상태를 정의하고, 앵커라는 기준점을 선언하여 어느 위치까지 스와이프 되었는지 판단

=> 기준점의 위치와 상태값을 연결하는 앵커 맵을 잘 설계하는 것이 중요!!

SwipeDemo 프로젝트

val swipeState = rememberSwipeableState(0)
val anchors = mapOf(0f to 0, 300f to 1)

Box(
   modifier = Modifier
       .fillMaxWidth()
       .height(80.dp)
       .swipeable(
           state = swipeState,
           anchors = anchors,
           thresholds = { _, _ -> FractionalThreshold(0.3f) },
           orientation = Orientation.Horizontal
       )
) {
   Text("스와이프 해보세요", modifier = Modifier.align(Alignment.Center))
}

• 스와이프 가능한 박스 생성
• swipeable 상태 지정
• 임계점을 설정해 어느 정도 이동해야 상태가 바뀔지를 지정
  => 사용자의 스와이프 동작에 따라 UI가 자연스럽게 반응