66、多种多样的App主界面Tab（1）------ ViewPager实现Tab

 <?xml version="1.0" encoding="utf-8"?>
 <!-- bottom.xml -->
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="55dp"
     android:background="@drawable/bottom_bar"
     android:orientation="horizontal" >
     <LinearLayout
         android:id="@+id/id_tab_weixin"
         android:layout_width="0dp"
         android:layout_height="fill_parent"
         android:layout_weight="1"
         android:gravity="center"
         android:orientation="vertical" >
         <ImageButton
             android:id="@+id/id_tab_weixin_img"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="#00000000"
             android:clickable="false"
             android:src="@drawable/tab_weixin_pressed" />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="微信"
             android:textColor="#ffffff" />
     </LinearLayout>

     <LinearLayout
         android:id="@+id/id_tab_frd"
         android:layout_width="0dp"
         android:layout_height="fill_parent"
         android:layout_weight="1"
         android:gravity="center"
         android:orientation="vertical" >
         <ImageButton
             android:id="@+id/id_tab_frd_img"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="#00000000"
             android:clickable="false"
             android:src="@drawable/tab_find_frd_normal" />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="朋友"
             android:textColor="#ffffff" />
     </LinearLayout>

     <LinearLayout
         android:id="@+id/id_tab_address"
         android:layout_width="0dp"
         android:layout_height="fill_parent"
         android:layout_weight="1"
         android:gravity="center"
         android:orientation="vertical" >
         <ImageButton
             android:id="@+id/id_tab_address_img"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="#00000000"
             android:clickable="false"
             android:src="@drawable/tab_address_normal" />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="通讯录"
             android:textColor="#ffffff" />
     </LinearLayout>

     <LinearLayout
         android:id="@+id/id_tab_settings"
         android:layout_width="0dp"
         android:layout_height="fill_parent"
         android:layout_weight="1"
         android:gravity="center"
         android:orientation="vertical" >
         <ImageButton
             android:id="@+id/id_tab_settings_img"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="#00000000"
             android:clickable="false"
             android:src="@drawable/tab_settings_normal" />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="设置"
             android:textColor="#ffffff" />
     </LinearLayout>

 </LinearLayout>

 <LinearLayout
     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:orientation="vertical" >
     <android.support.v4.view.ViewPager
         android:id="@+id/id_viewpager"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight="1" />
     <include layout="@layout/bottom" />
 </LinearLayout>

 package com.imooc.tab01;

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

 import android.app.Activity;
 import android.os.Bundle;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.ViewGroup;
 import android.view.Window;
 import android.widget.ImageButton;
 import android.widget.LinearLayout;

 public class MainActivity extends Activity implements OnClickListener {

     private ViewPager mViewPager;
     private PagerAdapter mAdapter;
     private List<View> mViews = new ArrayList<View>();
     // TAB
     private LinearLayout mTabWeixin;
     private LinearLayout mTabFrd;
     private LinearLayout mTabAddress;
     private LinearLayout mTabSetting;

     private ImageButton mWeixinImg;
     private ImageButton mFrdImg;
     private ImageButton mAddressImg;
     private ImageButton mSettingImg;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);

         initView();

         initEvents();
     }

     private void initView() {
         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
         // tabs
         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
         mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
         mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
         // ImageButton
         mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
         mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
         mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
         mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);

         LayoutInflater mInflater = LayoutInflater.from(this);
         View tab01 = mInflater.inflate(R.layout.tab01, null);
         View tab02 = mInflater.inflate(R.layout.tab02, null);
         View tab03 = mInflater.inflate(R.layout.tab03, null);
         View tab04 = mInflater.inflate(R.layout.tab04, null);
         mViews.add(tab01);
         mViews.add(tab02);
         mViews.add(tab03);
         mViews.add(tab04);

         mAdapter = new PagerAdapter() {

             @Override
             public void destroyItem(ViewGroup container, int position,
                     Object object) {
                 container.removeView(mViews.get(position));
             }

             @Override
             public Object instantiateItem(ViewGroup container, int position) {
                 View view = mViews.get(position);
                 container.addView(view);
                 return view;
             }

             @Override
             public boolean isViewFromObject(View arg0, Object arg1) {
                 return arg0 == arg1;
             }

             @Override
             public int getCount() {
                 return mViews.size();
             }
         };

         mViewPager.setAdapter(mAdapter);
     }

     private void initEvents() {
         mTabWeixin.setOnClickListener(this);
         mTabFrd.setOnClickListener(this);
         mTabAddress.setOnClickListener(this);
         mTabSetting.setOnClickListener(this);

         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

             @Override
             public void onPageSelected(int arg0) {
                 int currentItem = mViewPager.getCurrentItem();
                 resetImg();   // 将所有的图片切换为暗色的

                 switch (currentItem) {
                 case 0:
                     mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                     break;
                 case 1:
                     mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                     break;
                 case 2:
                     mAddressImg
                             .setImageResource(R.drawable.tab_address_pressed);
                     break;
                 case 3:
                     mSettingImg
                             .setImageResource(R.drawable.tab_settings_pressed);
                     break;
                 }
             }

             @Override
             public void onPageScrolled(int arg0, float arg1, int arg2) { }

             @Override
             public void onPageScrollStateChanged(int arg0) { }
         });
     }

     @Override
     public void onClick(View v) {
         resetImg();  // 将所有的图片切换为暗色的

         switch (v.getId()) {
         case R.id.id_tab_weixin:
             mViewPager.setCurrentItem(0);
             mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
             break;
         case R.id.id_tab_frd:
             mViewPager.setCurrentItem(1);
             mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
             break;
         case R.id.id_tab_address:
             mViewPager.setCurrentItem(2);
             mAddressImg.setImageResource(R.drawable.tab_address_pressed);
             break;
         case R.id.id_tab_settings:
             mViewPager.setCurrentItem(3);
             mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
             break;

         default:
             break;
         }
     }

     /**
      * 将所有的图片切换为暗色的
      */
     private void resetImg() {
         mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
         mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
         mAddressImg.setImageResource(R.drawable.tab_address_normal);
         mSettingImg.setImageResource(R.drawable.tab_settings_normal);
     }

 }

完整DEMO下载地址：http://download.csdn.net/detail/androidsj/9354277