안드로이드 젯팩에 포함된 탐색 라이브러리에 대한 설명 1

안드로이드 앱은 여러개의 액티비티와 프래그먼트가 쓰인 화면으로 구성됩니다. 각각의 화면은 레이아웃 규칙에 의해 만들게 되어있고 이 화면들을 옮겨다니는 것도 규칙이 필요합니다. 흔히 말하는 네비게이션 기능을 구현해야 하는 것입니다. 이 네비게이션 기능은 프로그래머가 직접 하드코딩해서 만들어도 되지만, 아무래도 프로그램 구조가 복잡해지고 보다 더 체계적으로 만들기 위해서는 통합된 기준이 있으면 좋을 것입니다.

안드로이드 젯팩에 포함된 탐색 라이브러리(navigation component in jetpack)를 쓰면 통합된 기준을 써서 메뉴 기능도 관리하고 각각의 화면 전환시 이동하는 루트도 정할 수 있습니다.

탐색 라이브러리가 작동하려면 크게 세가지 요소를 구현해야 합니다. 우선

(1) 네비게이션 그래프(navigation graph) = 새로 추가된 XML 리소스 파일의 하나로, 네비게이션 기능에 청사진이 되는 파일입니다. navigation이라는 루트 엘리먼트가 fragment를 포함하고 있고 fragment 끼리 이동하는 루트가 action 엘리먼트에 의해 정의됩니다. 이 파일이 마련되면 탐색 라이브러리가 읽어들여 처리하게 됩니다.
(2) NavHost = 프래그먼트의 일종으로 레이아웃에 추가해야 하는 특별한 위젯입니다. 네비게이션 그래프에서 정의된 각각의 프래그먼트 목적지를 보여주게 됩니다.
(3) NavController = 자바나 코틀린으로 구현된 구현체로 탐색 라이브러리의 실질적인 지휘를 하는 객체.

이 세가지 요소가 구현되어 잘 작동하면 기본적인 처리가 완료됩니다.

탐색 라이브러리를 코틀린으로 쓰려면 최신 버전의 안드로이드 스튜디오를 설치한 전제 하에 그래들 설정 파일에 아래 라인을 추가하면 됩니다.


dependencies {
  val nav_version = "2.3.5"

  // Kotlin
  implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")
  implementation("androidx.navigation:navigation-ui-ktx:$nav_version")

  // Feature module Support
  implementation("androidx.navigation:navigation-dynamic-features-fragment:$nav_version")

  // Testing Navigation
  androidTestImplementation("androidx.navigation:navigation-testing:$nav_version")

  // Jetpack Compose Integration
  implementation("androidx.navigation:navigation-compose:")
}

dependencies {

val nav_version = "2.3.5"

// Kotlin

implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")

implementation("androidx.navigation:navigation-ui-ktx:$nav_version")

// Feature module Support

implementation("androidx.navigation:navigation-dynamic-features-fragment:$nav_version")

// Testing Navigation

androidTestImplementation("androidx.navigation:navigation-testing:$nav_version")

// Jetpack Compose Integration

implementation("androidx.navigation:navigation-compose:")

}

기본적인 코딩은 타이핑도 가능하고, 네비게이션 그래프는 리소스 파일로 등록한 후 네비게이션 에디터로 그래픽컬하게 목적지와 출발지를 설정할 수 있습니다. 그래픽컬한 설정이 특징적인데 여러개의 액티비티나 프래그먼트가 있을 경우 복잡하게 얽힌 네비게이션 구조를 그래프처럼 한눈에 알 수 있어서 좋습니다. 일단 에디터로 경로를 설정하고나서 코드 화면으로 전환해서 XML 구문을 조정하면 됩니다.


<? xml version="1.0" encoding="utf-8"?>

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"         
    android:id="@+id/nav_graph">
    <fragment android:id="@+id/nav_first_fragment"
        tools:layout="@layout/fragment_first" ...>
        <action app:destination="@id/action_fisrt_to_start" ... />
    </fragment>
    <fragment android:id="@+jd/nav_second_framgent"
        tools:layout="@layout/fragment_second" ... /> 

    </fragment>
</navigation>

<? xml version="1.0" encoding="utf-8"?>

<navigation xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/nav_graph">

<fragment android:id="@+id/nav_first_fragment"

tools:layout="@layout/fragment_first" ...>

</fragment>

<fragment android:id="@+jd/nav_second_framgent"

tools:layout="@layout/fragment_second" ... />

</fragment>

</navigation>


<fragment android:id="@+id/nav_first_fragment" 
    tools:layout="@layout/fragment_first" ...> 
    <action app:destination="@id/action_fisrt_to_start" ... />

<fragment android:id="@+id/nav_first_fragment"

tools:layout="@layout/fragment_first" ...>

위 코드에서 id는 프래그먼트의 식별자이고 layout은 아래에 소개할 레이아웃 파일에서 프래그먼트의 id를 의미합니다. destination은 어떤 동작을 할지 목적지를 설정한 것입니다.

NavHost는 특수한 프래그먼트로 액티비티 UI 레이아웃에 배치하는 코드들입니다. 네비게이션에서 정의한 목적지의 지정 프래그먼트로, 여러 프래그먼트로 된 화면들을 바꾸어주는 기능을 담당합니다. 레이아웃 리소스에 정의합니다.


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        .../>

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_first_fragment" 
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

     <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_second_fragment" ... />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<androidx.appcompat.widget.Toolbar

.../>

<androidx.fragment.app.FragmentContainerView

android:id="@+id/nav_first_fragment"

android:name="androidx.navigation.fragment.NavHostFragment"

android:layout_width="0dp"

android:layout_height="0dp"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

app:defaultNavHost="true"

app:navGraph="@navigation/nav_graph" />

<androidx.fragment.app.FragmentContainerView

android:id="@+id/nav_second_fragment" ... />

</androidx.constraintlayout.widget.ConstraintLayout>


android:id="@+id/nav_first_fragment"  
android:name="androidx.navigation.fragment.NavHostFragment"
...
app:navGraph="@navigation/nav_graph"

android:id="@+id/nav_first_fragment"

android:name="androidx.navigation.fragment.NavHostFragment"

...

app:navGraph="@navigation/nav_graph"

이역시도 윗단의 네비게이션 그래프에서 지정한 것과 연결되어 작동합니다. id는 네비게이션 그래프 XML 파일에 기재된 것과 잘 연관시켜 코딩해야 합니다. 구조가 잘 맞으면 일단 준비가 거의 끝난 것이고, 실질적인 코틀린 코드는 NavController 객체를 써서 작업하면 됩니다.

NavController는 자바나 코틀린 코드인데 네비게이션 그래프에서 정의한 네비게이션 구조를 따라 NavHostFragment가 보여주는 화면을 이동하게 합니다. 대표적인 코드 구문으로 클릭리스너에 navigate() 함수를 쓰는 방법이 있습니다.


viewTransactionsButton.setOnClickListener { view ->
   view.findNavController().navigate(R.id.nav_second_fragment) 
}

viewTransactionsButton.setOnClickListener { view ->

view.findNavController().navigate(R.id.nav_second_fragment)

}

이 최소 구조를 토대로 여러 형태로 변환을 해서 쓰면 될 것입니다. 아직 완성된 구현을 안해보았는데 성공하면 소스코드를 공개해보도록 하겠습니다.

답글 남기기 응답 취소