Navigation使用流程和使用toolbar、BottomNavigationView、drawerLayout

1.Navigation组件构成

image.png

image.png

2.基本用法

1.创建导航图

在res目录中创建Navigation目录，并创建nav_graph xml

2.向导航图添加目的地

创建一个fragment类和xml并在xml中用"context"参数关联Class

然后在nav_graph中添加该Fragment

3.向 Activity 添加 NavHost(FragmentContainerView控件)

4.利用NavController管理导航

activity中得到NavController

 val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment)
                as NavHostFragment
        navController = navHostFragment.findNavController()

fragment中得到NavController

findNavController()

实现页面切换

首先在nav_graph中连接action，然后代码实现navigate

btn_login.setOnClickListener {
            val action = HomeFragmentDirections
                .actionHomeFragmentToLoginFragment()
            findNavController().navigate(action)
        }

tip：您从目的地A导航至目的地B时，输入的目的地B将应用enterAnim，而退出的目的地A将应用exitAnim.
当用户点击系统的后退"按钮，从B 后退转到A时，情况发生相反:输入目标A将应用popEnterAnim，退出目标B将应用popExitAnim.

实现数据传递

进入nav_graph先在要接收数据的页面中添加argument，这里添加了一个名为name的String，再去相应的Fragment里接收

val args:WelcomeFragmentArgs by navArgs()
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        name_text.text = args.name
        }

3.利用toolbar代替actionbar

1.在res中两个theme文件中将parent参数设置为NoActionBar

image.png

2.activity xml中添加一个toolbar

3.activity中设置代码

//启动toolbar作为默认的actionbar
        setSupportActionBar(toolbar)
        barConfig = AppBarConfiguration(setOf(R.id.homeFragment,R.id.searchFragment)
        ,drawer_layout)
//toolbar和NavController关联
        setupActionBarWithNavController(navController,barConfig)

4.设置底部BottomNavigationView

1.activity xml中添加一个BottomNavigationView

2.res目录中创建一个menu目录，并创建一个管理item menu的xml

image.png

3.BottomNavigationView中使用menu xml

4.activity中关联BottomNavigationView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        bottom_bar.setupWithNavController(navController)
    }

image.png

5.更改navigationBottomMent的图标字体颜色

新建一个color.xml

应用

效果

5.使用drawerLayout抽屉布局

1.将xml布局改为drawerLayout

2.添加控件NavigationView

3.activity中关联

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        drawer_nav.setupWithNavController(navController)
    }

//将两个页面都设置为顶层页面
val barConfig = AppBarConfiguration(setOf(R.id.homeFragment,R.id.searchFragment)
        ,drawer_layout)
//实现点击toolbar的菜单按钮叫出菜单
    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp(barConfig)
    }

image.png