我要评论
文章目录
代码地址 :
- csdn ( 本博客代码快照 | 推荐下载 0 积分 ) :
- github ( 可能已经覆盖 ) : https://github.com/han1202012/navigation
一、为 navigation graph 添加跳转动画
1、进入 navigation graph 配置的 design 模式
打开 " res/navigation " 下的 navigation graph 的 xml 配置文件 ,
进入 design 编辑模式 ,
2、选中 action 跳转
选中一个 代表 fragment 页面跳转 action 对应的箭头 , 选中后 , 该箭头变为蓝色 , 右侧可以查看该 跳转 action 的属性 ,
在基础属性中 , 可以看到 该跳转 action 的 id 为 " action_fragmenta_to_fragmentb " ,
跳转的目的页面为 fragmentb 页面 ;
点击 animations 属性左侧的三角箭头 , 可以展开 animations 动画相关的属性 ,
其中 enteranim 是进入动画 , exitanim 是退出动画 , 这两个动画选项后面都有一个 " pick a resource " 按钮 ;
3、为 action 跳转设置 enteranim 进入动画
点击 enteranim 进入动画 后的 " pick a resource " 按钮 , 可以在下面的 " pick a resource " 对话框中选择对应的动画 ;
enteranim 进入动画 , 可以选择 nav_default_enter_anim 动画 ;
设置完毕后 , action_fragmenta_to_fragmentb 跳转 action 增加了一个属性 app:enteranim="@anim/nav_default_enter_anim" ;
<fragment
android:id="@+id/fragmenta"
android:name="kim.hsl.nav.fragmenta"
android:label="fragment_a"
tools:layout="@layout/fragment_a" >
<action
android:id="@+id/action_fragmenta_to_fragmentb"
app:destination="@id/fragmentb"
app:enteranim="@anim/nav_default_enter_anim" />
</fragment>
4、为 action 跳转设置 exitanim 退出动画
点击 exitanim 退出动画 后的 " pick a resource " 按钮 , 可以在下面的 " pick a resource " 对话框中选择对应的动画 ,
设置 系统自带的 默认退出动画 nav_default_exit_anim 为退出动画 ;
最终的 fragmenta 的页面配置如下 , 关键关注 action 跳转动作中的 app:enteranim 进入动画属性 和 app:exitanim 退出动画属性 ;
<fragment
android:id="@+id/fragmenta"
android:name="kim.hsl.nav.fragmenta"
android:label="fragment_a"
tools:layout="@layout/fragment_a" >
<action
android:id="@+id/action_fragmenta_to_fragmentb"
app:destination="@id/fragmentb"
app:enteranim="@anim/nav_default_enter_anim"
app:exitanim="@anim/nav_default_exit_anim" />
</fragment>
上述设置了 两个属性后 , 在跳转时 , 才能有 进入 / 退出 页面跳转动画 ;
app:enteranim="@anim/nav_default_enter_anim"
app:exitanim="@anim/nav_default_exit_anim"
5、通过代码为 action 跳转设置进入 / 退出动画
在设置了 fragmenta 的 action_fragmenta_to_fragmentb 跳转动作 action 的 进入 和 退出 动画后 , 代码变为如下样式 :
<?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/navigation_graph"
app:startdestination="@id/fragmenta">
<fragment
android:id="@+id/fragmenta"
android:name="kim.hsl.nav.fragmenta"
android:label="fragment_a"
tools:layout="@layout/fragment_a" >
<action
android:id="@+id/action_fragmenta_to_fragmentb"
app:destination="@id/fragmentb"
app:enteranim="@anim/nav_default_enter_anim"
app:exitanim="@anim/nav_default_exit_anim" />
</fragment>
<fragment
android:id="@+id/fragmentb"
android:name="kim.hsl.nav.fragmentb"
android:label="fragment_b"
tools:layout="@layout/fragment_b" >
<action
android:id="@+id/action_fragmentb_to_fragmenta"
app:destination="@id/fragmenta" />
</fragment>
</navigation>
进入动画 , 就是在 action 中添加
app:enteranim="@anim/nav_default_enter_anim"
属性 , 退出动画 , 就是在 action 中添加
app:exitanim="@anim/nav_default_exit_anim"
属性 ;
现在要为 fragmentb 的 action_fragmentb_to_fragmenta 跳转动作 action 添加跳转动画 , 直接添加这两种属性即可 ;
app:enteranim="@anim/nav_default_enter_anim"
app:exitanim="@anim/nav_default_exit_anim"
最终修改完成后的代码为 :
<?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/navigation_graph"
app:startdestination="@id/fragmenta">
<fragment
android:id="@+id/fragmenta"
android:name="kim.hsl.nav.fragmenta"
android:label="fragment_a"
tools:layout="@layout/fragment_a" >
<action
android:id="@+id/action_fragmenta_to_fragmentb"
app:destination="@id/fragmentb"
app:enteranim="@anim/nav_default_enter_anim"
app:exitanim="@anim/nav_default_exit_anim" />
</fragment>
<fragment
android:id="@+id/fragmentb"
android:name="kim.hsl.nav.fragmentb"
android:label="fragment_b"
tools:layout="@layout/fragment_b" >
<action
android:id="@+id/action_fragmentb_to_fragmenta"
app:destination="@id/fragmenta"
app:enteranim="@anim/nav_default_enter_anim"
app:exitanim="@anim/nav_default_exit_anim" />
</fragment>
</navigation>
进入 design 模式 , 选中 fragmentb 跳转到 fragmenta 的 箭头 , 也就是跳转动作 action , 可以看到 animations 属性已经设置了 进入 / 退出 跳转动画 ;
6、执行效果
代码地址 :
- csdn ( 本博客代码快照 | 推荐下载 0 积分 ) :
- github ( 可能已经覆盖 ) : https://github.com/han1202012/navigation
发表评论