android ViewPager+TabLayout+Fragment实现左右滑动切换页面

ViewPager类似于我们的LinearLayout，RelativeLayout这些布局，需要在其中放我们想要显示的东西。我们还需要Adapter来为其提供数据。

使用

1.在xml文件中

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/in_viewpager">
</android.support.v4.view.ViewPager>

2.构建Adapter类继承自PagerAdapter类，重写其中的方法（这里我们需要一个List存放我们的数据）

public class MyPager extends PagerAdapter {

    private List<View> myViewList;

    public MyPager(List<View> myViewList){
        this.myViewList = myViewList;
    }

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

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view == o;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        container.addView(myViewList.get(position));
        return myViewList.get(position);
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(myViewList.get(position));
    }
}

3.在MainActivity中初始化数据

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;

    private List<View> myViewList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = findViewById(R.id.in_viewpager);
        myViewList = new ArrayList<>();
        LayoutInflater layoutInflater = getLayoutInflater().from(MainActivity.this);
        View view1 = layoutInflater.inflate(R.layout.layout1,null);
        View view2 = layoutInflater.inflate(R.layout.layout2,null);
        View view3 = layoutInflater.inflate(R.layout.layout3,null);
        myViewList.add(view1);
        myViewList.add(view2);
        myViewList.add(view3);
        viewPager.setAdapter(new MyPager(myViewList));
    }
}

进阶（设置滑动淡入淡出效果）

1.新建类继承自ViewPager.PageTransformer，重写其中的方法

public class DepthPageTransformer implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.75f;

    @Override
    public void transformPage(@NonNull View page, float position) {
        int pageWidth = page.getWidth();
        if (position < -1) { // [-Infinity,-1)
            // 页面远离左侧页面
            page.setAlpha(0);
        } else if (position <= 0) { // [-1,0]
            // 页面在由中间页滑动到左侧页面 或者 由左侧页面滑动到中间页
            page.setAlpha(1);
            page.setTranslationX(0);
            page.setScaleX(1);
            page.setScaleY(1);
        } else if (position <= 1) { // (0,1]
            //页面在由中间页滑动到右侧页面 或者 由右侧页面滑动到中间页
            // 淡出效果
            page.setAlpha(1 - position);
            // 反方向移动
            page.setTranslationX(pageWidth * -position);
            // 0.75-1比例之间缩放
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
        } else { // (1,+Infinity]
            // 页面远离右侧页面
            page.setAlpha(0);
        }
    }
}

2.给ViewPager添加transformer

viewPager.setPageTransformer(true,new DepthPageTransformer());

效果图

和TabLayout结合使用

1.xml文件中

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tl_tab"></android.support.design.widget.TabLayout>

2.设置标题名称

在ViewPager的adpter类中重写getPageTittle()方法

@Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        switch (position){
            case 0:
                return "1";
            case 1:
                return "2";
            default:
                return "3";
        }
    }

3.将TabLayout和ViewPager关联

tabLayout.setupWithViewPager(viewPager);

效果图

设置TabLayout的属性

 <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tl_tab"
        app:tabIndicatorColor="@color/colorAccent"//设置下划线颜色
        app:tabMode="fixed"
        app:tabGravity="fill"//设置居中
        app:tabSelectedTextColor="@color/colorPrimaryDark"//设置选中文字的颜色
        app:tabTextColor="@color/colorPrimary"//设置未选中文字的颜色>
        </android.support.design.widget.TabLayout>

源码地址

源码地址

实现可滑动的Fragment

前面的步骤都一样的，只有在创建Adapter时，要继承自FragmentPagerAdapter

public class MyAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList;

    public MyAdapter(List<Fragment> fragmentList, FragmentManager fm) {
        super(fm);
        this.fragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int i) {
        return fragmentList.get(i);
    }

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

在MainActivity中

fragmentList = new ArrayList<>();
fragmentList.add(fragment1);
fragmentList.add(fragment2);
fragmentList.add(fragment3);
fragmentList.add(fragment4);
myAdapter = new MyAdapter(fragmentList,getSupportFragmentManager());
viewPager.setAdapter(myAdapter);

如果要设置点击按钮切换Fragment的话

       button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewPager.setCurrentItem(0);
            }
        });
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewPager.setCurrentItem(1);
            }
        });
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewPager.setCurrentItem(2);
            }
        });
        button4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewPager.setCurrentItem(3);
            }
        });