在安卓应用开发中，TabLayout 和 ViewPager 是很常见的组件，它们可以方便地实现多个页面之间的切换。而 Material Design 是 Google 提出的一种设计风格，也被广泛应用于安卓应用中。本文将介绍如何使用 Material Design 风格的 TabLayout 和 ViewPager 实现简单的页面切换效果。
实现步骤
1. 添加依赖
在项目的 build.gradle 文件中添加以下依赖：
implementation 'com.google.android.material:material:1.4.0'
2. 布局文件
在布局文件中添加 TabLayout 和 ViewPager，如下所示：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
---------------------
-------------------
---------------------------------------------
-------------------------------------- --
------------------------------------
----------------------------
-----------------------------------
------------------------------------ --其中，TabLayout 的属性 tabGravity 和 tabMode 分别指定了 Tab 的排列方式和样式，tabSelectedTextColor 和 tabTextColor 分别指定了选中和未选中的 Tab 的文本颜色。
3. 创建 Fragment
创建多个 Fragment，每个 Fragment 对应一个页面，如下所示：
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment1_layout, container, false);
return view;
}
}4. 创建 Adapter
创建 Adapter，将多个 Fragment 添加到 ViewPager 中，如下所示：
-- -------------------- ---- -------
------ ----- -------------- ------- -------------------- -
------- -------------- -------------
------- ------------ ----------
------ ------------------------------ --- -------------- ------------- ------------ ---------- -
----------
----------------- - -------------
-------------- - ----------
-
--------
---------
------ -------- ----------- --------- -
------ ---------------------------
-
---------
------ --- ---------- -
------ --------------------
-
---------
---------
------ ------------ ---------------- --------- -
------ ------------------------
-
-5. 设置 Adapter
在 Activity 中设置 Adapter，将 Adapter 设置给 ViewPager，如下所示：
-- -------------------- ---- ------- -------------- ------------ - --- -------------- -------------------- ------------- -------------------- ------------- -------------------- ------------- ------------ --------- - --- -------------- ---------------------- ---------------------- ---------------------- -------------- ------- - --- ------------------------------------------- ------------- ----------- --------- --------- - ------------------------------ ------------------------------ --------- --------- - ------------------------------ ----------------------------------------
至此，一个简单的 TabLayout 和 ViewPager 的实现就完成了。
示例代码
以下是完整的示例代码：
activity_main.xml
-- -------------------- ---- -------
----------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
---------------------
-------------------
---------------------------------------------
-------------------------------------- --
------------------------------------
----------------------------
-----------------------------------
------------------------------------ --
------------------------------------------------------Fragment1.java
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment1_layout, container, false);
return view;
}
}Fragment2.java
public class Fragment2 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment2_layout, container, false);
return view;
}
}Fragment3.java
public class Fragment3 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment3_layout, container, false);
return view;
}
}MyPagerAdapter.java
-- -------------------- ---- -------
------ ----- -------------- ------- -------------------- -
------- -------------- -------------
------- ------------ ----------
------ ------------------------------ --- -------------- ------------- ------------ ---------- -
----------
----------------- - -------------
-------------- - ----------
-
--------
---------
------ -------- ----------- --------- -
------ ---------------------------
-
---------
------ --- ---------- -
------ --------------------
-
---------
---------
------ ------------ ---------------- --------- -
------ ------------------------
-
-MainActivity.java
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
-------------- ------------ - --- --------------
-------------------- -------------
-------------------- -------------
-------------------- -------------
------------ --------- - --- --------------
----------------------
----------------------
----------------------
-------------- ------- - --- ------------------------------------------- ------------- -----------
--------- --------- - ------------------------------
------------------------------
--------- --------- - ------------------------------
----------------------------------------
-
-总结
本文介绍了如何使用安卓 Material Design 风格的 TabLayout 和 ViewPager 实现简单的页面切换效果。通过本文的学习，读者可以掌握如何使用这两个组件，为安卓应用的开发提供了很好的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6604901ad10417a2221c6514