初步了解Android Navigation(附源码)

最近在准备向同事分享Android Studio 3.2的更新内容,看到了Navigation组件,挺有意思,便写一个Demo。

Navigation大概的功能是更方便地实现了各个组件的跳转。下面是实现跳转的Demo。


demo

源码:GitHub地址


主要的实践有以下步骤:

  • 开启Navigation编辑器
  • 添加Navigation引用
  • 创建Fragment或Activity的layout
  • 创建Navigation Resource File并生成跳转的Action
  • 应用Navigation Resource File到Activity
  • 使用跳转Action实现跳转

  • 开启Navigation编辑器

由于Navigation组件目前是测试版本,所以让AS支持Navigation的编辑还需要在设置里开启编辑器。如下


开启Navigation编辑器
  • 添加Navigation引用

之后,在app模块对应的build.gradle里加入引用

dependencies {
    def nav_version = "1.0.0-alpha06"
    implementation "android.arch.navigation:navigation-fragment:$nav_version"
    // use -ktx for Kotlin
    implementation "android.arch.navigation:navigation-ui:$nav_version"
    // use -ktx for Kotlin
    // optional - Test helpers
    androidTestImplementation "android.arch.navigation:navigation-testing:$nav_version"
    // use -ktx for Kotlin
}

开启编辑器且加入引用后,需要重启AS。

  • 创建Fragment或Activity的layout

按需要创建若干个Fragment,每个Fragment的layout要加上tools:context属性,值为这个layout对应Fragment或Activity类。


FragmentOne对应的layout加入tools:context属性

我们知道,tools命名空间是用来在开发时给IDE作预览和编辑用的,这里对layout加入tools:context的属性便是让Android Studio知道这一个layout是对应哪一个Fragment或Activity,随后Android Studio的Navigation编辑器才能根据这些属性加载出各个界面给我们做视图化的操作。

  • 创建Navigation Resource File并生成跳转的Action

新建一个安卓资源文件
选择navigation类型文件并填入文件名

随后便是进入视图化的编辑操作了。


编辑器视图

上面的编辑器,各处意义如下:

  • 1处为增加界面
  • 2处便是界面的列表(我们加了tools:context属性的layout将会出现在这个列表里)
  • 3处便是我们已经添加进来的界面
  • 4处。当我们通过拖拽实现两个界面的连线后就会产生一条线,这条线叫action,即从A界面跳转到B界面的行为,4-8处便是action的一些属性。
  • 5处是action在实现界面跳转时的过渡动画设置
  • 6处跳转时传送的参数值
  • 7处看起来是组件栈pop的行为,但具体含义还没深究
  • 8处便是Fragment或Activity的启动模式,比如single top或single task之类的,请自行了解

在编辑器中,我们对界面进行拖拉,和ConstraintLayout类似,编辑器会出现一些线实现对两个界面的连接,这些线叫Action,它表示界面的跳转关系

<fragment
    android:id="@+id/fragmentOne"
    android:name="com.example.leslie.navigationdemo.FragmentOne"
    android:label="fragment_one"
    tools:layout="@layout/fragment_one">
    <!--从fragmentOne拖线到fragmentTwo,文件会生成下面的action,有id,destinationt和各种过渡动画-->
    <action
        android:id="@+id/action_fragmentOne_to_fragmentTwo"
        app:destination="@id/fragmentTwo"
        app:enterAnim="@anim/push_left_in"
        app:exitAnim="@anim/push_left_out" />
</fragment>
  • 应用Navigation Resource File到Activity

现在我们做好了界面的跳转编辑,应该有一个入口来存放这一套跳转动作。在这里,我们用一个MainActivity里的一个fragment作为Navigation的入口。

<?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=".MainActivity">

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment" 
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_one" />

</androidx.constraintlayout.widget.ConstraintLayout>

其中:

  • androidx.navigation.fragment.NavHostFragment便是Navigation组件里的作为host的Fragment类,它可以作为Navigation文件的入口。

  • app:defaultNavHost="true",可设置为默认的NavHost

  • app:navGraph="@navigation/nav_one"中nav_one便是我们刚刚编辑好的Navigation Resource File

  • 使用跳转Action实现跳转

通过上面的配置,打开MainActivity后,界面将会显示fragmentOne的layout(因为fragmentOne作为nav_one的出发点,而我们在MainActivity上放置了nav_one的入口fragment)。


MainActivity显示了fragmentOne的内容

随后,我们希望点击按钮跳转到FragmentTwo,这里就用到了刚刚生成的action了,FragmentOne里跳转按钮的响应代码如下。

view.findViewById(R.id.btn_go_to_fragment_two).setOnClickListener(v -> {
            Navigation.findNavController(v).navigate(R.id.action_fragmentOne_to_fragmentTwo);
});

核心其实就这一句代码:

Navigation.findNavController(v).navigate(R.id.action_fragmentOne_to_fragmentTwo);

R.id.action_fragmentOne_to_fragmentTwo便是我们生成的Navigation Action的ID。


fragmentOne跳转到framentTwo

可以看到,我们在action中加入的过渡动画也同样实现了。

值得一提的是,navigation在跳转时,除了支持Fragment之间的跳转,Fragment到Activity的跳转也是可以的,但Activity到Activity、Activity到Fragment从机制上并不支持。


注:标题看起来很鸡贼,原来打算规规矩矩地叫「Android Navigation组件的入门与Demo」。前期争取阅读量需要,请谅解。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容