Android 用ViewPager实现加载两个webview的可滑动Tab页

先看下最终效果：
同一个页面里，有两个Tab页，分别加载两个不同的网页，可以通过点击页面顶部Tab或者左右滑动来切换Tab。被选中的tab颜色会变化。

下面看下如何实现：
1. 首先是这个页面的布局文件：

<?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"
    android:orientation="vertical"
    android:background="@color/white" >

    <include layout="@layout/layout_tab_top" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>
</LinearLayout>

其中ViewPager控件是用来显示页面内容部分，layout_tab_top.xml即为页面顶部的tab部分。
layout_tab_top.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="wrap_content"
    android:gravity="center"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/layout_tab_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/grey"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="TAB 1"
            android:textColor="#000000" />
    </LinearLayout>

    <View
        android:layout_width="5dp"
        android:layout_height="match_parent"
        android:background="@color/white"/>

    <LinearLayout
        android:id="@+id/layout_tab_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/grey"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="TAB 2"
            android:textColor="#000000" />
    </LinearLayout>

</LinearLayout>

2.布局文件写好了，看下如何在Activity中使用(Tab布局和ViewPager的findViewById的代码就不用贴了，和布局文件中各自命名很好对应)：

定义全局变量：两个WebView和一个List，

    private List<View> mViews;
    private WebView webview1;
    private WebView webview2;

在onCreate()中做如下初始化：

        //初始化
        mViews = new ArrayList<>();
        webview1 = new WebView(mContext);
        webview2 = new WebView(mContext);       
        mViews.add(webview1);
        mViews.add(webview2);

        //webview的设置初始化,使webview能进行网页缩放等
        initWebViewSettings(webview1);
        initWebViewSettings(webview2);

        //webview辅助设置，本例中是空实现
        setWebClient(webview1);
        setWebClient(webview2);

        //默认加载第一个tab的webview
        showTab1();

        //初始化tab的显示和各事件处理
        initTabView();
        ininEvents();

其中上面的几个方法实现分别如下：

    private void initWebViewSettings(WebView webview) {
        //获取一个webviewsetting对象
        WebSettings setting = webview.getSettings();
        setting.setJavaScriptEnabled(true);
        //显示缩放控制工具
        setting.setDisplayZoomControls(false);
        //设置webview支持缩放
        setting.setSupportZoom(true);
        setting.setBuiltInZoomControls(true);
        //设置加载进来的页面自适应手机屏幕
        setting.setUseWideViewPort(true);
        setting.setLoadWithOverviewMode(true);
    }

    private void setWebClient(WebView webview) {

        // TODO Auto-generated method stub
        webview.setWebChromeClient(new WebChromeClient() {


        });
        webview.setWebViewClient(new WebViewClient() {

            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // TODO Auto-generated method stub
                view.loadUrl(url);
                return true;
            }

        });

    }

    private void initTabView() {
        // 实例化PagerAdapter
        PagerAdapter adapter = new PagerAdapter() {

            // 使用PagerAdapter一般还需要实现下面两个方法
            @Override
            public void destroyItem(ViewGroup container, int position,
                                    Object object) {
                // TODO Auto-generated method stub
                container.removeView(mViews.get(position));
            }

            // 初始化Item
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                // TODO Auto-generated method stub
                View view = mViews.get(position);
                container.addView(view);
                return view;
            }

            // 使用PagerAdapter必须实现的两个方法
            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return 2;
            }

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                // TODO Auto-generated method stub
                return arg0 == arg1;
            }

        };
        viewpager.setAdapter(adapter);
    }

    private void ininEvents() {
        // 给viewpager添加监听，使得滑动viewpager的同时，下边的随之改变按钮的按下状态
        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                int currentItem = viewpager.getCurrentItem();
                switch (currentItem) {
                    case 0:
                        showTab1();
                        break;

                    case 1:
                        showTab2();
                        break;

                    default:
                        break;
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                // TODO Auto-generated method stub
                //0：什么都没做  1：开始滑动  2：滑动结束
                //滑动时state变化顺序为1, 2, 0
                if (1 == state) {
                    resetUI();
                }

            }
        });
    }

    private void resetUI() {
        layoutTab1.setBackgroundColor(ContextCompat.getColor(mContext, R.color.grey));
        layoutTab2.setBackgroundColor(ContextCompat.getColor(mContext, R.color.grey));

    }

    private void showTab1() {
        String address = "http://www.baidu.com/";
        webview1.loadUrl(address);
        layoutTab1.setBackgroundColor(ContextCompat.getColor(mContext, R.color.hese));
        layoutTab2.setBackgroundColor(ContextCompat.getColor(mContext, R.color.grey));
    }

    private void showTab2() {
        String address = "http://www.sogou.com/";
        webview2.loadUrl(address);
        layoutTab1.setBackgroundColor(ContextCompat.getColor(mContext, R.color.grey));
        layoutTab2.setBackgroundColor(ContextCompat.getColor(mContext, R.color.hese));

    }

另外还有这个: 给tab设置点击事件，使得点击时切换不同的Tab页

    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        switch (arg0.getId()) {
            case R.id.layout_tab_1:
                viewpager.setCurrentItem(0);
                showTab1();
                break;

            case R.id.layout_tab_2:
                viewpager.setCurrentItem(1);
                showTab2();
                break;

            default:
                break;
        }
    }