Android Studio 4.0 中 BottomNavigationView 和 TabLayout 的 Tab UI 有什么不同？

Question

代码 A 和图像 A 来自项目Architecture-components-samples。

代码 B 和图像 B 来自项目sunflower。

代码A用于com.google.android.material.bottomnavigation.BottomNavigationView实现Tab UI。

代码B用于com.google.android.material.tabs.TabLayout实现Tab UI。

看起来这两个控件可以做同样的事情。

Android Studio 4.0 中 BottomNavigationView 和 TabLayout 的 Tab UI 有什么不同？

代码A

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.android.navigationadvancedsample.MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav"/>

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


</LinearLayout>

代码B

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/Theme.Sunflower.AppBarOverlay">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|snap"
                app:toolbarId="@id/toolbar">

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    style="@style/Widget.MaterialComponents.Toolbar.Primary"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="parallax">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:gravity="center"
                    android:text="@string/app_name"
                    android:textAppearance="?attr/textAppearanceHeadline5" />

                </androidx.appcompat.widget.Toolbar>

            </com.google.android.material.appbar.CollapsingToolbarLayout>

            <!-- Override tabIconTint attribute of style with selector -->
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                style="@style/Widget.MaterialComponents.TabLayout.Colored"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:tabIconTint="@drawable/tab_icon_color_selector"
                app:tabTextColor="?attr/colorPrimaryDark"/>

        </com.google.android.material.appbar.AppBarLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</layout>

图片A

图B

Answer 1

两者之间存在一些细微的 UX 差异，但这里总结了Material UI 设计指南中何时使用它们的信息中关于何时使用它们的总结：

\n

\n

底部导航栏允许在应用中的主要目的地之间移动\n...\n底部导航栏应用于：

\n

\n
• 需要从应用程序中的任何位置访问的顶级目的地
\n
• 三到五个目的地
\n
• 仅限手机或平板电脑
\n

\n

底部导航不应\xe2\x80\x99 用于：

\n

\n
• 单一任务，例如查看一封电子邮件
\n
• 用户偏好或设置
\n

\n

\n

另请注意这些准则：

\n

\n

您可以阅读有关何时使用选项卡与底部导航的更多信息您可以在 Material Design 网站上

\n