Android：简单实现ViewPager+TabHost+TabWidget实现导航栏导航和滑动切换

viewPager是v4包里的一个组件，可以实现滑动显示多个界面。

android也为viewPager提供了一个adapter，此adapter最少要重写4个方法:

public int getCount()

public boolean isViewFromObject(View view, Object o)

public void destroyItem(ViewGroup container, int position, Object object)

　 public Object instantiateItem(ViewGroup container, int position)

这些方法的作用我就不说了，在代码里面有详细的解释。

接下来就直接上代码吧!!

MainActivity.java

package com.example.administrator.viewpagerdemo;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TabHost;
import android.widget.TabWidget;

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

public class MainActivity extends Activity {

private ViewPager viewPager = null;
private List<View> viewContainter = new ArrayList<View>();   //存放容器
private ViewPagerAdapter viewPagerAdapter = null;   //声明适配器

private TabHost mTabHost = null;
private TabWidget mTabWidget = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initMyTabHost();  //初始化TabHost
// 绑定组件
viewPager = (ViewPager) findViewById(R.id.viewpager);
initViewPagerContainter();  //初始viewPager
viewPagerAdapter = new ViewPagerAdapter();
//设置adapter的适配器
viewPager.setAdapter(viewPagerAdapter);
//设置viewPager的监听器
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}
//当 滑动 切换时
@Override
public void onPageSelected(int position) {
mTabWidget.setCurrentTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {

}
});
//TabHost的监听事件
mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
if(tabId.equals("tab1")){
viewPager.setCurrentItem(0);
}else if (tabId.equals("tab2")){
viewPager.setCurrentItem(1);
}else if (tabId.equals("tab3")){
viewPager.setCurrentItem(2);
}else{
viewPager.setCurrentItem(3);
}
}
});

//解决开始时不显示viewPager
mTabHost.setCurrentTab(1);
mTabHost.setCurrentTab(0);
}

//初始化TabHost
public void initMyTabHost(){
//绑定id
mTabHost = (TabHost) findViewById(android.R.id.tabhost);
mTabHost.setup();
mTabWidget = mTabHost.getTabWidget();
/**
* newTabSpec（）   就是给每个Tab设置一个ID
* setIndicator()   每个Tab的标题
* setCount()       每个Tab的标签页布局
*/
mTabHost.addTab(mTabHost.newTabSpec("tab1").setContent(R.id.tab1).setIndicator("第一页"));
mTabHost.addTab(mTabHost.newTabSpec("tab2").setContent(R.id.tab2).setIndicator("第二页"));
mTabHost.addTab(mTabHost.newTabSpec("tab3").setContent(R.id.tab3).setIndicator("第三页"));
mTabHost.addTab(mTabHost.newTabSpec("tab4").setContent(R.id.tab4).setIndicator("第四页"));
}

//初始化viewPager
public void initViewPagerContainter(){
//建立四个view的样式，并找到他们
View view_1 = LayoutInflater.from(getApplicationContext()).inflate(R.layout.viewpager_view_1,null);
View view_2 = LayoutInflater.from(getApplicationContext()).inflate(R.layout.viewpager_view_2,null);
View view_3 = LayoutInflater.from(getApplicationContext()).inflate(R.layout.viewpager_view_3,null);
View view_4 = LayoutInflater.from(getApplicationContext()).inflate(R.layout.viewpager_view_4,null);
//加入ViewPage的容器
viewContainter.add(view_1);
viewContainter.add(view_2);
viewContainter.add(view_3);
viewContainter.add(view_4);
}

//内部类实现viewpager的适配器
private class ViewPagerAdapter extends PagerAdapter{

//该方法 决定 并 返回 viewpager中组件的数量
@Override
public int getCount() {
return viewContainter.size();
}

@Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
//滑动切换的时候，消除当前组件
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewContainter.get(position));
}
//每次滑动的时候生成的组件
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewContainter.get(position));
return viewContainter.get(position);
}
}
}

activity_main.xml

在使用TabHost和TabWidget时，指定他们的id时时，android的已经为他定义好了，并且必须为他们指定这个id。而且TabHost里面必须要包含TabWedght和FrameLayout

切他们的id也必须为android已经给定的，就是下面xml代码里的id，否则会报错

<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@android:id/tabhost">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/red"
android:layout_weight="9">
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
<TextView
android:id="@+id/tab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tab4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>

</LinearLayout>
</TabHost>

我们再为viewPager添加View的时候，需要建立他们的布局文件,在上面的代码，我建立了4个xml，内容是一样的，都放了一个ImageView

<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@android:id/tabhost">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/red"
android:layout_weight="9">
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
<TextView
android:id="@+id/tab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tab4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>

</LinearLayout>
</TabHost>

　　 这样做出来的Demo，首次启动时会出现无法显示画面的问题，只有当点击一次Tab的时候才会显示。为了解决这个问题，我在MainActivity的onCreate（）方法的

最后面加入了这两句话,但是还是不明白，为什么我只 mTabHost.setCurrentTab(0);不起作用，希望知道的的小伙伴各异给我解答一下疑惑,谢谢。

//解决开始时不显示viewPager
mTabHost.setCurrentTab(1);
mTabHost.setCurrentTab(0);

下面是效果图: