ViewPager实现页卡方法--TabLayout

效果图：

添加依赖包：

 compile 'com.android.support:appcompat-v7:24.0.0'

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/red"
        app:tabSelectedTextColor="@color/red"
        app:tabTextColor="@color/black"/>

    <!--可滑动的布局内容-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

页面代码：

package com.baozilichao.test_viewpager002;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
    private ViewPager viewpager1,viewpager2;
    private List<View> list1,list2;
    private MyPagerAdapter2 pageradapter2;
    private MyPagerAdapter1 pagerAdapter1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewpager1= (ViewPager) findViewById(R.id.viewpager1);
        viewpager2= (ViewPager) findViewById(R.id.viewpager2);
        iniData();
        iniData1();
        pagerAdapter1=new MyPagerAdapter1(list1);
        pageradapter2=new MyPagerAdapter2(list2);
        viewpager1.setAdapter(pagerAdapter1);
        viewpager2.setAdapter(pageradapter2);
    }

    private void iniData() {
        list1=new ArrayList<>();
        View view1=getLayoutInflater().inflate(R.layout.list_item1,null);
        View view2=getLayoutInflater().inflate(R.layout.item_list2,null);
        View view3=getLayoutInflater().inflate(R.layout.list_item1,null);
        View view4=getLayoutInflater().inflate(R.layout.item_list2,null);
        list1.add(view1);
        list1.add(view2);
        list1.add(view3);
        list1.add(view4);
    }
    private void iniData1() {
        list2=new ArrayList<>();
        View view1=getLayoutInflater().inflate(R.layout.list_item1,null);
        View view2=getLayoutInflater().inflate(R.layout.item_list2,null);
        View view3=getLayoutInflater().inflate(R.layout.list_item1,null);
        View view4=getLayoutInflater().inflate(R.layout.item_list2,null);
        list2.add(view1);
        list2.add(view2);
        list2.add(view3);
        list2.add(view4);
}
}