Android 탐색 구성 요소를 빌드하는 방법

응용 프로그램을 디자인하는 것은 성가신 경향이 있으며 다양한 지점에서 다른 지점을 가리키는 화살표가 있는 화이트보드가 있는 경우가 많습니다.

처음에는 하나 또는 두 개의 활동이 있는 응용 프로그램이라고 생각했던 것이 갑자기 여러 흐름, 조각 및 광범위한 사용자 상호 작용이 있는 것으로 나타납니다. 그렇다면 화이트보드에 있는 내용을 그대로 가져와 코드로 쉽게 복제할 수 있다면 좋지 않을까요?

Navigation Component에 인사하세요.

익숙하지 않은 사람들에게 Navigation Component는 액티비티/프래그먼트의 레이아웃 대신 배치하는 또 다른 UI 클래스가 아닙니다. 대륙 대신 조각이 있는 지도처럼 생각하고 길찾기 가 필요합니다. 대륙에서 대륙으로 이동합니다. 그것은 당신의 조각과 그들 사이의 연결을 하향식 방식으로 제시합니다. 이 기사에서는 이 구성 요소의 주요 측면을 살펴보고 이를 애플리케이션에 통합하는 방법을 배웁니다.

항해를 시작할 준비가 되셨습니까? ⛵️

줄 배우기

Navigation 구성 요소는 Android Studio 3.3 이상에서 사용할 수 있습니다. 그것을 사용하려면 프로젝트에 다음 종속성을 추가하십시오.

android {
    ...
}

dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.0.0'
    implementation 'androidx.navigation:navigation-ui-ktx:2.0.0'
}

작업할 수 있도록 다음과 같은 구조로 애플리케이션을 설계했다고 가정해 보겠습니다.

• 조각 시작
• 조각 A
• 조각 B

사용자는 시작 조각에서 조각 A 또는 조각 B로 이동할 수 있습니다.

탐색 구성 요소 없이 이 모든 작업을 수행하려면 버튼 중 하나를 클릭할 때 조각을 여는 매우 친숙한 코드를 추가해야 합니다.

val myFragment : MyFragment = MyFragment()
supportFragmentManager.beginTransaction().add(R.id.container, myFragment).commit()

우리의 작은 예에서 이것은 여러 개의 짧은 줄에 해당하고 다소 복잡하지 않지만, 우리 애플리케이션이 더 크고 더 복잡한 사용자 흐름이 있는 경우 이것이 적절하게 확장되지 않을 것이라는 데 모두 동의할 수 있다고 생각합니다.

모든 탑승

탐색 구성 요소를 사용하려면 탐색 그래프를 만들어야 합니다. 이 그래프는 애플리케이션의 사용자 흐름을 설명하는 지도 역할을 합니다. 생성하려면 res 폴더를 마우스 오른쪽 버튼으로 클릭하고 새 리소스 파일을 생성합니다. 우리의 이름은 user_flow_graph.xml입니다. . 파일 형식을 탐색으로 표시해야 합니다.

모든 항해는 본거지에서 시작되며 우리도 다르지 않습니다. 저희 집은 NavHost라고 합니다. . 이것은 사용자가 UI와 상호 작용할 때 교환할 대상에 대한 자리 표시자 역할을 합니다. 활동의 기본 레이아웃에 NavHost를 추가해야 합니다.

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

    <fragment
        android:id="@+id/nav_host_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/user_flow_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

프래그먼트가 표시되고 교체될 위치를 저장할 프래그먼트 요소를 추가했습니다. navGraph 에 주의하십시오. 이전에 만든 XML 파일에 연결한 속성입니다.

이제 시작 대상을 추가해야 합니다. 그렇지 않으면 애플리케이션이 컴파일되지 않기 때문입니다.

user_flow_graph.xml이 열린 상태에서 탐색 편집기에서 작은 더하기 아이콘을 클릭해야 합니다.

팝업 메뉴에서 나중에 채워야 할 자리 표시자를 만들거나 가지고 있는 모든 조각에서 선택할 수 있음을 볼 수 있습니다.

사용자 흐름은 Start Fragment에서 시작하므로 먼저 선택하겠습니다.

다른 두 조각인 조각 A와 조각 B를 추가해 보겠습니다.

목적지 위로 마우스를 가져갈 때 나타나는 점을 클릭하고 다른 목적지로 드래그하여 두 목적지를 연결합니다.

시작 프래그먼트와 프래그먼트 A 및 B 사이에 방금 생성한 것은 액션입니다. .

Shiver me Timbers

목적지를 연결하기만 하면 여기에서 우리의 작업이 완료되고 어떤 마법 같은 방식으로 모든 것이 작동하는지 스스로에게 물어보셨을 것입니다.

글쎄, 그렇지 않습니다.

목적지로 이동하려면 코드에 알려야 합니다. 어떻게 하면 될까요? 이 과정에는 약간의 마법이 관련되어 있습니다.

가장 먼저 할 일은 Safe Args라는 gradle 플러그인을 추가하는 것입니다. . 목적지 사이를 이동할 때 유형 안전을 보장합니다.

buildscript {
   /...
    }
    dependencies {
        ...
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.0.0"
        
    }
}

또한 애플리케이션의 build.gradle에 다음 플러그인을 추가해야 합니다.

apply plugin: "androidx.navigation.safeargs.kotlin"

또한 android.useAndroidX=true gradle.properties 파일에서.

계속 진행하기 전에 이러한 모든 구성을 추가해야 하는 이유를 이해하겠습니다. 기본적으로 이전에 작업을 만들 때 뒤에서 Android Studio는 작업을 활성화하는 데 사용할 코드를 생성합니다. 이 코드는 각 작업을 나타내는 메서드와 클래스로 구성됩니다. 시작 부분을 예로 들어 보겠습니다. 선언한 작업에 대해 생성된 코드에는 StartFragmentDirections라는 클래스가 있습니다. . 이 클래스의 메서드는 이전에 만든 작업을 나타냅니다. 따라서 두 조각 모두에 대해 다음을 얻습니다.

• StartFragmentDirections.actionStartFragmentToFragmentA()
• StartFragmentDirections.actionStartFragmentToFragmentB()

이제 우리의 작업이 코드로 변환되었으므로 사용하겠습니다.

val action = StartFragmentDirections.actionStartFragmentToFragmentA()

이 프로세스의 마지막 단계에서는 NavController를 사용해야 합니다. 이 개체는 NavHost 내에서 탐색을 관리하는 역할을 합니다. 다음 세 가지 방법 중 하나를 사용하여 액세스할 수 있습니다.

• Fragment.findNavController()
• View.findNavController()
• 활동.findNavController(viewId:Int)

따라서 다음과 같은 결과를 얻을 수 있습니다.

fragmentABtn.setOnClickListener { button ->
    val action = StartFragmentDirections.actionStartFragmentToFragmentA()
    button.findNavController().navigate(action)
}

돛 다듬기

목적지 간에 데이터를 전달하려면 어떻게 해야 합니까? 사용자가 특정 항목을 클릭하면 다음 대상에서 해당 항목으로 작업을 수행하려는 시나리오를 상상해 보십시오. 이를 위해 대상 인수가 있습니다. user_flow_graph.xml을 열고 Fragment A를 클릭합니다. 오른쪽에 Fragment A의 다양한 속성을 자세히 설명하는 메뉴가 있습니다. 이러한 속성 중 하나는 Arguments입니다.

인수를 추가하려면 ➕ 아이콘을 클릭하기만 하면 됩니다. 팝업 창이 열리고 여기에서 인수를 구성할 수 있습니다. 이름을 지정하고 유형을 선택하고 기본값을 추가할 수 있습니다. Start 프래그먼트에서 전달되는 메시지가 될 Fragment A에 String 유형의 인수를 추가해 보겠습니다.

액션을 정의하고 생성된 메서드를 호출하는 Start 부분에서 인수를 전달합니다.

fragmentABtn.setOnClickListener { button ->
    val action = StartFragmentDirections.actionStartFragmentToFragmentA("Hello From Start Fragment")
    button.findNavController().navigate(action)
}

Fragment A에서 액세스하려면 다음 중 하나가 필요합니다.

• 번들에 액세스하여 메시지 값 가져오기

class FragmentA: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val bundle = arguments
        val root = inflater.inflate(R.layout.fragment_a, container, false)
        val textView : TextView = root.findViewById(R.id.textView)
        textView.text = bundle?.getString("message")
        return root
    }
}

• -ktx 종속성을 사용하는 경우 navArgs 사용

class FragmentA: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val args : FragmentAArgs by navArgs()
        val root = inflater.inflate(R.layout.fragment_a, container, false)
        val textView : TextView = root.findViewById(R.id.textView)
        textView.text = args.message
        return root
    }
}

✋ navArgs를 사용할 때 build.gradle 파일에 Java8 지원을 추가해야 합니다.

이 GitHub 리포지토리에서 여기에 표시된 모든 코드를 찾을 수 있습니다.