คอมโพเนนต์ Navigation

Navigation Component คืออะไร

การตั้งค่า: การพึ่งพา

// app/build.gradle
dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.7.7'
    implementation 'androidx.navigation:navigation-ui-ktx:2.7.7'
}

// project/build.gradle (for Safe Args):
buildscript {
    dependencies {
        classpath 'androidx.navigation:navigation-safe-args-gradle-plugin:2.7.7'
    }
}

// app/build.gradle — apply the plugin:
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

กราฟการนำทาง (nav_graph.xml)

<!-- res/navigation/nav_graph.xml -->
<navigation
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.HomeFragment">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.DetailFragment">
        <argument
            android:name="itemId"
            app:argType="integer" />
    </fragment>
</navigation>

NavHostFragment ในเลย์เอาต์ Activity

<!-- activity_main.xml -->
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/navHostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true" />

NavController — การนำทางระหว่างแฟรกเมนต์

class HomeFragment : Fragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.btnOpenDetail.setOnClickListener {
            // Navigate using action ID from nav_graph
            findNavController().navigate(R.id.action_home_to_detail)
        }
    }
}

Safe Args — อาร์กิวเมนต์ที่ปลอดภัยตามชนิดข้อมูล

// In HomeFragment — pass itemId:
binding.btnOpenDetail.setOnClickListener {
    val action = HomeFragmentDirections.actionHomeToDetail(itemId = 42)
    findNavController().navigate(action)
}

// In DetailFragment — receive itemId:
class DetailFragment : Fragment() {
    private val args: DetailFragmentArgs by navArgs()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val id = args.itemId   // Int, type-safe
        viewModel.loadItem(id)
    }
}

การนำทางขึ้น

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navHostFragment = supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        navController = navHostFragment.navController

        // Wire toolbar Up button
        setupActionBarWithNavController(navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp() || super.onSupportNavigateUp()
    }
}

การนำทางด้านล่างด้วย NavController

// In Activity.onCreate():
val navHostFragment = supportFragmentManager
    .findFragmentById(R.id.navHostFragment) as NavHostFragment
val navController = navHostFragment.navController

// Wire BottomNavigationView
binding.bottomNav.setupWithNavController(navController)

// Each menu item ID must match a fragment destination ID in nav_graph.xml

ดึงรายการจากแบ็กสแตก

// Go back one step
findNavController().popBackStack()

// Navigate back to a specific destination (popping everything on top)
findNavController().popBackStack(R.id.homeFragment, inclusive = false)

// Navigate and clear back stack (e.g., after login)
findNavController().navigate(
    R.id.action_login_to_home,
    null,
    NavOptions.Builder()
        .setPopUpTo(R.id.loginFragment, inclusive = true)
        .build()
)

ดีปลิงก์

<!-- In nav_graph.xml, inside the destination fragment: -->
<deepLink
    android:id="@+id/deepLinkDetail"
    app:uri="https://example.com/items/{itemId}" />

<!-- Also add intent-filter in AndroidManifest.xml for the Activity: -->
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="example.com" />
</intent-filter>

การเปลี่ยนผ่านระหว่างแฟรกเมนต์

<action
    android:id="@+id/action_home_to_detail"
    app:destination="@id/detailFragment"
    app:enterAnim="@anim/slide_in_right"
    app:exitAnim="@anim/slide_out_left"
    app:popEnterAnim="@anim/slide_in_left"
    app:popExitAnim="@anim/slide_out_right" />

ตรวจสอบอย่างรวดเร็ว

ทบทวน: Navigation Component