ViewPager，模仿慕课网

源码：http://pan.baidu.com/s/1DhM14

使用fragment实现的：http://pan.baidu.com/s/1mgzWlM4

SecondActivity.java

 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.widget.ImageButton;
 import android.widget.LinearLayout;
 import android.widget.Toast;

 public class SecondActivity extends Activity implements OnClickListener{
     List<View> mViews = new ArrayList<View>();
     PagerAdapter adapter;
     ViewPager vp;

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

     //tabs
     private LinearLayout mTabWeixin;
     private LinearLayout mTabFrd;
     private LinearLayout mTabAddress;
     private LinearLayout mTabSetting;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         // TODO Auto-generated method stub
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main2);
         //LinearLayout,并且设置onClick()监听
         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin2);
         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd2);
         mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address2);
         mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings2);
         mTabWeixin.setOnClickListener(this);
         mTabFrd.setOnClickListener(this);
         mTabAddress.setOnClickListener(this);
         mTabSetting.setOnClickListener(this);

         //ImageButton
         mWeixinImg = (ImageButton) findViewById(R.id.id_imgbtn_wx);
         mFrdImg = (ImageButton) findViewById(R.id.id_imgbtn_py);
         mAddressImg = (ImageButton) findViewById(R.id.id_imgbtn_txl);
         mSettingImg = (ImageButton) findViewById(R.id.id_imgbtn_sz);
         /*
          * 用来把layout布局转换为view对象，并且把view放到List里，这个泛型为View的List在new PagerAdapter的时候，
          * 其内部的instantiateItem()方法要用到
          */
         LayoutInflater inflater = LayoutInflater.from(this);
         View v1 = inflater.inflate(R.layout.tab1, null);
         View v2 = inflater.inflate(R.layout.tab2, null);
         View v3 = inflater.inflate(R.layout.tab3, null);
         View v4 = inflater.inflate(R.layout.tab4, null);
         //步骤1
         mViews.add(v1);
         mViews.add(v2);
         mViews.add(v3);
         mViews.add(v4);
         vp = (ViewPager) findViewById(R.id.id_viewpager2);
         //步骤2
         adapter = new PagerAdapter() {

             @Override
             public Object instantiateItem(ViewGroup container, int position) {
                 // TODO Auto-generated method stub
                 View v = mViews.get(position);
                 container.addView(v);// 一定要把view添加到container中，否则tab中无法显示view
                 return v;
             }

             @Override
             public void destroyItem(ViewGroup container, int position,
                     Object object) {
                 container.removeView(mViews.get(position));//从container中移除view
             }

             @Override
             public boolean isViewFromObject(View arg0, Object arg1) {
                 // TODO Auto-generated method stub
                 return arg0 == arg1;//固定写法
             }

             @Override
             public int getCount() {
                 // TODO Auto-generated method stub
                 return mViews.size();//固定写法
             }
         };
         //步骤3
         vp.setAdapter(adapter);
         System.out.println("SecondActivity，has already setAdapter...");

         //设置Tab滑动的时候的逻辑代码
         vp.setOnPageChangeListener(new OnPageChangeListener() {
             int current;
             @Override
             public void onPageSelected(int arg0) {
                 current = vp.getCurrentItem();//重要的方法，获取当前是哪个tab,
                 switch (current) {
                 case 0:
                     //滑动到第一个tab
                     resetImg();
                     //设置微信ImageButton为按下去的效果
                     mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                     break;
                 case 1:
                     resetImg();
                     //同上
                     mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                     break;
                 case 2:
                     resetImg();
                     //同上
                     mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                     break;
                 case 3:
                     resetImg();
                     //同上
                     mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                     break;
                 default:
                     break;
                 }
             }

             @Override
             public void onPageScrolled(int arg0, float arg1, int arg2) {
                 // TODO Auto-generated method stub
                 Toast.makeText(SecondActivity.this, "onPageScrolled.......", 0)
                         .show();
             }

             @Override
             public void onPageScrollStateChanged(int arg0) {
                 // TODO Auto-generated method stub

             }
         });
     }
     //重置所有的ImageButton为灰色
     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);
     }
     /**
      * 用来设置ImageButton点击的时候切换到对应的Tab中，
      *
      */
     @Override
     public void onClick(View v) {
         // TODO Auto-generated method stub
         //1 先重置所有ImageButton的背景为灰色
         resetImg();
         //2
         switch (v.getId()) {
         //注意，case R.id.id_tab_weixin，这个id不是imageButton的id，而是imageButton的父控件LinearLayout的id
         case R.id.id_tab_weixin2:
             Toast.makeText(this, "weixin", 0).show();
             //设置电机的ImageButton为亮色
             mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
             //设置当前所在的tab
             vp.setCurrentItem(0);
             break;
         case R.id.id_tab_frd2:
             mWeixinImg.setImageResource(R.drawable.tab_find_frd_pressed);
             vp.setCurrentItem(1);
             break;
         case R.id.id_tab_address2:
             mWeixinImg.setImageResource(R.drawable.tab_address_pressed);
             vp.setCurrentItem(2);
             break;
         case R.id.id_tab_settings2:
             mWeixinImg.setImageResource(R.drawable.tab_settings_pressed);
             vp.setCurrentItem(3);
             break;
         default:
             break;
         }
     }
 }

ViewPager对应的xml,main2.xml:

 <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" >

     <include layout="@layout/top2" />

     <android.support.v4.view.ViewPager
         android:id="@+id/id_viewpager2"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight="1" >
     </android.support.v4.view.ViewPager>

     <include layout="@layout/bottom2" />

 </LinearLayout>

效果图如：