前言
官网的教程真的很详细,跟着学的时候一定要下他的demo,然后他会一步一步教你怎么实现,一步一步的看效果
链接奉上:https://developer.android.com/codelabs/android-navigation?hl=zh-cn#0
组成部分
- 导航图(新 XML 资源)相当于一张地图,标记了各个目的地以及目的地的一些信息
- NavHostFragment 算一个载体,显示地图,获得控制器
- NavController 控制器,你可以利用它去你想去的地方
一、图怎么画
在res目录下创建navigation目录,然后new一个Navigation Resource File,这样你就用了自己的地图,然后就可以在上面“作画”了
- 每一个fragment都是一个目的地,也是一个页面
- 对于设计fragment的属性:可以直接用代码写入你对目的地属性的设计,也可以直接点显示图中的页面或者导航箭头进行设计(点图直接选属性,自己操作就好啦,这里就不介绍啦)
action
//切换页面以及切换页面动画的属性
//加入从A切换到B
<action
android:id="@+id/next_action"//跳到下个页面
app:destination="@id/flow_step_one_dest"//下个页面的id
app:enterAnim="@anim/slide_in_right"//从右边进来
app:exitAnim="@anim/slide_out_left"//从左边出去
app:popEnterAnim="@anim/slide_in_left" //从左进来
app:popExitAnim="@anim/slide_out_right" />//从右边出去
这四个动画,从效果上看的话,第一二指的是A页面进来的动画和B页面出去的动画
第三四则是B页面进来和A页面出去的动画
argument
<argument
android:name="flowStepNumber"//属性名称
app:argType="integer" //类型
android:defaultValue="1"/>//默认值
如果传递的数据是固定的,明确的值,可以直接写在这里;动态的下面会讲
deeplink(下面内容详细说)
<deepLink app:uri="www.example.com/{myarg}" />
二、页面怎么打开
- 使用导航图进行导航
findNavController(this).navigate(R.id.flow_step_one_dest, null, options)
- 使用操作进行导航
这种方法要在xml文件中把activon等属性写好才行
Navigation.createNavigateOnClickListener(R.id.*next_action*, null)
- 用safe arge进行导航
val flowStepNumberArg = 1
val action = HomeFragmentDirections.nextAction(flowStepNumberArg)
findNavController(this).navigate(action,options)
三、数据怎么传
这里做个总结吧,毕竟上面的内容都有体现啦
- 是直接在xml文件中,设置argument属性
- 是利用safe arge,打开页面的时候传递数据
四、系列导航栏怎么搭配的
统一的,导航栏中显示的项都是在xml文件中声明的,举一个例子就都明白了
在res目录中-创建menu文件夹-创建Menu Resource file文件,eg:
<menu xmlns:android="<http://schemas.android.com/apk/res/android>">
<item
android:id="@id/home_dest" //要跳转的页面Id
android:icon="@drawable/ic_home"//图标
android:title="@string/home" />//内容
<item
android:id="@id/deeplink_dest"
android:icon="@drawable/ic_android"
android:title="@string/deeplink" />
</menu>
- 底部导航按钮
创建布局文件
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/bottom_nav_menu" />//就是我们创建的menu文件
java文件中关联
private fun setupBottomNavMenu(navController: NavController) {
val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav_view)
bottomNav?.setupWithNavController(navController)
//navController 指的是最开始说的控制器
}
- 侧边栏(抽屉式)
布局文件
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_drawer_menu" />
java文件中设置
//跟底部导航栏思路一样,布局+设置控制器就可以实现侧边栏的跳转和侧边栏的存在,
//但是展示出来还需要有按钮,所以还需要设置acitonabar
private fun setupNavigationMenu(navController: NavController) {
val sideNavView = findViewById<NavigationView>(R.id.nav_view)
sideNavView?.setupWithNavController(navController)
}
//以下是为了让侧边栏有按钮点击可以展示出来的添加actionBar的操作
//通过传递一组顶级目的地 ID 和抽屉式导航栏布局来创建 AppBarConfiguration(可以理解为,基础信息的配置:比如显示的条目啊,要跳到哪里啊)
//DrawerLayout是根布局,具体的可以看官方demo
val drawerLayout: DrawerLayout? = findViewById(R.id.drawer_layout)
appBarConfiguration = AppBarConfiguration(
setOf(R.id.home_dest, R.id.deeplink_dest),
drawerLayout)
//设置actionBar,添加按钮的展示
private fun setupActionBar(navController: NavController,
appBarConfig : AppBarConfiguration) {
setupActionBarWithNavController(navController, appBarConfig)
}
//处理up按钮的操作
override fun onSupportNavigateUp(): Boolean {
return findNavController(R.id.my_nav_host_fragment).navigateUp(appBarConfiguration)
}
- 下拉菜单
生搬硬套,反正就是告诉你咋写就咋写吧
override fun onCreateOptionsMenu(menu: Menu): Boolean {
val retValue = super.onCreateOptionsMenu(menu)
val navigationView = findViewById<NavigationView>(R.id.nav_view)
if (navigationView == null) {
menuInflater.inflate(R.menu.overflow_menu, menu)
return true
}
return retValue
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
return super.onOptionsItemSelected(item)
return item.onNavDestinationSelected(findNavController(R.id.my_nav_host_fragment))
|| super.onOptionsItemSelected(item)
}
五、deeplink怎么实现
1、打开 mobile_navigation.xml 添加
<fragment
android:id="@+id/deeplink_dest"
android:name="com.example.android.codelabs.navigation.DeepLinkFragment"
android:label="@string/deeplink"
tools:layout="@layout/deeplink_fragment">
<argument
android:name="myarg"
android:defaultValue="Android!"/>
<deepLink app:uri="www.example.com/{myarg}" />
</fragment>
系统会将没有架构的 URI 视为 http 和 https。例如,www.example.com 将匹配 http://www.example.com 和 https://www.example.com。
您可以使用 {placeholder_name} 形式的占位符来匹配一个或多个字符。占位符的字符串值在具有相同名称的键的参数 Bundle 中提供。例如,http://www.example.com/users/{id} 将匹配 http://www.example.com/users/4。
您可以使用 .* 通配符匹配 0 个或多个字符。
2、打开AndroidManifest文件
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<nav-graph android:value="@navigation/mobile_navigation" />
</activity>
3、测试
连上手机
在as的命令行中输入
adb shell am start -a android.intent.action.VIEW -d "http://www.example.com/urlTest"