如果你需要快速地翻閱一些連續的頁面，那麼就可以透過 ViewPager 這個元件達成這樣的效果，它是一個常見且廣泛使用的元件，簡單易懂程式碼在很多 App 上都可以看到。

XML

先簡單設計出一個頁面作為主頁面，主頁面的內容要包含TabLayout作為頁面標籤以及ViewPager做為顯示切換頁面的內容。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"></com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"></androidx.viewpager.widget.ViewPager>

</RelativeLayout>

接著另外設計出三個頁面，這裡範例命名為page1.xml、page2.xml、page3.xml，內容就創一個TextView方便識別就好。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="100dp"
        android:gravity="center"
        android:text="頁面1"/>

</RelativeLayout>

JAVA程式

滑動的三個頁面分別要創三個對應的Fragment，這裡就寫一個範例做為參考。

public class Page1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.page1, container, false);

        return rootView;
    }
}

創一個ViewPagerAdapter為之後設定上方標籤ViewPager的標題顯示及標題對應的頁面。

public class ViewPagerAdapter extends FragmentStatePagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }

    @Override
    public int getItemPosition(Object object) {
        return PagerAdapter.POSITION_NONE;
    }
}

在創好Fragment和ViewPagerAdapter後就可以來到主頁面做編輯了。在主頁面中，我們要做的主要有下面幾個
1.為ViewPagerAdapter宣告
2.為ViewPager設定一個監聽器
3.將需要的頁面加入ViewPagerAdapter中
4.最後再將上述設定都套進TabLayout就完成

public class MainActivity extends AppCompatActivity {

    TabLayout tabs;
    ViewPager pager;
    ViewPagerAdapter pagerAdapter;

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

        tabs = findViewById(R.id.tabs);
        pager = findViewById(R.id.pager);

        pagerAdapter = new ViewPagerAdapter(this.getSupportFragmentManager());
        pager.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) {
            }
        });

        setupViewPager(pager);
        tabs.setupWithViewPager(pager);
     }

    public void setupViewPager(ViewPager viewPager) {
        pagerAdapter.addFragment(new Page1(), "頁面1");
        pagerAdapter.addFragment(new Page2(), "頁面2");
        pagerAdapter.addFragment(new Page3(), "頁面3");
        viewPager.setAdapter(pagerAdapter);
    }
}

成果