草庐IT

Jetpack第七篇:Navigation 组件

AxeChen 2023-03-28 原文

Navigation是一个路由组件,是一个优秀的Fragment管理工具,同样也可以管理Activity。开发者可以将重点放在业务开发上,避免处理太多了Fragment管理代码和调用代码,从而加速业务开发效率。

1、Navigation的组成

导航图

这个是在Android的资源文件路径下的navigation的文件夹下的资源文件,在这个资源文件中能够配置Fragment、Activity已经跳转动作action等等。

NavHost

这个是显示页面的空白容器,默认为NavHostFragment,可以理解为所有的Fragment都依靠它来显示。

NavController

NavHost中的管理对象,可以通过Controller对象去跳转Fragment和回退栈。也可以用于绑定NavigationBar等操作。

资源

这里说的就是Fragment、Activity等布局资源了,如果和BottomNavigationView绑定还需要menu资源等等。

2、实现一个简单的Navigation

实现一个非常简单的Navigation用法Demo,这里先展示一个Fragment,然后在FragmentA中有一个按钮,点击进入FragmentB。我们根据前面所说的几个部分一个个添加进入

1、导入依赖

    def nav_version = "2.3.0"
    implementation "androidx.navigation:navigation-fragment:$nav_version"
    implementation "androidx.navigation:navigation-ui:$nav_version"

2、添加导航图
在res下新建navigation资源文件,并且新建一个nav.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"
    app:startDestination="@id/fmt_a"
    android:id="@+id/nav">

    <fragment
        android:id="@+id/fmt_a"
        android:name="com.mg.axechen.libnavigation.fragment.FragmentA"
        app:layout="@layout/fragment_a"
        android:label="FramentA" >

        <action android:id="@+id/action_fmta_to_fmtb"
            app:destination="@id/fmt_b"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim"/>

    </fragment>

    <fragment
        android:id="@+id/fmt_b"
        android:name="com.mg.axechen.libnavigation.fragment.FragmentB"
        app:layout="@layout/fragment_b"
        android:label="FragmentB" />


</navigation>

注意:这里的navigation 一定要添加一个初始的Fragment,app:startDestination="@id/fmt_a" 否则会出现异常:

     Caused by: android.view.InflateException: Binary XML file line #14 in com.mg.axechen.libnavigation:layout/activity_test: Error inflating class fragment
     Caused by: java.lang.IllegalStateException: no start destination defined via app:startDestination for com.mg.axechen.libnavigation:id/nav

这里对里面的这些配置做下说明:

    <fragment
        android:id="@+id/fmt_a"   // 指定Fragment的Id
        android:name="com.mg.axechen.libnavigation.fragment.FragmentA" // 指定是哪个Fragment
        app:layout="@layout/fragment_a" // 指定Fragment的资源文件
        android:label="FramentA" >

        <action android:id="@+id/action_fmta_to_fmtb" // action的id
            app:destination="@id/fmt_b" // 目标Fragment的id,这里指跳转
            app:enterAnim="@anim/nav_default_enter_anim"  // 默认进入动画
            app:exitAnim="@anim/nav_default_exit_anim"/> // 默认退出动画

这里面也可以配置Activity用法和Fragment一致。

3、添加NavHost

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/fmt_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="androidx.navigation.fragment.NavHostFragment"
        app:navGraph="@navigation/nav"
        app:defaultNavHost="true"
        />

</FrameLayout>

这里有几个参数:

        android:name="androidx.navigation.fragment.NavHostFragment"
        app:navGraph="@navigation/nav"
        app:defaultNavHost="true"

第一个是name,目前默认要指定NavHostFragment。
第二个是指定导航图,这里指定navigation下的nav资源文件。
第三个参数会导致Fragment的回退栈发生变化。这里后面细说。

4、添加NavController

public class TestActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        initNavigation();
    }

    private void initNavigation() {
        NavController navController = Navigation.findNavController(this, R.id.fmt_test);
    }
}

这样一来,当启动Test Activity时,TestActivity就会通过NavController显示FragmentA了。
FragmentA也可以通过NavControl去跳转到FragmentB。

public class FragmentA extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_a,container,false);

        Button test = view.findViewById(R.id.test);
        test.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Navigation.findNavController(view).navigate(R.id.action_fmta_to_fmtb);
            }
        });

        return view;
    }
}

3、和BottomNavigationView联用

这也是一个常用的用法,BottomNavigationView的使用方法这里就不多做说明了,如果需要和BottonNavigationView联用,还需要NavController做好绑定关系。
创建BottomNavigationView的menu时,需要将menu的id和在导航图配置的id一致:
比如:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- item的id必须和navigation中的资源id一致 -->
    <item android:id="@+id/fmt_a"
        android:icon="@mipmap/index"
        android:title="首页"></item>

    <item android:id="@+id/fmt_b"
        android:icon="@mipmap/cate"
        android:title="列表"></item>

    <item android:id="@+id/fmt_c"
        android:icon="@mipmap/cart"
        android:title="购物车"></item>

    <item android:id="@+id/fmt_d"
        android:icon="@mipmap/me"
        android:title="我的"></item>
</menu>

导航图:

    <!-- 资源 -->
    <fragment
        android:id="@+id/fmt_a"
        android:name="com.mg.axechen.libnavigation.fragment.FragmentA"
        tools:layout="@layout/fragment_a"
        android:label="FramentA" >

        <!--  action_now_to_target -->
        <action android:id="@+id/action_fmta_to_fmtb"
            app:destination="@id/fmt_b"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim"/>

    </fragment>

    <fragment
        android:id="@+id/fmt_b"
        android:name="com.mg.axechen.libnavigation.fragment.FragmentB"
        tools:layout="@layout/fragment_b"
        android:label="FragmentB" />

    <fragment
        android:id="@+id/fmt_c"
        android:name="com.mg.axechen.libnavigation.fragment.FragmentC"
        tools:layout="@layout/fragment_c"
        android:label="FragmentC" />

    <fragment
        android:id="@+id/fmt_d"
        android:name="com.mg.axechen.libnavigation.fragment.FragmentD"
        tools:layout="@layout/fragment_d"
        android:label="FragmentD" />
    private void initNavigation() {
        NavController navController = Navigation.findNavController(this, R.id.fmt_main);
        navController.navigate(R.id.fmt_d);

        bottomNavigationView = findViewById(R.id.btn_navigation_view);

        NavigationUI.setupWithNavController(bottomNavigationView, navController);
    }

这样就可以通过BottonNavigationView去控制Fragment的显示了。

4、defaultNavHost的使用

如果这个为true,则会将返回键交给Navigation进行管理,会覆盖Activity的回退事件,这样每次回退都会从栈中拿出上一个保存Fragment。

如果为false则不会覆盖Activity的回退事件。

这个属性可以在不同的场景中使用,假如使用BottonNavigationView+Navigation这种方式做主页,如果点击返回需要回到桌面,那可以将这个属性设置成false。

5、支持DeepLink

DeepLink实际上就是通过一种约定好的Url的方式直接定位的页面。


    <!-- 资源 -->
    <fragment
        android:id="@+id/fmt_a"
        android:name="com.mg.axechen.libnavigation.fragment.FragmentA"
        tools:layout="@layout/fragment_a"
        android:label="FramentA" >


        <deepLink app:uri="http://www.axechen.com/{params}"></deepLink>


    </fragment>

直接在fragment中配置deepLink即可,然后通过访问这个url即可直接打开这个Fragment。

6、传递参数

传递参数是通过Bundle来传递的,在接收的时候也是
Fragment通过getArguments()来接收。Activity通过Intent来接收

传参:

 Bundle bundle = new Bundle();
 bundle.putString("name","参数");

   Navigation.findNavController(getView())
                    .navigate(R.id.action_fmta_to_activity_demo,bundle);

Activity:

  String name = getIntent().getStringExtra("name");

Fragment:

 String params = getArguments().getString("name");

7、过渡动画

前面的配置中实际上已经配置了过渡动画了。动画配置在Action中。

   <action android:id="@+id/action_fmta_to_fmtb"
            app:destination="@id/fmt_b"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim"/>

enterAnim和exitAnim就是过渡动画了。

以上就是Navigation的基本用法了,实际使用起来是非常简单的。

有关Jetpack第七篇:Navigation 组件的更多相关文章

  1. ruby-on-rails - Ruby 2.3 safe navigation operator '&. and the ' 之间有什么区别试试!来自 ActiveSupport 的方法? - 2

    Ruby2.3的安全运算符&.和ActiveSupport的try!方法可以互换吗?如果不是,它们之间有什么区别? 最佳答案 一个关键的区别是try!是一个额外的方法调用,而&.不是。我能想到这造成的一个(公认的人为的)差异"1234"&.gsub(/\d/,"a")$&#=>"1234"这并不奇怪-我进行了正则表达式匹配,因此设置了正则表达式全局变量($&是匹配的字符串)。但是如果(在新的irbsession中——这很重要)我这样做"1234".try!(:gsub,/\d+/,"a")$&#=>nil然后正则表达式相关的全局变量

  2. Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信) - 2

    运行有问题或需要源码请点赞关注收藏后评论区留言一、利用ContentResolver读写联系人在实际开发中,普通App很少会开放数据接口给其他应用访问。内容组件能够派上用场的情况往往是App想要访问系统应用的通讯数据,比如查看联系人,短信,通话记录等等,以及对这些通讯数据及逆行增删改查。首先要给AndroidMaifest.xml中添加响应的权限配置 下面是往手机通讯录添加联系人信息的例子效果如下分成三个步骤先查出联系人的基本信息,然后查询联系人号码,再查询联系人邮箱代码 ContactAddActivity类packagecom.example.chapter07;importandroid

  3. ruby - 模块化、基于组件的 Sinatra 应用程序的架构 - 2

    我正在开发一个包含大约10个不同功能组件的Sinatra应用程序。我们希望能够将这些组件混合并匹配到应用程序的单独实例中,完全从config.yaml文件配置,如下所示:components:-route:'/chunky'component_type:FoodListercomponent_settings:food_type:baconmax_items:400-route:'places/paris'component_type:Mappercomponent_settings:latitude:48.85387273165654longitude:2.340087890625-

  4. ruby - 如何使用( ruby ) Rack 中间件组件设置 cookie? - 2

    我正在为需要有条件地设置cookie的Rails应用编写Rack中间件组件。我目前正在尝试设置cookie。通过谷歌搜索,这似乎应该可行:classRackAppdefinitialize(app)@app=appenddefcall(env)@status,@headers,@response=@app.call(env)@response.set_cookie("foo",{:value=>"bar",:path=>"/",:expires=>Time.now+24*60*60})[@status,@headers,@response]endend它不会给出错误,但也不会设置coo

  5. ruby-on-rails - 哪些组件使 VIM 成为一个好的(伟大的)ruby 编辑器? - 2

    我正在linux机器上学习rubyonrails并磨练我的VIM技能(skillz?)。当我在使用C++的时候开始使用VIM时,我有一个friend有一个很棒的vimfiles文件夹,里面有很多东西可以开始使用。从头开始,vim很棒,但感觉它还可以做得更好。我目前有:vim-rubybufferexplorerxml-edit(虽然我目前没有它可以处理erb文件)我知道这只是一些更有经验的vim/ruby开发人员所拥有的东西的皮毛(包括vim.rc文件中的一次性)。在某个地方是否有一个列表(或者我们可以创建一个)使ruby​​(和rails)编程更有趣所需的一堆标准vim配置?是否有一

  6. 修改第三方UI组件库样式的四种方法 - 2

    前提:当我们要修改vant组件库中Tabbar图标大小的样式(原图标是字体图标,大小由font-size控制)。  字体图标字体大小由css变量(--van-tabbar-item-icon-size)控制, 1.插槽方法结论:当你想要自定义使用插槽时,插入自己的元素,那么可以直接在当前作用域直接修改元素的样式。自定义img{height:28px}传入图片,用height属性控制图片大小,达到与字体图标相同效果2.全局定义变量结论:全局定义一个变量,覆盖它默认变量的值定义变量缺点:全局修改。 :root{--van-tabbar-item-icon-size:30px!important;/

  7. Vue学习笔记:Vue element-ui中table组件的使用----接入后端数据 - 2

    记个笔记以免遗忘,建议还是查看Element-UI提供的官方文档学习,自己摸索比较难受官方文档:Element-UI组件TableElement-UI官网提供了许多Table格式,这里以一个带有筛选器的表格为例表格的官网显示效果:直接将官方提供的示例代码贴入.vue文件中即可使用显示的数据是通过data()方法提供的假数据。方法见下:data(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1

  8. uni-app制作一个左侧导航scroll-view组件,并和页面主体展示联动 - 2

    先给大家看看最终效果首先我们来定义数据data(){ return{ lsit:[ 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic118.nipic.com%2Ffile%2F20161216%2F24271963_122609717000_2.jpg&refer=http%3A%2F%2Fpic118.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923017&t=183ece148b13b64e9dd503afd1b15c91'

  9. javascript - Reactjs:如何在安装组件之前获取要加载的数据? - 2

    有些奇怪的事情发生了,我一直在阅读React文档,他们讨论了生命周期以及如何在渲染组件之前做一些事情。我正在尝试,但我尝试的一切都失败了,总是组件首先进行渲染,然后调用componenWillMount、..didMount等。在调用这些函数之后,渲染再次发生。我需要先加载数据以填充状态,因为我不希望初始状态为null,我希望它包含自初始呈现以来的数据。我正在使用Flux和Alt,这是Action@createActions(flux)classGetDealersActions{constructor(){this.generateActions('dealerDataSuccess

  10. javascript - 为什么需要重新打开组件类来指定位置参数? - 2

    在ember中为组件类指定位置参数时,您必须重新打开该类(如下所示),这样它才能工作,您不能将它包含在初始声明中(至少从我所看到的示例和我自己的经验)。importEmberfrom'ember';constcomponent=Ember.Component.extend({});component.reopenClass({positionalParams:['post'],});exportdefaultcomponent;如果你在单个声明中这样做(如下所示)它将不起作用importEmberfrom'ember';exportdefaultEmber.Component.exte

随机推荐