Android--Jetpack--Navigation详解

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

一,定义

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文件):

Android--Jetpack--Navigation详解_第1张图片

 Android--Jetpack--Navigation详解_第2张图片

 点击ok就会生成xml文件

Android--Jetpack--Navigation详解_第3张图片

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:




    

    
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:




    

    
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:





    

    

4,回到yuanzhen_nav.xml中,点击添加:

Android--Jetpack--Navigation详解_第4张图片

添加三个fragment :

Android--Jetpack--Navigation详解_第5张图片

然后收到添加跳转方向:

 Android--Jetpack--Navigation详解_第6张图片

 就会自动生成代码:



    
        
    
    
        
        
    
    
        
    

这里的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:




    

运行效果:

Android--Jetpack--Navigation详解_第7张图片

 五,添加导航栏

1,在res目录下添加menu:

Android--Jetpack--Navigation详解_第8张图片

2,menu.xml:



    
    
    

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

3,在activity_main添加新的布局:




    
    

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,点击试图的跳转线:

Android--Jetpack--Navigation详解_第9张图片

3, Android--Jetpack--Navigation详解_第10张图片

有四个动画可以选择

选择之后yaunzhen_nav文件如下:



    
        
    
    
        
        
    
    
        
    

也可以自己去自定义动画

你可能感兴趣的:(android-jetpack,android,navigation,android,jetpack)