В чем разница между интерфейсом Tab UI между BottomNavigationView и TabLayout в Android Studio 4.0?

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.

Кажется, что два элемента управления могут выполнять то же самое.

Чем отличается интерфейс вкладок между BottomNavigationView и TabLayout в Android Studio 4.0?

Код 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

Image B

введите описание изображения здесь

Answer 1

Между ними есть некоторые тонкие различия UX, но вот краткое изложение того, когда их использовать, из рекомендаций по дизайну пользовательского интерфейса материалов :

Нижние панели навигации позволяют перемещаться между основные пункты назначения в приложении ... Нижнюю навигацию следует использовать для:

• пунктов назначения верхнего уровня, которые должны быть доступны из любой точки приложения
• От трех до пяти пунктов назначения
• Только для мобильных устройств или планшетов

Нижнюю навигацию нельзя использовать для:

• отдельных задач, таких как просмотр одного сообщения электронной почты
• Предпочтения или настройки пользователя

Также обратите внимание на следующие рекомендации:

You can read more about when to use Вкладки vs Нижняя навигация в Material Design сайт.