Android 官方组件 Navigation 初使用

Google I/O 大会中国场次已经结束，最近也上线了 Android Studio 3.2 版本，在新版本上有一个谷歌着重推荐的架构组件 Navigation。

Navigation 主要是提供了 Fragment 之间的跳转切换，栈管理，可以使我们在应用中更加轻松的使用 Fragment。先看下我使用两个 Fragment 实现的最终效果：

image

第一步：想要使用 Navigation，首先要将 Android Studio 升级到 3.2 版本,然后在 Settings 中最后一行找到 Experimental，对右侧 Enable Navigation Editor 打钩，如下图所示，然后重启 studio 使设置生效。

image

第二步： 创建两个 Fragment，FirstFragment 和 SecondFragment，布局内容如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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"
    tools:context=".FirstFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="100dp"
        android:text="我是第一个Fragment"/>

    <Button
        android:id="@+id/btn_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="跳转到第二个Fragment"
        android:textAllCaps="false"
    />
</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
             tools:context=".SecondFraagment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_marginTop="100dp"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是第二个Fragment"/>

    <Button
        android:textAllCaps="false"
        android:id="@+id/btn_back"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="返回"
    />

</FrameLayout>

第三步： 创建导航视图文件

在 res 目录下新建 navigation 文件夹，然后新建一个 navigation 资源文件（需要 Android Studio3.2以上版本）

image

打开资源文件，然后切换为可视化模式，将两个已经创建好的 Fragment 添加进去，用箭头连接它们，这样就为它们绑定了跳转事件。

image

切换为 Text 模式后，可以看到具体的实现代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/changefragment"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="keven.com.myteststudio3l2.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first">
        <action
            android:id="@+id/action_firstFragment_to_secondFraagment"
            app:destination="@id/secondFraagment"/>
    </fragment>
    <fragment
        android:id="@+id/secondFraagment"
        android:name="keven.com.myteststudio3l2.SecondFraagment"
        android:label="fragment_second_fraagment"
        tools:layout="@layout/fragment_second_fraagment"/>
</navigation>

第四步： 编辑 MainActivity

在 Acitvity 布局文件中添加 fragment 组件，设置 name 属性为 androidx.navigation.fragment.NavHostFragment。在传统的单 Activity 多 Fragment 场景中，我们往往需要为 Activity 添加一个 FrameLayout 作为 Fragment 的容器。在 Navigation 中 HavHostFragment 就是 Fragment 的容器。布局中的 navGraph 属性建立了与 navigation 资源文件的关系。

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

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/changefragment"
    />

</android.support.constraint.ConstraintLayout>

重写 onSupportNavigateUp（）方法，目的是将 back 事件委托出去。若栈中有两个以上 Fragment，点击 back 键就会返回到上一个 Fragment。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onSupportNavigateUp() {
        Fragment fragment=getSupportFragmentManager().findFragmentById(R.id.fragment);
        return NavHostFragment.findNavController(fragment).navigateUp();
    }
}

第五步： 在 Fragment 中设置相应的跳转事件。

public class FirstFragment extends Fragment {


    public FirstFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_first, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        Button btnNext=view.findViewById(R.id.btn_next);
        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Navigation.findNavController(v).navigate(R.id.action_firstFragment_to_secondFraagment);
            }
        });
    }
}

public class SecondFraagment extends Fragment {


    public SecondFraagment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_second_fraagment, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        Button btnBack=view.findViewById(R.id.btn_back);
        btnBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Navigation.findNavController(v).navigateUp();
            }
        });
    }
}

如果在界面切换的过程中需要传值，就把数据设置在 Bundle 中，使用如下代码：

Navigation.findNavController(view).navigate(actionid,bundle);

现在，我们就可以把程序运行起来了，如果需要转场动画，可以在 Navigation 资源文件的 action 标签下，添加动画属性。

Android 官方组件 Navigation 初使用

推荐阅读更多精彩内容