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

下面是效果图: