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;        }    }