在 Google I/O 2018 上新出现了一个导航组件(Navigation Architecture Component),导航组件类似iOS开发里的StoryBoard,可以可视化的编辑App页面的导航关系。在经过两天的学习后,将心得总结在这里。
还没有看过官方资料的童鞋看这里:
官方文档:The Navigation Architecture Component
官方教程:Navigation Codelab
导航(Navigation)规则
- App需要有确定的起始点
- 使用一个栈来代表App的导航状态
- 向上按钮从不会退出你的App
- 在App任务中向上和返回按钮是等价的
- 深度链接到目标或导航到相同的目标应产生相同的堆栈
使用
- 导航是为单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 type为Navigation
点击OK后IDE会在navigation
目录下生成nav_graph.xml
文件:
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android">
</navigation>
在Activity布局中指定Navigation的宿主(Host):
?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/my_nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/nav_graph"
app:defaultNavHost="true"
/>
</android.support.constraint.ConstraintLayout>
其中,fragment的name一定要是androidx.navigation.fragment.NavHostFragment
,app: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 一致
// 导航图中的目的地
<fragment android:id="@+id/details_page_fragment"
android:label="@string/details"
android:name="com.example.android.myapp.DetailsFragment" />
// 目录项
<item
android:id="@id/details_page_fragment"
android:icon="@drawable/ic_details"
android:title="@string/details" />
// 溢出菜单目录项
<item
android:id="@id/details_page_fragment"
android:icon="@drawable/ic_details"
android:title="@string/details"
android:menuCategory:"secondary" />
绑定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下添加:
<deepLink app:uri="https://cashdog.com/sendmoney"/>