Navigation 详解二

配合 BottomNavigationView

创建 Bottom Navigation Activity

BottomNavigationView 以更简洁的方式来实现过去的 BottomNavigationBar 的样式。Android Studio 中创建一个 Bottom Navigation Activity,自动生成 Activity。

class BottomNavigationActivity : AppCompatActivity() {

    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {
                message.setText(R.string.title_home)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_dashboard -> {
                message.setText(R.string.title_dashboard)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_notifications -> {
                message.setText(R.string.title_notifications)
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_bottom_navigation)

        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
    }
}
<!-- activity_bottom_navigation.xml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".navigation.BottomNavigationActivity">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="@string/title_home"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>
<!-- menu/navigation.xml -->
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

创建 Fragment

res/navigation 文件夹右击选择 New -> Navigation resource file,创建 bottom_nav_graph.xml 文件。在 design 视图下连续 Create blank destination 三次创建三个 Fragment。

<!-- bottom_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/bottom_nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="pot.ner347.androiddemo.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/dashboardFragment"
        android:name="pot.ner347.androiddemo.DashboardFragment"
        android:label="fragment_dashboard"
        tools:layout="@layout/fragment_dashboard" />
    <fragment
        android:id="@+id/notificationFragment"
        android:name="pot.ner347.androiddemo.NotificationFragment"
        android:label="fragment_notification"
        tools:layout="@layout/fragment_notification" />
</navigation>

修改三个 Fragment 里面的 TextView,以区分三者。

BottomNavigationView 引起 Fragment 切换

bottom_nav_graph.xml 中 fragment 的 id 必须和 menu 中 item 的 id 保持一致。修改 menu/navigation.xml 中的三个 id。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@id/homeFragment"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@id/dashboardFragment"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@id/notificationFragment"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

实际发现这个 id 用 @+id 也行。

在 BottomNavigationActivity 的 xml 里添加一个 fragment

<fragment
    android:id="@+id/nav_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    app:defaultNavHost="true"
    app:navGraph="@navigation/bottom_nav_graph"
    ... />

代码关联

val navHostFragment = nav_fragment as NavHostFragment
NavigationUI.setupWithNavController(navigation, navHostFragment.navController)

遇到的一个坑:无法切换 Fragment,看源码

public static void setupWithNavController(
        @NonNull final BottomNavigationView bottomNavigationView,
        @NonNull final NavController navController) {
    bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    return onNavDestinationSelected(item, navController, true);
                }
            });
    navController.addOnNavigatedListener(new NavController.OnNavigatedListener() {
        @Override
        public void onNavigated(@NonNull NavController controller,
                @NonNull NavDestination destination) {
            Menu menu = bottomNavigationView.getMenu();
            for (int h = 0, size = menu.size(); h < size; h++) {
                MenuItem item = menu.getItem(h);
                if (matchDestination(destination, item.getItemId())) {
                    item.setChecked(true);
                }
            }
        }
    });
}

发现对 BottomNavigationView 加了切换监听去切换 Fragment,也对 Fragment 加了监听,能够自动切换 BottomNavigationView 的 item,互相监听变化。

而自动创建 Bottom Navigation Activity 时生成的代码里有一句 navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener),我又放在后面调用,相当于里面设置的监听被覆盖了,才导致无法切换。

navigation_bottomnavigationview_1.gif

Fragment 切换改变 BottomNavigationView 的 item

在 destination 上随便拖了几个 action,如下图

navigation_actions.png

生成代码多了几个 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/bottom_nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="pot.ner347.androiddemo.navigation.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" >
        <action
            android:id="@+id/action_homeFragment_to_notificationFragment"
            app:destination="@id/notificationFragment" />
        <action
            android:id="@+id/action_homeFragment_to_dashboardFragment"
            app:destination="@id/dashboardFragment" />
    </fragment>
    <fragment
        android:id="@+id/dashboardFragment"
        android:name="pot.ner347.androiddemo.navigation.DashboardFragment"
        android:label="fragment_dashboard"
        tools:layout="@layout/fragment_dashboard" >
        <action
            android:id="@+id/action_dashboardFragment_to_notificationFragment"
            app:destination="@id/notificationFragment" />
    </fragment>
    <fragment
        android:id="@+id/notificationFragment"
        android:name="pot.ner347.androiddemo.navigation.NotificationFragment"
        android:label="fragment_notification"
        tools:layout="@layout/fragment_notification" />
</navigation>

然后修改 Fragment 的代码:

<!-- fragment_home.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".navigation.HomeFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="home_fragment" />

    <Button
        android:id="@+id/homeToDashboard"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="to dashboard"/>

    <Button
        android:id="@+id/homeToNotification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="to notification"/>
</LinearLayout>
class HomeFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_home, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        homeToDashboard.onClick {
            NavHostFragment.findNavController(this@HomeFragment) // NavHostFragment 方式获取 NavController
                    .navigate(R.id.dashboardFragment) // 根据 fragment 的 id 跳转
        }
        homeToNotification.onClick {
            Navigation.findNavController(view) // Navigation 方式获取 NavController
                    .navigate(R.id.action_homeFragment_to_notificationFragment) // 根据 action 的 id 跳转
        }
    }

}
<!-- fragment_dashboard.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".navigation.HomeFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dashboard_fragment" />

    <Button
        android:id="@+id/dashboardToNotification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="to notification"/>
    
</LinearLayout>
class DashboardFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_dashboard, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        dashboardToNotification.onClick {
            Navigation.findNavController(view).navigate(R.id.notificationFragment)
        }
    }
}

navigation_bottomnavigationview_2.gif

下面的 item 跟着切换。

返回

Activity 中 defaultNavHost 设为 true,默认的按返回键就是按进入栈的顺序退出。

可以通过 NavController 的 navigateUp 方法主动退出。

修改 fragment_notification.xml 为

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".navigation.HomeFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="notification_fragment" />

    <Button
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="back"/>

</LinearLayout>

在 NotificationFragment 里添加如下方法:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    back.onClick {
        Navigation.findNavController(view).navigateUp()
    }
}

执行效果是从哪个 Fragment 跳转过去,就是返回到哪个。

navigation_back.gif

navigateUp 看源码可知如果栈里有多个页面,调用 popBackStack,如果只有一个,是调用了所依附的 Activity 的 finish 方法。

public boolean popBackStack(@IdRes int destinationId, boolean inclusive)

popBackStack 的另一个重载方法,可以指定回到哪个 Fragment,即可以一次关闭多个页面。inclusive 表示 destinationId 这个页面是否也要弹出关闭。

NotificationFragment 中再添加两个 Button

<Button
    android:id="@+id/backToHome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAllCaps="false"
    android:text="backToHome"/>

<Button
    android:id="@+id/backToHomeInclusive"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAllCaps="false"
    android:text="backToHomeInclusive"/>
backToHome.onClick {
    Navigation.findNavController(view).popBackStack(R.id.homeFragment, false)
}
backToHomeInclusive.onClick {
    Navigation.findNavController(view).popBackStack(R.id.homeFragment, true)
}

然后从 Home 到 Dashboard,从 Dashboard 再到 Notification,即 NotificationFragment 下面还有两个 Fragment。结果效果一样,都是回到了 HomeFragment,但是看栈有区别。修改代码为

class NotificationFragment : Fragment() {

    lateinit var navController : NavController

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        navController = NavHostFragment.findNavController(this@NotificationFragment)
        return inflater.inflate(R.layout.fragment_notification, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        back.onClick { Navigation.findNavController(view).navigateUp() }
        backToHome.onClick { pop(false) }
        backToHomeInclusive.onClick { pop(true) }
    }

    fun pop(inclusive : Boolean) {
        printBackStack("inclusive=$inclusive before pop -----")
        navController.popBackStack(R.id.homeFragment, inclusive)
        printBackStack("inclusive=$inclusive after pop ------")
    }

    fun printBackStack(pre : String) {
        val mBackStack : Deque<NavDestination> = NavController::class.java.getDeclaredField("mBackStack").apply {
            isAccessible = true
        }.get(navController) as Deque<NavDestination>
        mBackStack.log(pre)
    }

    fun Deque<NavDestination>.log (pre : String) {
        if (this.isEmpty()) {
            Log.e("OMG", "$pre back stack size 0")
        } else {
            this.forEach {
                Log.e("OMG", "$pre ${it.label},id:${it.id}")
            }
        }
    }
}

日志显示:

2018-09-05 18:32:15.869 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=false before pop ----- null,id:2131230766
2018-09-05 18:32:15.869 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=false before pop ----- fragment_home,id:2131230946
2018-09-05 18:32:15.870 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=false before pop ----- fragment_dashboard,id:2131230909
2018-09-05 18:32:15.870 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=false before pop ----- fragment_notification,id:2131230990
2018-09-05 18:32:15.917 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=false after pop ------ null,id:2131230766
2018-09-05 18:32:15.917 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=false after pop ------ fragment_home,id:2131230946
2018-09-05 18:32:25.387 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=true before pop ----- null,id:2131230766
2018-09-05 18:32:25.388 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=true before pop ----- fragment_home,id:2131230946
2018-09-05 18:32:25.388 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=true before pop ----- fragment_dashboard,id:2131230909
2018-09-05 18:32:25.388 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=true before pop ----- fragment_notification,id:2131230990
2018-09-05 18:32:25.425 17142-17142/pot.ner347.androiddemo E/OMG: inclusive=true after pop ------ back stack size 0}

看栈,当 inclusive 为 true 时确实把自己也弹出了,之所以还能看到 HomeFragment,应该是 Activity 的布局问题,一开始就显示了 NavHostFragment。

修改 start destination

navigation_change_start.png

start destination 的名字前有个小房子,如果要修改,可以点击 destination,然后点击右侧的 Set Start Destination。看代码 app:startDestination 已经变了。

比如把 NotificationFragment 设为 start destination,进入 Activity,点击下面的 Item 切换到 HomeFragment,然后再到 NotificationFragment,执行返回:

2018-09-05 18:44:43.776 19162-19162/pot.ner347.androiddemo E/OMG: inclusive=true before pop ----- null,id:2131230766
2018-09-05 18:44:43.776 19162-19162/pot.ner347.androiddemo E/OMG: inclusive=true before pop ----- fragment_notification,id:2131230990
2018-09-05 18:44:43.776 19162-19162/pot.ner347.androiddemo E/OMG: inclusive=true before pop ----- fragment_home,id:2131230946
2018-09-05 18:44:43.777 19162-19162/pot.ner347.androiddemo E/OMG: inclusive=true before pop ----- fragment_dashboard,id:2131230909
2018-09-05 18:44:43.777 19162-19162/pot.ner347.androiddemo E/OMG: inclusive=true before pop ----- fragment_notification,id:2131230990
2018-09-05 18:44:43.798 19162-19162/pot.ner347.androiddemo E/OMG: inclusive=true after pop ------ null,id:2131230766
2018-09-05 18:44:43.798 19162-19162/pot.ner347.androiddemo E/OMG: inclusive=true after pop ------ fragment_notification,id:2131230990

参考:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cloudskyme

android开发列表界面

android开发列表界面,上边是一个显示题目,下边显示的是图标,中间显示的是列表。 看一下效果吧 ? 当鼠标点击上之后出现背景图,下面看一下如何做出这样的效果...

44560
来自专栏7号代码

Android应用界面开发——Fragment(实现图书详情界面)

Fragment代表了Activity的子模块,因此可以把Fragment理解成Activity片段。

40620
来自专栏青蛙要fly的专栏

Android技能树 — LayoutInflater Factory小结

前段时间流行起来了突然不愿意写Shape,Selector文件的文章,然后各种方案,编写自定义View等。那时候大家应该都看到了一篇: 无需自定义View,彻底...

20130
来自专栏Fish

SharedPreferences存储数据

使用这个可以在不同的Activity中调用并获得里面保存的值。这个貌似是把里面的内容保存在了一个xml文件里。 Android应用开发SharedPrefe...

244100
来自专栏Android Note

Android-实用的MVP

17030
来自专栏双十二技术哥

Android fragment 标签加载过程分析

在上一篇文章中我们介绍了 AsyncLayoutInflater 使用的注意事项及改进方案。

17910
来自专栏分享达人秀

ListView优化和列表首尾使用

前面连续几期都在学习ListView的各种使用方法,如果细心的同学可能会发现其运行效率是有待提高的,那么本期就来一起学习有哪些方法技巧来优化ListVi...

26280
来自专栏Vamei实验室

安卓第八夜 玛丽莲梦露

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢! 

10910
来自专栏向治洪

android多线程下载3

今天跟大家一起分享下android开发中比较难的一个环节,可能很多人看到这个标题就会感觉头很大,的确如果没有良好的编码能力和逻辑思维,这块是很难搞明白的,前面2...

21350
来自专栏学海无涯

Android开发之奇怪的Fragment

说起Android中的Fragment,在使用的时候稍加注意,就会发现存在以下两种: v4包中的兼容Fragment,android.support.v4.ap...

34650

扫码关注云+社区

领取腾讯云代金券