本節(jié)將結合上一節(jié)所講的內(nèi)容實現(xiàn)仿微信的Tab切換效果，下面通過代碼進行講解。

主布局文件（activity_main.xml）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <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>
    <include layout="@layout/bottom" />
</LinearLayout>

主布局包括一個ViewPager控件和導入的bottom布局文件，使用include標簽可以導入布局文件，將通用布局抽取為一個布局文件，這樣更有利于系統(tǒng)后期維護。

底部欄文件（bottom.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="70dp"
    android:background="#ffffffff"
    android:orientation="horizontal" >
    <LinearLayout
        android:id="@+id/ll_chat"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <ImageView
            android:id="@+id/img_chat"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="#0000"
            android:src="@drawable/chat_yes" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#b6b3b3" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_frd"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <ImageView
            android:id="@+id/img_frd"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="#0000"
            android:src="@drawable/frd_no" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通訊錄"
            android:textColor="#b6b3b3" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_find"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <ImageView
            android:id="@+id/img_find"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="#0000"
            android:src="@drawable/find_no" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="發(fā)現(xiàn)"
            android:textColor="#b6b3b3" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_me"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <ImageView
            android:id="@+id/img_me"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="#0000"
            android:src="@drawable/me_no" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"
            android:textColor="#b6b3b3" />
    </LinearLayout>
</LinearLayout>

底部欄布局文件采用線性布局的方式，主要包括四個LinearLayout，設置這四個LinearLayout的layout_width值為0dp，并設置其layout_weight屬性值為1，可以讓四個LinearLayout平分屏幕寬度。同時，每個LinearLayout中包含了一個ImageView用于顯示圖片，一個TextView用于顯示文本信息。

子View布局文件（tab01.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="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="聊天頁"
        android:textSize="30sp" >
    </TextView>
</LinearLayout>

本例ViewPager共包含了四個子View，每個子View只是TextView文本屬性不同，因此，其余tab02-tab04的代碼就不再貼出。 Fragment代碼（MyFragment1.java） 本例使用ViewPager+FragmentStatePagerAdapter來實現(xiàn)，因此需要準備Fragment類的數(shù)據(jù)集：

public class MyFragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab01,null);
    }
}

同樣只是這些Fragment數(shù)據(jù)集只是其中布局文件的不同，MyFragment2-MyFragment4的代碼就不再貼出。 適配器類代碼（ViewPagerFragmentAdapter.java）

public class ViewPagerFragmentAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> datas;
    public ViewPagerFragmentAdapter(FragmentManager fm,List<Fragment> datas) {
        super(fm);
        this.datas=datas;
    }
    @Override
    public Fragment getItem(int position) {//返回子View對象
        return datas.get(position);
    }
    @Override
    public int getCount() {//返回子View的個數(shù)
        return datas.size();
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {//初始子View方法
        return super.instantiateItem(container, position);
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {//銷毀子View
        super.destroyItem(container, position, object);
    }
}

繼承自FragmentStatePagerAdapter，說明當子View不在當前窗口時，可以被內(nèi)存回收，同時覆寫了四個必須要實現(xiàn)的方法。由于這些方法在上節(jié)中已經(jīng)講解，這里就不再重復。

MainActivity代碼（MainActivity.java）

public class MainActivity extends FragmentActivity implements OnClickListener {
   //主要要繼承自FragmentActivity,這樣才能在初始適配器類是使用getSupportFragmentManager方法獲取FragmentManager對象
   private ViewPager mViewPager;
   private List<Fragment> datas;
   private ViewPagerFragmentAdapter viewPagerFragmentAdapter;
   private LinearLayout mLLChat,mLLFrd,mLLFind,mLLMe;
   private ImageView mImageViewChat,mImageViewFrd,mImageViewFind,mImageViewMe;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      requestWindowFeature(Window.FEATURE_NO_TITLE);
      setContentView(R.layout.activity_main);
      initDatas();//初始化數(shù)據(jù)集
      initView();// 初始化控件
      initEvent();// 注冊單擊監(jiān)聽
      viewPagerFragmentAdapter=new ViewPagerFragmentAdapter(getSupportFragmentManager(),datas);//初始化適配器類
      mViewPager.setAdapter(viewPagerFragmentAdapter);
   }
   private void initDatas() {
      datas=new ArrayList<Fragment>();
      datas.add(new MyFragment1());
      datas.add(new MyFragment2());
      datas.add(new MyFragment3());
      datas.add(new MyFragment4());

   }
   private void initEvent() {
      mLLChat.setOnClickListener(this);
      mLLFrd.setOnClickListener(this);
      mLLFind.setOnClickListener(this);
      mLLMe.setOnClickListener(this);
      mViewPager.setOnPageChangeListener(new OnPageChangeListener() {//ViewPager滑動切換監(jiān)聽
         @Override
         public void onPageSelected(int arg0) {
            int currentItem=mViewPager.getCurrentItem();
            resetImag();
            switch (currentItem) {
            case 0:
               mImageViewChat.setImageResource(R.drawable.chat_yes);
               break;
            case 1:
               mImageViewFrd.setImageResource(R.drawable.frd_yes);
               break;
            case 2:
               mImageViewFind.setImageResource(R.drawable.find_yes);
               break;
            case 3:
               mImageViewMe.setImageResource(R.drawable.me_yes);
               break;
            default:
               break;
            }
         }
         @Override
         public void onPageScrolled(int arg0, float arg1, int arg2) {

         }
         @Override
         public void onPageScrollStateChanged(int arg0) {

         }
      });
   }
   private void initView() {
      mViewPager = (ViewPager) findViewById(R.id.viewpager);
      mLLChat = (LinearLayout) findViewById(R.id.ll_chat);
      mLLFrd = (LinearLayout) findViewById(R.id.ll_frd);
      mLLFind = (LinearLayout) findViewById(R.id.ll_find);
      mLLMe = (LinearLayout) findViewById(R.id.ll_me);
      mImageViewChat = (ImageView) findViewById(R.id.img_chat);
      mImageViewFrd = (ImageView) findViewById(R.id.img_frd);
      mImageViewFind = (ImageView) findViewById(R.id.img_find);
      mImageViewMe = (ImageView) findViewById(R.id.img_me);
   }
   @Override
   public void onClick(View v) {
      resetImag();
      switch (v.getId()) {
      case R.id.ll_chat:
         mViewPager.setCurrentItem(0);
         mImageViewChat.setImageResource(R.drawable.chat_yes);
         break;
      case R.id.ll_frd:
         mViewPager.setCurrentItem(1);
         mImageViewFrd.setImageResource(R.drawable.frd_yes);
         break;
      case R.id.ll_find:
         mViewPager.setCurrentItem(2);
         mImageViewFind.setImageResource(R.drawable.find_yes);
         break;
      case R.id.ll_me:
         mViewPager.setCurrentItem(3);
         mImageViewMe.setImageResource(R.drawable.me_yes);
         break;
      default:
         break;
      }
   }
   private void resetImag() {//重置圖片
      mImageViewChat.setImageResource(R.drawable.chat_no);
      mImageViewFrd.setImageResource(R.drawable.frd_no);
      mImageViewFind.setImageResource(R.drawable.find_no);
      mImageViewMe.setImageResource(R.drawable.me_no);
   }
}

這里實現(xiàn)了底部欄中四個LinearLayout的單擊事件監(jiān)聽，用來處理圖片切換邏輯。同時實現(xiàn)了OnPageChangeListener接口，監(jiān)聽頁面切換，更改對應的底部欄圖片。記得每次處理圖片更改時都需要先調用resetImag（圖片初始化方法），否則可能會出現(xiàn)連續(xù)幾個底部欄菜單被選中的情況，讀者可以自行測試。

在四個LinearLayout單擊事件處理時，用到了ViewPager的setCurrentItem方法，這個方法可以用來設置ViewPager的當前頁。 運行項目實例如下：

http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/18-1.png" alt="這里寫圖片描述" />

http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/18-2.png" alt="這里寫圖片描述" />

這個實例很實用，可以直接用到項目的初始界面設計中。