介绍
Material Design 是一种由 Google 推出的全新设计语言，其旨在提供一种全新的设计方法，解决跨平台应用的一些问题。在 Material Design 中，导航栏是一个非常重要的组件，可以在应用中帮助用户登录，切换页面等操作。在本文中，我们将通过 ViewPager 和 TabLayout 的使用，来实现一个 Material Design 风格的导航栏。
准备工作
在开始之前，请确保你已经安装了以下的环境和工具：
- JDK 1.8 或以上版本
- Android Studio 3.0 或以上版本
实现
创建项目
在 Android Studio 中，创建一个新的项目，并选择一个你喜欢的应用名称和图标。本文的示例代码中，我们将应用名设置为 “MaterialDesignNavigation”，并使用默认的图标。
创建布局
我们需要在项目中创建一个布局文件，用于展示导航栏。在 res/layout 目录下创建一个名为 activity_main.xml 的文件，代码如下：
// javascriptcn.com 代码示例
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"/>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>代码中包含两个组件，一个是 AppBarLayout，另一个是 ViewPager。其中 AppBarLayout 是包含导航栏的容器，我们在这个容器中放置了一个 Toolbar 和一个 TabLayout，ViewPager 是一个可以侧滑切换页面的组件。
创建 Fragment
为了实现侧滑切换页面的效果，我们需要在项目中创建一些 Fragments。在本文中，我们创建三个 Fragments，分别用于展示 “首页”，“消息”和 “我的” 三个页面的内容。在 res/layout 目录下创建三个布局文件，代码分别如下：
home_fragment.xml
// javascriptcn.com 代码示例
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/home_page"/>
</LinearLayout>message_fragment.xml
// javascriptcn.com 代码示例
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/message_page"/>
</LinearLayout>profile_fragment.xml
// javascriptcn.com 代码示例
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/profile_page"/>
</LinearLayout>在代码中，我们只是简单地在每个 Fragment 中放置了一个 TextView，以便于快速展示每个页面。
创建 Adapter
为了实现 ViewPager 的效果，我们需要在项目中创建一个 Adapter，并将所有的 Fragment 加入到 Adapter 中。在本文中，我们创建了一个名为 NavigationPagerAdapter 的 Adapter，代码如下：
// javascriptcn.com 代码示例
public class NavigationPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments;
private List<String> mTitles;
public NavigationPagerAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
mFragments = fragments;
mTitles = titles;
}
@NonNull
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}在代码中，我们需要创建一个 List 用于存储所有的 Fragments，另外一个 List 存储 TabLayout 中每个 Tab 的标题。在 getItem() 方法中，我们根据位置获取对应的 Fragment，getCount() 返回总的 Fragment 数量，getPageTitle() 返回对应的标题。由于我们只展示三个 Fragment，因此 getCount() 固定返回 3。注意，在新版本的 Android Studio 中，FragmentPagerAdapter 的构造方法已经不推荐使用，我们建议使用特定的 FragmentStatePagerAdapter，这可以更好地处理 Fragment 的生命周期。
设置导航栏
在 MainActivity 中，我们需要绑定所有的组件，并使用 NavigationPagerAdapter 将所有的 Fragment 加入到 ViewPager 中。代码如下：
// javascriptcn.com 代码示例
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabLayout = findViewById(R.id.tab_layout);
mViewPager = findViewById(R.id.view_pager);
List<Fragment> fragments = new ArrayList<>();
fragments.add(new HomeFragment());
fragments.add(new MessageFragment());
fragments.add(new ProfileFragment());
List<String> titles = new ArrayList<>();
titles.add(getString(R.string.home_page));
titles.add(getString(R.string.message_page));
titles.add(getString(R.string.profile_page));
NavigationPagerAdapter adapter = new NavigationPagerAdapter(getSupportFragmentManager(), fragments, titles);
mViewPager.setAdapter(adapter);
mTabLayout.setupWithViewPager(mViewPager);
}
}在代码中，我们首先获取了 TabLayout 和 ViewPager 的实例，然后创建了一个包含所有 Fragment 的 List，在创建一个包含所有 Tab 标题的 List。最后，我们创建一个 NavigationPagerAdapter 并将其绑定到 ViewPager 上，并在 TabLayout 中设置 ViewPager。
效果展示
运行应用，效果如下图所示：
至此，我们已经成功地实现了一个 Material Design 风格的导航栏！
总结
在本文中，我们学习了如何使用 ViewPager 和 TabLayout 组件，在 Android 应用中实现一个 Material Design 风格的导航栏。希望本文能够解决您在应用开发中的问题，指导您的学习和工作。示例代码已上传到 Github，欢迎下载和学习。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651f7e2695b1f8cacd70c27a