TabLayout+ViewPager实现滚动页面

**TabLayout + ViewPager 实现滚动页面**

在 Android 开发中，TabLayout 和 ViewPager 是两个非常常用的控件。它们可以帮助我们实现一个类似于微信或 QQ 的界面效果，即在顶部显示 Tab选项卡，而底部滑动显示不同的内容页面。

本文将详细介绍如何使用 TabLayout 和 ViewPager 实现滚动页面的功能。

### 一、TabLayout首先，我们需要了解 TabLayout 控件。TabLayout 是一个用于展示 Tab 的控件，它可以在顶部或底部显示 Tab选项卡。我们可以通过设置 TabLayout 的模式来控制它是否显示在顶部还是底部。

####1.1 添加依赖为了使用 TabLayout，我们需要在项目的 `build.gradle` 文件中添加以下依赖：

groovydependencies {
 implementation 'androidx.appcompat:appcompat:1.3.0'
 implementation 'com.google.android.material:material:1.2.1'
}

####1.2 布局文件接下来，我们需要在布局文件中添加 TabLayout 控件：

xml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" /> android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#FFFFFF"
 app:tabIndicatorColor="#FF0000"
 app:tabMode="scrollable" />

 <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1" />

</LinearLayout>

####1.3 Java代码然后，我们需要在 Java代码中设置 TabLayout 和 ViewPager 的监听器：

javapublic class MainActivity extends AppCompatActivity {

 private TabLayout tabLayout;
 private ViewPager viewPager;

 @Override protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 tabLayout = findViewById(R.id.tab_layout);
 viewPager = findViewById(R.id.view_pager);

 // 设置TabLayout的监听器 tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
 @Override public void onSelected(TabLayout.Tab tab) {

 }

 @Override public void onUnselected(TabLayout.Tab tab) {

 }

 @Override public void onTabReselected(TabLayout.Tab tab) {

 }
 });

 // 设置ViewPager的监听器 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

 }

 @Override public void onPageSelected(int position) {

 }

 @Override public void onPageScrollStateChanged(int state) {

 }
 });

 // 设置ViewPager的适配器 viewPager.setAdapter(new PagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount()));

 }

 private class PagerAdapter extends FragmentStatePagerAdapter {
 int mNumOfTabs;

 public PagerAdapter(FragmentManager fm, int NumOfTabs) {
 super(fm);
 this.mNumOfTabs = NumOfTabs;
 }

 @Override public Fragment getItem(int position) {

 switch (position) {
 case0:
 return new FirstFragment();
 case1:
 return new SecondFragment();
 default:
 return null;
 }
 }

 @Override public int getCount() {
 return mNumOfTabs;
 }
 }

}

### 二、ViewPagerViewPager 是一个用于滑动显示不同的内容页面的控件。我们可以通过设置 ViewPager 的监听器来控制它是否需要进行滑动。

####2.1 添加依赖为了使用 ViewPager，我们需要在项目的 `build.gradle` 文件中添加以下依赖：

groovydependencies {
 implementation 'androidx.appcompat:appcompat:1.3.0'
 implementation 'com.google.android.material:material:1.2.1'
}

####2.2 布局文件接下来，我们需要在布局文件中添加 ViewPager 控件：

xml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" /> android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#FFFFFF"
 app:tabIndicatorColor="#FF0000"
 app:tabMode="scrollable" />

 <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1" />

</LinearLayout>

####2.3 Java代码然后，我们需要在 Java代码中设置 ViewPager 的监听器：

javapublic class MainActivity extends AppCompatActivity {

 private TabLayout tabLayout;
 private ViewPager viewPager;

 @Override protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 tabLayout = findViewById(R.id.tab_layout);
 viewPager = findViewById(R.id.view_pager);

 // 设置ViewPager的监听器 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

 }

 @Override public void onPageSelected(int position) {

 }

 @Override public void onPageScrollStateChanged(int state) {

 }
 });

 }

}

### 三、总结本文介绍了如何使用 TabLayout 和 ViewPager 实现滚动页面的功能。通过设置 TabLayout 的模式和ViewPager 的监听器，我们可以控制它是否需要进行滑动。同时，通过设置ViewPager的适配器，我们可以控制它显示哪些内容页面。

以上就是本文的全部内容。如果您有任何问题或疑问，请随时与我联系。