Android--Jetpack--Navigation详解

最新推荐文章于 2024-07-25 19:04:18 发布

袁震

最新推荐文章于 2024-07-25 19:04:18 发布

阅读量1.1k

点赞数 19

分类专栏： android-jetpack 文章标签： android navigation android jetpack

本文链接：https://blog.csdn.net/y2653904/article/details/135005160

版权

android-jetpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

须知少日拏云志，曾许人间第一流

一，定义

Navigation 翻译成中文就是导航的意思。它是谷歌推出的Jetpack的一员，其目的主要就是来管理页面的切换和导航。

Activity 嵌套多个 Fragment 的 UI 架构模式已经非常普遍，但是对 Fragment 的管理，我们一般通过 FragmentManager 和 FragmentTransaction 来管理 Fragment 之间的切换。页面的切换通常还包括对应用程序 App bar 的管理、Fragment 间的切换动画，以及 Fragment 间的参数传递。纯代码的方式使用起来不是特别友好，并且 Fragment 和 App bar 在管理和使用的过程中显得混乱。

使用Navigation可以很方便的管理和切换Fragment。

二，角色介绍

Navigation组件由三部分构成：

1）导航图（xml文件）：包含所有导航相关信息的 XML 资源，其中包含所有目的地和操作。该图表会显示应用的所有导航路径。

2）NavHostFragment：导航宿主是 Navigation 组件的核心部分之一。导航宿主是一个空容器，用户在应用中导航时，目的地会在该容器中交换进出。

3）NavController：导航到目的地是使用NavController 完成的，它是一个在NavHost中管理应用导航的对象。每个NavHost均有自己的相应NavController 。

三，Navigation的优点

1）可视化的页面导航图，类似于 Apple Xcode 中的 StoryBoard，便于我们理清页面关系。

2）通过 destination 和 action 完成页面间的导航。

3）方便添加页面切换动画。

4）页面间类型安全的参数传递。

5）通过 NavigationUI，对菜单、底部导航、抽屉菜单导航进行统一的管理。

四，基本使用

1,在app的build.gradle中添加引用：

implementation 'androidx.navigation:navigation-fragment:2.4.1'
implementation 'androidx.navigation:navigation-ui:2.4.1'

2，在res目录下创建导航图（xml文件）：

点击ok就会生成xml文件

3，创建fragment：

创建三个fragment，分别为YZ1Fragment，YZ2Fragment，YZ3Fragment

public class YZ1Fragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_yz1,container,false);
    }

}

fragment_yz1：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#223355">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是第一页"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="跳转第二页"
        android:textAllCaps="false"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/message" />

</androidx.constraintlayout.widget.ConstraintLayout>

public class YZ2Fragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_yz2,container,false);
    }
}

fragment_yz2：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#dd2233">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="16dp"
        android:text="第二页"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="返回第一页"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="前往第三页"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn" />

</androidx.constraintlayout.widget.ConstraintLayout>

public class YZ3Fragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_yz3,container,false);
    }
}

fragment_yz3：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#33ff22">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="16dp"
        android:text="第三页"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="跳到第二页"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</androidx.constraintlayout.widget.ConstraintLayout>

4，回到yuanzhen_nav.xml中，点击添加：

添加三个fragment ：

然后收到添加跳转方向：

就会自动生成代码：

<?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"
    android:id="@+id/yuanzhen_nav"
    app:startDestination="@id/YZ1Fragment">
    <fragment
        android:id="@+id/YZ1Fragment"
        android:name="com.yuanzhen.mynavigation.YZ1Fragment"
        android:label="YZ1Fragment" >
        <action
            android:id="@+id/action_YZ1Fragment_to_YZ2Fragment2"
            app:destination="@id/YZ2Fragment" />
    </fragment>
    <fragment
        android:id="@+id/YZ2Fragment"
        android:name="com.yuanzhen.mynavigation.YZ2Fragment"
        android:label="YZ2Fragment" >
        <action
            android:id="@+id/action_YZ2Fragment_to_YZ3Fragment2"
            app:destination="@id/YZ3Fragment" />
        <action
            android:id="@+id/action_YZ2Fragment_to_YZ1Fragment2"
            app:destination="@id/YZ1Fragment" />
    </fragment>
    <fragment
        android:id="@+id/YZ3Fragment"
        android:name="com.yuanzhen.mynavigation.YZ3Fragment"
        android:label="YZ3Fragment" >
        <action
            android:id="@+id/action_YZ3Fragment_to_YZ2Fragment2"
            app:destination="@id/YZ2Fragment" />
    </fragment>
</navigation>

这里的action代表的就是跳转路径。

5，在fragment中实现跳转代码：

public class YZ1Fragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_yz1,container,false);
    }

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

}

public class YZ2Fragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_yz2,container,false);
    }

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

        Button btn2=view.findViewById(R.id.btn2);
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Navigation.findNavController(view).navigate(R.id.action_YZ2Fragment_to_YZ3Fragment2);
            }
        });
    }
}

public class YZ3Fragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_yz3,container,false);
    }

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

}

6，在Activity添加fragment：

public class MainActivity extends AppCompatActivity {
    private NavController navController;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        navController = Navigation.findNavController(this, R.id.frag);
        NavigationUI.setupActionBarWithNavController(this, navController);

    }


}

activity_main：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/frag"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        android:name="androidx.navigation.fragment.NavHostFragment"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/yuanzhen_nav"/>

</androidx.constraintlayout.widget.ConstraintLayout>

运行效果：

五，添加导航栏

1，在res目录下添加menu：

2，menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/YZ1Fragment"
        android:icon="@mipmap/pic_article_default"
        android:title="首页"/>
    <item
        android:id="@+id/YZ2Fragment"
        android:icon="@mipmap/tell_normal"
        android:title="第二页"/>
    <item
        android:id="@+id/YZ3Fragment"
        android:icon="@mipmap/video_call_default"
        android:title="第三页"/>
</menu>

注意，这里的id就是你要跳转的fragment名称

3，在activity_main添加新的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <fragment
        android:id="@+id/frag"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="9"
        app:defaultNavHost="true"
        android:name="androidx.navigation.fragment.NavHostFragment"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/yuanzhen_nav"/>
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/btm"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:menu="@menu/menu"/>

</LinearLayout>

4，在MainActivity添加代码：

public class MainActivity extends AppCompatActivity {
    private NavController navController;
    BottomNavigationView bottomNavigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomNavigationView=findViewById(R.id.btm);
        navController = Navigation.findNavController(this, R.id.frag);
        NavigationUI.setupWithNavController(bottomNavigationView,navController);
    }
}

实现效果：

六，添加动画效果

添加动画效果非常简单：

1，打开yuanzhen_nav.xml文件

2，点击试图的跳转线：

3，

有四个动画可以选择

选择之后yaunzhen_nav文件如下:

<?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"
    android:id="@+id/yuanzhen_nav"
    app:startDestination="@id/YZ1Fragment">
    <fragment
        android:id="@+id/YZ1Fragment"
        android:name="com.yuanzhen.mynavigation.YZ1Fragment"
        android:label="YZ1Fragment" >
        <action
            android:id="@+id/action_YZ1Fragment_to_YZ2Fragment2"
            app:destination="@id/YZ2Fragment"
            app:enterAnim="@anim/nav_default_pop_enter_anim"
            app:exitAnim="@anim/nav_default_pop_enter_anim"
            app:popEnterAnim="@anim/nav_default_pop_exit_anim"
            app:popExitAnim="@anim/nav_default_pop_exit_anim" />
    </fragment>
    <fragment
        android:id="@+id/YZ2Fragment"
        android:name="com.yuanzhen.mynavigation.YZ2Fragment"
        android:label="YZ2Fragment" >
        <action
            android:id="@+id/action_YZ2Fragment_to_YZ3Fragment2"
            app:destination="@id/YZ3Fragment"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim"
            app:popEnterAnim="@anim/nav_default_enter_anim"
            app:popExitAnim="@anim/nav_default_pop_exit_anim" />
        <action
            android:id="@+id/action_YZ2Fragment_to_YZ1Fragment2"
            app:destination="@id/YZ1Fragment" />
    </fragment>
    <fragment
        android:id="@+id/YZ3Fragment"
        android:name="com.yuanzhen.mynavigation.YZ3Fragment"
        android:label="YZ3Fragment" >
        <action
            android:id="@+id/action_YZ3Fragment_to_YZ2Fragment2"
            app:destination="@id/YZ2Fragment" />
    </fragment>
</navigation>

也可以自己去自定义动画