代码 A 和图像 A 来自项目 architecture-components-samples .
代码 B 和图像 B 来自项目 sunflower .
代码 A 使用 com.google.android.material.bottomnavigation.BottomNavigationView
实现选项卡 UI。
代码 B 使用 com.google.android.material.tabs.TabLayout
实现选项卡 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
最佳答案
两者之间存在一些细微的用户体验差异,但这里是 Material UI design guidelines 中有关何时使用它们的摘要:
Bottom navigation bars allow movement between primary destinations in an app ... Bottom navigation should be used for:
- Top-level destinations that need to be accessible from anywhere in the app
- Three to five destinations
- Mobile or tablet only
Bottom navigation shouldn’t be used for:
- Single tasks, such as viewing a single email
- User preferences or settings
另请注意以下准则:
您可以阅读有关何时使用的更多信息 Tabs对比 Bottom Navigation在 Material 设计网站。
关于android-studio - Android Studio 4.0 中的BottomNavigationView 和TabLayout 之间的Tab UI 有何不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62495762/