ViewPager，Fragment，TabLayout结合使用

github地址
效果图

为了实现如上效果，使用ViewPager，Fragment，TabLayout。
1.ViewPager直接继承了ViewGroup类，是一个容器，需要在里面添加我们想要显示的内容，类似于ListView，ViewPager类需要PagerAdaoter适配器类提供数据。ViewPager左右切换当前的view，实现滑动切换的效果。
2.Tablayout继承自HorizontalScrollView，用作页面切换指示器。
3.ViewPager，Fragment，TabLayout结合使用，实现不同fragment之间滑动切换的效果

1.添加TabLayout和ViewPager

activity_main.xml

<LinearLayout
    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"
    android:orientation="vertical">

    <include layout="@layout/layout_titleview"/>
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/leave_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

2.加入两个fragment

fragment1.class

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.layout_fragment1,container,false);
        return view;
    }
}

fragment1.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="50sp"
        android:text="fragment1"/>

</LinearLayout>

fragment2.class

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.layout_fragment2,container,false);
        return view;
    }
}

fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="50sp"
        android:text="fragment2"/>

</LinearLayout>

3. 创建FragmentPagerAdapter子类PagerAdapter管理Fragment

因为页卡是fragment，用FragmentAdapter

public class MyPagerAdapter extends FragmentPagerAdapter {
    List<Fragment> fragmentList;

    //构造方法，方便之后赋值调用
    
    public MyPagerAdapter(FragmentManager fm,List<Fragment> fragmentList){
        super(fm);
        this.fragmentList = fragmentList;
    }

    //根据Item的位置返回对应位置的Fragment，绑定item和Fragment
    
    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    //设置item的数量
    
    @Override
    public int getCount() {
        return fragmentList.size();
    }
}

4.在MainActivity中实现

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager viewPager = findViewById(R.id.viewpager);
        TabLayout tabLayout = findViewById(R.id.tab_layout);
        String[] titles = new String[]{"fragment1","fragment2"}; //设置标题

        List<Fragment> fragments = new ArrayList<>(); //
        fragments.add(new Fragment1());
        fragments.add(new Fragment2());

        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager(),fragments);
        viewPager.setAdapter(adapter);              //绑定adapter
        tabLayout.setupWithViewPager(viewPager);    //绑定viewPager

        for(int i=0;i<titles.length;i++){
            tabLayout.getTabAt(i).setText(titles[i]);   //设置标题
        }
  
    }

一个简单的滑动效果实现。