Navigation使用(一)

Navigation使用(二)

简介

Navigation组件简化了Android应用程序中页面之间跳转的实现。在 AndroidStudio3.2中可以使用,默认情况下，Navigation组件支持fragments和Activities，也可以自定义支持类型

新建Navigation

首先添加依赖:

implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha01'
复制代码

然后:

1. 新建一个项目,右键单击 res 文件夹,选择 New > Android resource file
1. 输入文件名,例如:"nav_graph"
1. 文件类型选择 Navigation
1. 点击 OK
5.打开此文件

效果如下图:

认识编辑器

Navigation编辑器有三个部分:

1.Destinations list -- 列出在Graph Editor中的所有Destinations。
1. Graph Editor -- Destinations的可视化。
3.属性编辑器 - 包含Destinations和action相关的属性。

创建Destinations

在Graph Editor点击 __+__号 > __create blank Destinations__创建新的Destinations,默认为 fragment,此处我创建了两个Destinations,如图:

此时Text视图中:

xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.king.navigationdemo.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first" />
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.king.navigationdemo.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" />
navigation>
复制代码

连接Destination

点击一个Destination,其右侧会出现一个圆圈

单击圆圈并按住,连接到其他的Destination:

此时 Text视图中:

xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    app:startDestination="@id/firstFragment">
    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.king.navigationdemo.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first" >
        <action
            android:id="@+id/action_firstFragment_to_secondFragment"
            app:destination="@id/secondFragment" />
    fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.king.navigationdemo.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" />
navigation>
复制代码

编辑MainActivity(此处是MainActivity)

在MainActivity的 xml 中添加:

<fragment
        android:id="@+id/my_nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />
复制代码

app:defaultNavHost="true" 此属性可确保您NavHostFragment拦截系统返回按钮也可以重写AppCompatActivity.onSupportNavigateUp()方法:

@Override
public boolean onSupportNavigateUp() {
    return Navigation.findNavController(this, R.id.nav_host_fragment).navigateUp();
}
复制代码

此时 MainActivity 如图:

开始使用

跳转到Destinations使用的是NavController这个类,可以由以下方法返回

NavHostFragment.findNavController(Fragment)
Navigation.findNavController(Activity, @IdRes int viewId)
Navigation.findNavController(View)

我们在 First Fragment 中添加几个按钮并设置点击事件:

xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".FirstFragment">

    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="First fragment"
        android:textColor="#000000"
        android:textSize="30sp" />

    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="button1" />

    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="button2" />

    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="button3" />

    <Button
        android:id="@+id/button_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="button4" />
LinearLayout> 
复制代码

再点击事件中写:

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            default:
                break;
            case R.id.button_1:
                Navigation.findNavController(v).navigate(R.id.action_firstFragment_to_secondFragment);
                break;
        }
      }
复制代码

或者使用:

mButton2.setOnClickListener(Navigation.createNavigateOnClickListener(R.id.action_firstFragment_to_secondFragment, null));
Navigation.createNavigateOnClickListener() 返回一个View.OnClickListener对象
复制代码

点击运行:

Navigation与 Menu 结合使用

首先依赖一下:

implementation 'android.arch.navigation:navigation-ui:1.0.0-alpha01'
复制代码

再次新建一个Destinations,

<fragment
        android:id="@+id/thirdFragment"
        android:name="com.example.king.myapplication.ThirdFragment"
        android:label="fragment_third"
        tools:layout="@layout/fragment_third" />
复制代码

新建 menu 文件menu_nav_drawer:

xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item
        android:id="@id/secondFragment"
        android:icon="@mipmap/ic_launcher"
        android:title="SecondFragment" />

    <item
        android:id="@id/thirdFragment"
        android:icon="@mipmap/ic_launcher"
        android:menuCategory="secondary"
        android:title="ThirdFragment" />
menu>
复制代码

然后把MainActivity对应的 xml 改一下:

xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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">

    <fragment
        android:id="@+id/my_nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:menu="@menu/menu_nav_drawer" />
android.support.v4.widget.DrawerLayout>
复制代码

之后MainActivity中:

        NavigationView mNavView = (NavigationView) findViewById(R.id.nav_view);
        NavController navController = Navigation.findNavController(this, R.id.my_nav_host_fragment);
        NavigationUI.setupWithNavController(mNavView, navController);
复制代码

运行一下: