Navigation
Navigation的主要元素
- Navigation Graph是一种新型的XML资源文件，其中包含应用程序所有的页面，以及页面间的关系
- NavHostFragment 是一个特殊的Fragment，可以认为它是其他Fragment的“容器”，Navigation Graph中的Fragment正是通过NavHostFragment进行展示的
- NavController 用于在代码中完成Navigation Graph中具体的页面切换工作
当需要切换Fragment时，使用NavController对象，告诉想要去Navigation Graph中的哪个Fragment，NavController会将你想去的Fragment展示在NavHostFragment中
Navigation功能
主要有以下功能
- 可视化页面导航图
- 通过destination和action完成页面间的导航
- 方便添加页面切换动画
- 页面间类型安全的参数传递
- 通过NavigationUI类，对菜单、底部导航、抽屉菜单导航进行统一的管理
- 支持深层链接DeepLink
添加依赖
implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha01'
创建Navigation Graph
选中res目录，右键 -> New -> Android Resource File
image-20211217161402849.png
在弹出的界面中，填入文件名称，类型和目录名称
image-20211217161527198.png
如下，创建完成后，会出现下面的目录和文件
image-20211217161636487.png
打开nav_graph.xml文件，点击Split，这样可以同时看见代码和效果，当然现在什么都没有
image-20211217162312552.png
添加NavHostFragment
在Activity对应的布局文件中，添加NavHostFragment，例如下面的示例
activity_navigation.xml
<?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=".navigation.NavigationActivity">
<fragment
android:id="@+id/main_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
app:defaultNavHost属性为true，则该Fragment会自动处理系统返回键。即当用户按下手机的返回按钮时，系统能自动将当前所展示的Fragment退出
app:navGraph属性用于设置该Fragment对应的导航图
Fragment间的切换
创建两个Fragment
FirstFragment
class FirstFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_first, container, false)
}
}
SecondFragment
class SecondFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_second, container, false)
}
}
将Fragment添加到nav_graph.xml
如下，打开nav_graph.xml，点击右侧的”+“号图标，将 fragment_first 和 fragment_second 添加进去
image-20211217163551812.png
在右侧选中firstFragment，连线到secondFragment
image-20211217163914709.png
这时nav_graph.xml会自动生成如下代码，也可以直接编辑nav_graph.xml文件，不使用图形化工具
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/nav_graph"
app:startDestination="@id/firstFragment">
<fragment
android:id="@+id/firstFragment"
android:name="com.example.jetpack.navigation.fragment.FirstFragment"
android:label="fragment_first"
tools:layout="@layout/fragment_first" >
<action
android:id="@+id/action_firstFragment_to_secondFragment"
app:destination="@id/secondFragment" />
</fragment>
<fragment
android:id="@+id/secondFragment"
android:name="com.example.jetpack.navigation.fragment.SecondFragment"
android:label="fragment_second"
tools:layout="@layout/fragment_second" />
</navigation>
navigation标签下的startDestination属性，指定起始destination为firstFragment，即NavHostFragment容器首先展示的Fragment
第一个fragment中action标签的app:destination属性表示它的目的地是secondFragment，NavControIIer使用这个action标签的id就能完成导航
使用NavControIIer完成导航
修改FirstFragment
class FirstFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_first, container, false)
}
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
toSecondFragment.setOnClickListener {
// 跳转到SecondFragment
Navigation.findNavController(it).navigate(R.id.action_firstFragment_to_secondFragment)
}
}
}
添加页面切换动画效果
同样选择Android Resource File
image-20211217165333467.png
输入动画文件名称，类型，文件更标签，文件目录，点击OK
image-20211217165458606.png
点击OK后会生成如下目录和文件
image-20211217165621816.png
编辑Fragment退出动画的文件 exit_to_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate
android:duration="200"
android:fromXDelta="0%p"
android:toXDelta="-100%p" />
</set>
编辑Fragment进入动画的文件 enter_from_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate
android:duration="200"
android:fromXDelta="100%p"
android:toXDelta="0%p" />
</set>
在 nav_graph.xml 文件中设置动画
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/nav_graph"
app:startDestination="@id/firstFragment">
<fragment
android:id="@+id/firstFragment"
android:name="com.example.jetpack.navigation.fragment.FirstFragment"
android:label="fragment_first"
tools:layout="@layout/fragment_first">
<action
android:id="@+id/action_firstFragment_to_secondFragment"
app:destination="@id/secondFragment"
app:enterAnim="@anim/enter_from_right"
app:exitAnim="@anim/exit_to_left" />
</fragment>
......
</navigation>
app:exitAnim属性设置Fragment退出动画
app:enterAnim属性设置Fragment进入动画
也可以点击Design视图，在中间选中firstFragment，双击右侧Actions下的secondFragment，在弹出的面板中，设置动画。事实上，action也可以在右侧的属性面板中设置
image-20211217170923154.png
使用safe args插件传递参数
应用插件
在项目根目录下的build.gradle添加
buildscript {
repositories {
google()
mavenCentral()
}
dependencies {
......
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.3.5"
}
}
在app/build.gradle添加
plugins {
......
id 'androidx.navigation.safeargs'
}
创建可传递对象
创建一个子能够以对象User，或者使用基本类型
@Parcelize
data class User(var name: String, var age: Int) : Parcelable
在nav_graph.xml 的 Design界面添加参数
image-20211217175436614.png
也可以在nav_graph.xml文件中直接添加argument标签
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/nav_graph"
app:startDestination="@id/firstFragment">
......
<fragment
android:id="@+id/secondFragment"
android:name="com.example.jetpack.navigation.fragment.SecondFragment"
android:label="fragment_second"
tools:layout="@layout/fragment_second" >
<argument
android:name="user"
app:argType="com.example.jetpack.navigation.model.User" />
</fragment>
</navigation>
传递接收参数
传递参数
修改FirstFragment
class FirstFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_first, container, false)
}
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
toSecondFragment.setOnClickListener {
// 带上参数，跳转到SecondFragment
val action =
FirstFragmentDirections.actionFirstFragmentToSecondFragment(User("Tony", 34))
Navigation.findNavController(it).navigate(action)
}
}
}
接收参数
修改 SecondFragment
class SecondFragment : Fragment() {
private val args: SecondFragmentArgs by navArgs()
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_second, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
textview.text = args.user.toString()
}
}
NavigationUI
通过NavController便可以完成页面的切换工作，App bar中的各种按钮和菜单，同样承担着页面切换的工作。例如，当ActionBar左边的返回按钮被单击时，我们需要响应该事件，返回到上一个页面，为了方便管理，引入了NavigationUI组件，使App bar中的按钮和菜单能够与导航图中的页面关联起来
例如：FirstFragment的ActionBar右边有一个按钮，通过该按钮，可以跳转到SecondFragment，而在SecondFragment的ActionBar左侧有一个返回按钮，通过该按钮，可以返回MainFragment
跳转到SecondFragment
选中res，右键 -> New -> Android Resource File
image-20211217202634402.png
输入文件名，选择文件类型，文件目录
image-20211217202751831.png
点击OK，会生成如下目录文件
image-20211217202858488.png
在first_fragment_menu.xml中编辑如下
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/secondFragment"
android:title="到SecondFragment"
app:showAsAction="never" />
</menu>
注意：上面item标签的id属性必须和nav_graph.xml中SecondFragment对应的id一致，否则无法跳转
修改NavigationActivity
class NavigationActivity : AppCompatActivity() {
private lateinit var navController: NavController
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_navigation)
navController = Navigation.findNavController(root)
}
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.first_fragment_menu, menu)
return super.onCreateOptionsMenu(menu)
}
/**
* 控制App Bar右侧的菜单项直接跳转
* @param item MenuItem
* @return Boolean
*/
override fun onOptionsItemSelected(item: MenuItem): Boolean {
return NavigationUI.onNavDestinationSelected(
item,
navController
) or super.onOptionsItemSelected(item)
}
}
但我没有找到这种方法跳转到SecondFragment的时候，怎么传递数据
返回FirstFragment
修改NavigationActivity
class NavigationActivity : AppCompatActivity() {
private val appBarConfiguration: AppBarConfiguration by lazy {
AppBarConfiguration(navController.graph)
}
private val navController: NavController by lazy {
Navigation.findNavController(this, R.id.main_fragment)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_navigation)
// AppBarConfiguration用于App bar的配置，NavController用于页面的导航和切换
// 将App bar和NavController绑定起来，如果没有这句，SecondFragment的App Bar左边不会有返回按钮
NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration)
}
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.first_fragment_menu, menu)
return super.onCreateOptionsMenu(menu)
}
/**
* 控制App Bar右侧的菜单项直接跳转
* @param item MenuItem
* @return Boolean
*/
override fun onOptionsItemSelected(item: MenuItem): Boolean {
return NavigationUI.onNavDestinationSelected(
item,
navController
) or super.onOptionsItemSelected(item)
}
/**
* 当我们在SecondFragment中单击App Bar左边的返回按钮时
* NavigationUI可以帮助我们从SecondFragment回到FirstFragment
* @return Boolean
*/
override fun onSupportNavigateUp(): Boolean {
return NavigationUI.navigateUp(
navController,
appBarConfiguration
) or super.onSupportNavigateUp()
}
}
注意：App bar是在 Activity中进行管理的。当你从FirstFragment跳转到SecondFragment时，需要在SecondFragment中覆盖onCreateOptionsMenu()方法，并在该方法中清除MainFragment所对应的menu，否则SecondFragment的App Bar 右上角也有个“到SecondFragment”的菜单
SecondFragment
class SecondFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_second, container, false)
}
override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
menu.clear()
super.onCreateOptionsMenu(menu, inflater)
}
}
深层链接DeepLink
常见的两种应用场景如下
- PendingIntent的方式：当应用程序接收到某个通知推送，你希望用户在单击该通知时，能够直接跳转到展示该通知内容的页面，那么可以通过PendingIntent来完成此操作
- URL的方式：当用户通过手机浏览器浏览网站上的某个页面时，可以在网页上放置一个类似于“在应用内打开”的按钮。如果用户的手机安装有我们的应用程序，那么通过DeepLink就能打开相应的页面；如果没有安装，那么网站可以导航到应用程序的下载页面，从而引导用户安装应用程序
PendingIntent的方式
在FirstFragment发送一条向SecondFragment的深度链接的通知，点击通知就跳转到SecondFragment
修改FirstFragment如下
class FirstFragment : Fragment() {
private val channelId = "normal"
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_first, container, false)
}
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
toSecondFragment.setOnClickListener {
// 带上参数，跳转到SecondFragment
val action =
FirstFragmentDirections.actionFirstFragmentToSecondFragment(User("Tony", 23))
Navigation.findNavController(it).navigate(action)
}
// 深度链接的测试
sendNotification.setOnClickListener {
val notificationManager =
activity?.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
// NotificationChannel类和createNotificationChannel()方法都是Android 8.0系统中新增的API
createNotificationChannel(notificationManager)
val notification = getNotification()
//让通知显示出来
notificationManager.notify(23, notification)
}
}
/**
* 创建通知渠道
* @param notificationManager NotificationManager
*/
private fun createNotificationChannel(notificationManager: NotificationManager) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
// 创建通知渠道
val notificationChannel =
NotificationChannel(
channelId,
"Normal",
NotificationManager.IMPORTANCE_DEFAULT
)
notificationManager.createNotificationChannel(notificationChannel)
}
}
private fun getNotification(): Notification? {
//第一个参数是context，第二个参数是渠道ID，需要和我们在创建通知渠道时指定的渠道ID相匹配
return NotificationCompat.Builder(requireActivity().applicationContext, channelId).apply {
// 点击跳转后，取消通知的显示
setAutoCancel(true)
// 设置 PendingIntent，点击通知会执行 PendingIntent 里面的 Intent 的意图
setContentIntent(getPendingIntent())
// 配置通知的标题、正文内容、图标
setContentTitle("深层链接DeepLink")
setContentText("this is content text this is content text")
// 小图标会显示在系统状态栏上，只能使用纯alpha图层的图片(.png)进行设置，否则只是一块灰色区域
setSmallIcon(R.drawable.ic_launcher_background)
// 当下拉系统状态栏时，就可以看到设置的大图标
setLargeIcon(BitmapFactory.decodeResource(resources, R.drawable.ic_launcher_foreground))
}.build()
}
/**
* 获取深度链接的PendingIntent
*/
private fun getPendingIntent(): PendingIntent {
val bundle = Bundle().apply {
putParcelable("user", User("Jack", 45))
}
// 跳转到secondFragment的意图
return Navigation.findNavController(requireActivity(), R.id.sendNotification)
.createDeepLink()
.setGraph(R.navigation.nav_graph)
.setDestination(R.id.secondFragment)
.setArguments(bundle)
.createPendingIntent()
}
}
URL的方式
在导航图中为页面添加<deepLink/>标签。在app:uri属性中填入的是你的网站的相应Web页面地址，后面的参数会通过Bundle对象传递到页面中
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/nav_graph"
app:startDestination="@id/firstFragment">
......
<fragment
android:id="@+id/secondFragment"
android:name="com.example.jetpack.navigation.fragment.SecondFragment"
android:label="fragment_second"
tools:layout="@layout/fragment_second">
<argument
android:name="user"
app:argType="com.example.jetpack.navigation.model.User" />
<deepLink app:uri="http://192.168.104.2/{params}" />
</fragment>
</navigation>
为Activity设置<nav-graph/>标签。当用户在Web页面中访问你的网站时，应用程序便能得到监听
......
<activity
android:name=".navigation.NavigationActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<nav-graph android:value="@navigation/nav_graph" />
</activity>
......
使用adb测试
adb shell am start -a android.intent.action.VIEW -d "http://192.168.104.2/a.json"
注意
- 如果deepLink标签中带了{params}，那么对应的测试命令中就要带a.json或者类似的路径
- 如果在AndroidManifest.xml中配置了nav-graph 标签，再使用Android Studio 新建其他组件，会报如下错误
Failed to query the value of property 'namespace'.
org.xml.sax.SAXParseException; systemId: file:/E:/AndroidStudioProject/Jetpack/app/src/main/AndroidManifest.xml; lineNumber: 1; columnNumber: 2; 文档中根元素前面的标记必须格式正确。
文档中根元素前面的标记必须格式正确。
如下，我在AndroidManifest.xml中配置了nav-graph 标签
image-20211218131547534.png
再新建Service
image-20211218131633059.png
image-20211218131650769.png
如下图，新建后会出现此问题
image-20211218131726101.png
而注释掉nav-graph 标签，再次新建，则不会有此问题，猜测应该是Android Studio 工具的问题，我的版本是
image-20211218131858388.png
