先看下最终效果:
同一个页面里,有两个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;
}
}