Android 官方组件 Navigation 初使用

比眉伴天荒 2022-01-20 15:11 238阅读 0赞

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

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

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

**第二步：** 创建两个 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">
    
        
        <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">
    
        
        <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以上版本）

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

切换为 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 标签下，添加动画属性。

转载于:https://juejin.im/post/5cae03a4f265da03705fa02a