Android ViewPager例子

第一种实现方式：

按照套路先上一张图：
            



关键一步：添加依赖包

compile 'com.android.support:design:22.2.0'

MainActivity.java文件：

package barneyx.com.buttonmenudemo;

import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private TabLayout mTableLayout;
    private ViewPager mViewPager;

    private LayoutInflater mInflater;
    private List<String> mTitleList = new ArrayList<String>(); //页卡标题集合
    private View view1,view2,view3,view4,view5; //页卡集合
    private List<View> mViewList = new ArrayList<>(); //页卡视图集合

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

        mViewPager = (ViewPager) findViewById(R.id.vp_view);
        mTableLayout = (TabLayout)findViewById(R.id.tabs);

        mInflater = LayoutInflater.from(this);

        view1 = mInflater.inflate(R.layout.activity_main,null);
        view2 = mInflater.inflate(R.layout.activity_main,null);
        view3 = mInflater.inflate(R.layout.activity_main,null);
        view4 = mInflater.inflate(R.layout.activity_main,null);
        view5 = mInflater.inflate(R.layout.activity_main,null);


        //添加页卡视图
        mViewList.add(view1);
        mViewList.add(view2);
        mViewList.add(view3);
        mViewList.add(view4);
        mViewList.add(view5);

        //添加标题卡
        mTitleList.add("NO1");
        mTitleList.add("NO2");
        mTitleList.add("NO3");
        mTitleList.add("NO4");
        mTitleList.add("NO5");

        mTableLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(0)));
        mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(1)));
        mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(2)));
        mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(3)));
        mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(4)));


        MyPagerAdapter myPagerAdapter = new MyPagerAdapter(mViewList);
        mViewPager.setAdapter(myPagerAdapter);//给ViewPager设置适配器
        mTableLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。
        mTableLayout.setTabsFromPagerAdapter(myPagerAdapter);//给Tabs设置适配器

    }
    //ViewPager适配器
    class MyPagerAdapter extends PagerAdapter{
        private List<View> mViewList;


        public MyPagerAdapter(List<View> mViewList){
            this.mViewList = mViewList;
        }

        @Override
        public int getCount() {
            return mViewList.size();//页卡数
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
          return view==object;//官方推荐写法
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViewList.get(position));
            return mViewList.get(position);//添加页卡
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViewList.get(position));//删除页卡
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitleList.get(position);//页卡标题
        }
    }

}

资源文件colors.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="dkgray">#80808FF0</color>
    <color name="yello">#F8F8FF00</color>
    <color name="white">#FFFFFF</color>
    <color name="darkgray">#938192</color>
    <color name="lightgreen">#7cd12e</color>
    <color name="black">#ff000000</color>
    <color name="blue">#ff0000ff</color>
    <color name="cyan">#ff00ffff</color>
    <color name="gray">#ff888888</color>
    <color name="green">#ff00ff00</color>
    <color name="ltgray">#ffcccccc</color>
    <color name="magenta">#ffff00ff</color>
    <color name="red">#ffff0000</color>
    <color name="transparent">#00000000</color>
    <color name="yellow">#ffffff00</color>
</resources>

布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    xmlns:tools=""
    xmlns:app=""
    android:id="@+id/activity_main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="barneyx.com.buttonmenudemo.MainActivity">



    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        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>