介绍
Material Design 是一种由 Google 推出的全新设计语言,其旨在提供一种全新的设计方法,解决跨平台应用的一些问题。在 Material Design 中,导航栏是一个非常重要的组件,可以在应用中帮助用户登录,切换页面等操作。在本文中,我们将通过 ViewPager 和 TabLayout 的使用,来实现一个 Material Design 风格的导航栏。
准备工作
在开始之前,请确保你已经安装了以下的环境和工具:
- JDK 1.8 或以上版本
- Android Studio 3.0 或以上版本
实现
创建项目
在 Android Studio 中,创建一个新的项目,并选择一个你喜欢的应用名称和图标。本文的示例代码中,我们将应用名设置为 “MaterialDesignNavigation”,并使用默认的图标。
创建布局
我们需要在项目中创建一个布局文件,用于展示导航栏。在 res/layout 目录下创建一个名为 activity_main.xml 的文件,代码如下:
-- -------------------- ---- ------- ----- ------------- ------------------ ---------------------------------------------------- ---------------------------------------------------------- --------------------------------------------------- ----------------------------------- ------------------------------------- ------------------------------------------------ ----------------------------------- ------------------------------------ ---------------------------------------------------------------------- ---------------------------------- ----------------------------------- ------------------------------------------- --------------------------------------- --------------------------------------------------------------- ------------------------------------------- ---------------------------- ----------------------------------- ------------------------------------ ------------------- ----------------------- -------------------------------------------------- ------------------------------------ ---------------------------- ----------------------------------- ------------------------------------ -------------------------------------------------------------- ------------------------------------------------------
代码中包含两个组件,一个是 AppBarLayout,另一个是 ViewPager。其中 AppBarLayout 是包含导航栏的容器,我们在这个容器中放置了一个 Toolbar 和一个 TabLayout,ViewPager 是一个可以侧滑切换页面的组件。
创建 Fragment
为了实现侧滑切换页面的效果,我们需要在项目中创建一些 Fragments。在本文中,我们创建三个 Fragments,分别用于展示 “首页”,“消息”和 “我的” 三个页面的内容。在 res/layout 目录下创建三个布局文件,代码分别如下:
home_fragment.xml
-- -------------------- ---- ------- ------------- ---------------------------------------------------------- ----------------------------------- ------------------------------------ ------------------------ ------------------------------- --------- ----------------------------------- ------------------------------------ ---------------------------------- ---------------
message_fragment.xml
-- -------------------- ---- ------- ------------- ---------------------------------------------------------- ----------------------------------- ------------------------------------ ------------------------ ------------------------------- --------- ----------------------------------- ------------------------------------ ------------------------------------- ---------------
profile_fragment.xml
-- -------------------- ---- ------- ------------- ---------------------------------------------------------- ----------------------------------- ------------------------------------ ------------------------ ------------------------------- --------- ----------------------------------- ------------------------------------ ------------------------------------- ---------------
在代码中,我们只是简单地在每个 Fragment 中放置了一个 TextView,以便于快速展示每个页面。
创建 Adapter
为了实现 ViewPager 的效果,我们需要在项目中创建一个 Adapter,并将所有的 Fragment 加入到 Adapter 中。在本文中,我们创建了一个名为 NavigationPagerAdapter 的 Adapter,代码如下:
-- -------------------- ---- ------- ------ ----- ---------------------- ------- -------------------- - ------- -------------- ----------- ------- ------------ -------- ------ -------------------------------------- --- -------------- ---------- ------------ ------- - --------- --------------------------------------- ---------- - ---------- ------- - ------- - -------- --------- ------ -------- ----------- --------- - ------ ------------------------- - --------- ------ --- ---------- - ------ ------------------ - --------- --------- ------ ------------ ---------------- --------- - ------ ---------------------- - -
在代码中,我们需要创建一个 List 用于存储所有的 Fragments,另外一个 List 存储 TabLayout 中每个 Tab 的标题。在 getItem() 方法中,我们根据位置获取对应的 Fragment,getCount() 返回总的 Fragment 数量,getPageTitle() 返回对应的标题。由于我们只展示三个 Fragment,因此 getCount() 固定返回 3。注意,在新版本的 Android Studio 中,FragmentPagerAdapter 的构造方法已经不推荐使用,我们建议使用特定的 FragmentStatePagerAdapter,这可以更好地处理 Fragment 的生命周期。
设置导航栏
在 MainActivity 中,我们需要绑定所有的组件,并使用 NavigationPagerAdapter 将所有的 Fragment 加入到 ViewPager 中。代码如下:
-- -------------------- ---- ------- ------ ----- ------------ ------- ----------------- - ------- --------- ----------- ------- --------- ----------- --------- --------- ---- --------------- ------------------- - ----------------------------------- --------------------------------------- ---------- - ------------------------------ ---------- - ------------------------------ -------------- --------- - --- -------------- ----------------- ---------------- ----------------- ------------------- ----------------- ------------------- ------------ ------ - --- -------------- ------------------------------------------ --------------------------------------------- --------------------------------------------- ---------------------- ------- - --- --------------------------------------------------- ---------- -------- ------------------------------- ------------------------------------------ - -
在代码中,我们首先获取了 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