导航库 Navigation 小结

在 Google I/O 2018 上新出现了一个导航组件(Navigation Architecture Component),导航组件类似iOS开发里的StoryBoard,可以可视化的编辑App页面的导航关系。在经过两天的学习后,将心得总结在这里。

还没有看过官方资料的童鞋看这里:
官方文档:The Navigation Architecture Component
官方教程:Navigation Codelab

导航(Navigation)规则

  1. App需要有确定的起始点
  2. 使用一个栈来代表App的导航状态
  3. 向上按钮从不会退出你的App
  4. 在App任务中向上和返回按钮是等价的
  5. 深度链接到目标或导航到相同的目标应产生相同的堆栈

使用

  • 导航是为单Activity多Fragment的应用设计的
  • 导航似乎不能解决数据返回的问题

安装Android Studio最新的预览版 3.2 canary 14

app build.gradle中添加依赖:

    implementation "android.arch.navigation:navigation-fragment-ktx:$nav_version"
    implementation "android.arch.navigation:navigation-fragment:$nav_version" // use -ktx for Kotlin
    implementation "android.arch.navigation:navigation-ui:$nav_version" 
    implementation "android.arch.navigation:navigation-ui-ktx:$nav_version" // use -ktx for Kotlin

添加导航图(类似iOS开发中的StoryBoard):

  • 右击res目录,选择New > Android resource file
  • New Resource对话中输入文件名nav_graph,选择Resource typeNavigation
    点击OK后IDE会在navigation目录下生成nav_graph.xml文件:



导航库 Navigation 小结_第1张图片
导航图编辑器

在Activity布局中指定Navigation的宿主(Host):

?xml version="1.0" encoding="utf-8"?>


    


其中,fragment的name一定要是androidx.navigation.fragment.NavHostFragmentapp:navGraph输入刚刚生成的导航图位置

覆写onSupportNavigateUp()方法:

@Override
public boolean onSupportNavigateUp() {
    return Navigation.findNavController(this, R.id.nav_host_fragment).navigateUp();
}

添加导航的起始位置和目的位置:

打开导航图编辑器,点击新增按钮,可以新建一个空白目的地或者选择已有的Fragment或者Activity,完成后页面的预览图就会显示在编辑器里,同时IDE会给它指定默认的id等属性。点击Fragment右边的手柄不放开,将它拖动到另一个页面,一个操作(Action)就创建好了,IDE会给它分配一个默认的action id。在起始Fragment上点击右键,选择Set Start Destination,将它设置为起始位置,当宿主(Host)Activity启动的时候,它会做为默认的页面替换布局中的NavHostFragment

导航图新增目的地默认是新增Fragment,可以指定启动模式,可以指定切换动画、可以指定参数及其类型。点击箭头可以更改这些参数。也通过使用安全类型插件来生成对应的代码来保证参数类型安全:
project gradle:

buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha01'
    }
}

app gradle:

apply plugin: 'androidx.navigation.safeargs'

导航到目的地

使用NavController
来发起页面跳转,可以通过以下方法获取NavController:

  • NavHostFragment.findNavController(Fragment)
  • Navigation.findNavController(Activity, @IdRes int viewId)
  • Navigation.findNavController(View)

获取到NavController后,就可以通过它的navigate()方法发起页面跳转,navigate()接受action id 或 fragment id 以及导航选项及Bundle参数等作为参数。

创建导航选项:

val options = NavOptions.Builder()
    .setEnterAnim(R.anim.slide_in_right)
    .setExitAnim(R.anim.slide_out_left)
    .setPopEnterAnim(R.anim.slide_in_left)
    .setPopExitAnim(R.anim.slide_out_right)
    .build()

通过指定的action来跳转页面:

Navigation.findNavController(view).navigate(R.id.viewTransactionsAction);

同一个导航图里可以有多个相同id的action。

创建一个跳转的OnClickListener:

button.setOnClickListener(Navigation.createNavigateOnClickListener(R.id.next_fragment, null));

绑定目的跳转和 Menu Item

要快捷的绑定Menu Item跳转和指定的页面,要保证目的地fragment id 和 item id 一致

// 导航图中的目的地

// 目录项

// 溢出菜单目录项

绑定NavigationView跳转

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
NavigationUI.setupWithNavController(navigationView, navController); 

其中navigationView 可以是NavigationView、BottomNavigationView等

绑定Menu Item跳转:

override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // Have the NavHelper look for an action or destination matching the menu
        // item id and navigate there if found.
        // Otherwise, bubble up to the parent.
        return NavigationUI.onNavDestinationSelected(item,
                Navigation.findNavController(this, R.id.my_nav_host_fragment))
                || super.onOptionsItemSelected(item)
}

在目的地之前传输数据

先在导航图中创建要接收参数,然后在代码中用Bundle传数据:

Bundle bundle = new Bundle();
bundle.putString("amount", amount);
Navigation.findNavController(view).navigate(R.id.confirmationAction, bundle);

获取参数:

TextView tv = view.findViewById(R.id.textViewAmount);
tv.setText(getArguments().getString("amount"));

使用类型安全插件传送参数,这里假设你要从叫SpecifyAmountFragment跳转ConfirmationFragment并传送数据,同时跳转的action id为confirmationAction:

@Override
public void onClick(View view) {
   EditText amountTv = (EditText) getView().findViewById(R.id.editTextAmount);
   int amount = Integer.parseInt(amountTv.getText().toString());
   ConfirmationAction action =
           SpecifyAmountFragmentDirections.confirmationAction()
   action.setAmount(amount)
   Navigation.findNavController(view).navigate(action);
}

获取参数:

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    TextView tv = view.findViewById(R.id.textViewAmount);
    int amount = ConfirmationFragmentArgs.fromBundle(getArguments()).getAmount();
    tv.setText(amount + "")
}

将目的地组合到一个嵌套的导航图中

按住Shift点击多个目的地,在他们上面点击右键,选择Move to Nested Graph > New Graph

为目标分配深层链接

在导航图编辑器中选中目的地后在Attributes编辑器中添加,或者在xml文件中对应Fragment下添加:


你可能感兴趣的:(导航库 Navigation 小结)