ViewPager，模仿慕课网

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

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

SecondActivity.java

  1 package com.imooc.tab01;
  2 
  3 import java.util.ArrayList;
  4 import java.util.List;
  5 
  6 import android.app.Activity;
  7 import android.os.Bundle;
  8 import android.support.v4.view.PagerAdapter;
  9 import android.support.v4.view.ViewPager;
 10 import android.support.v4.view.ViewPager.OnPageChangeListener;
 11 import android.view.LayoutInflater;
 12 import android.view.View;
 13 import android.view.View.OnClickListener;
 14 import android.view.ViewGroup;
 15 import android.widget.ImageButton;
 16 import android.widget.LinearLayout;
 17 import android.widget.Toast;
 18 
 19 public class SecondActivity extends Activity implements OnClickListener{
 20     List<View> mViews = new ArrayList<View>();
 21     PagerAdapter adapter;
 22     ViewPager vp;
 23     
 24     private ImageButton mWeixinImg;
 25     private ImageButton mFrdImg;
 26     private ImageButton mAddressImg;
 27     private ImageButton mSettingImg;
 28     
 29     //tabs
 30     private LinearLayout mTabWeixin;
 31     private LinearLayout mTabFrd;
 32     private LinearLayout mTabAddress;
 33     private LinearLayout mTabSetting;
 34     
 35     @Override
 36     protected void onCreate(Bundle savedInstanceState) {
 37         // TODO Auto-generated method stub
 38         super.onCreate(savedInstanceState);
 39         setContentView(R.layout.main2);
 40         //LinearLayout,并且设置onClick()监听
 41         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin2);
 42         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd2);
 43         mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address2);
 44         mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings2);
 45         mTabWeixin.setOnClickListener(this);
 46         mTabFrd.setOnClickListener(this);
 47         mTabAddress.setOnClickListener(this);
 48         mTabSetting.setOnClickListener(this);
 49         
 50         //ImageButton
 51         mWeixinImg = (ImageButton) findViewById(R.id.id_imgbtn_wx);
 52         mFrdImg = (ImageButton) findViewById(R.id.id_imgbtn_py);
 53         mAddressImg = (ImageButton) findViewById(R.id.id_imgbtn_txl);
 54         mSettingImg = (ImageButton) findViewById(R.id.id_imgbtn_sz);
 55         /*
 56          * 用来把layout布局转换为view对象，并且把view放到List里，这个泛型为View的List在new PagerAdapter的时候，
 57          * 其内部的instantiateItem()方法要用到
 58          */
 59         LayoutInflater inflater = LayoutInflater.from(this);
 60         View v1 = inflater.inflate(R.layout.tab1, null);
 61         View v2 = inflater.inflate(R.layout.tab2, null);
 62         View v3 = inflater.inflate(R.layout.tab3, null);
 63         View v4 = inflater.inflate(R.layout.tab4, null);
 64         //步骤1 
 65         mViews.add(v1);
 66         mViews.add(v2);
 67         mViews.add(v3);
 68         mViews.add(v4);
 69         vp = (ViewPager) findViewById(R.id.id_viewpager2);
 70         //步骤2
 71         adapter = new PagerAdapter() {
 72 
 73             @Override
 74             public Object instantiateItem(ViewGroup container, int position) {
 75                 // TODO Auto-generated method stub
 76                 View v = mViews.get(position);
 77                 container.addView(v);// 一定要把view添加到container中，否则tab中无法显示view
 78                 return v;
 79             }
 80 
 81             @Override
 82             public void destroyItem(ViewGroup container, int position,
 83                     Object object) {
 84                 container.removeView(mViews.get(position));//从container中移除view
 85             }
 86 
 87             @Override
 88             public boolean isViewFromObject(View arg0, Object arg1) {
 89                 // TODO Auto-generated method stub
 90                 return arg0 == arg1;//固定写法
 91             }
 92 
 93             @Override
 94             public int getCount() {
 95                 // TODO Auto-generated method stub
 96                 return mViews.size();//固定写法
 97             }
 98         };
 99         //步骤3 
100         vp.setAdapter(adapter);
101         System.out.println("SecondActivity，has already setAdapter...");
102         
103         //设置Tab滑动的时候的逻辑代码
104         vp.setOnPageChangeListener(new OnPageChangeListener() {
105             int current;
106             @Override
107             public void onPageSelected(int arg0) {
108                 current = vp.getCurrentItem();//重要的方法，获取当前是哪个tab,
109                 switch (current) {
110                 case 0:
111                     //滑动到第一个tab
112                     resetImg();
113                     //设置微信ImageButton为按下去的效果
114                     mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
115                     break;
116                 case 1:
117                     resetImg();
118                     //同上
119                     mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
120                     break;
121                 case 2:
122                     resetImg();
123                     //同上
124                     mAddressImg.setImageResource(R.drawable.tab_address_pressed);
125                     break;
126                 case 3:
127                     resetImg();
128                     //同上
129                     mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
130                     break;
131                 default:
132                     break;
133                 }
134             }
135 
136             @Override
137             public void onPageScrolled(int arg0, float arg1, int arg2) {
138                 // TODO Auto-generated method stub
139                 Toast.makeText(SecondActivity.this, "onPageScrolled.......", 0)
140                         .show();
141             }
142 
143             @Override
144             public void onPageScrollStateChanged(int arg0) {
145                 // TODO Auto-generated method stub
146 
147             }
148         });
149     }
150     //重置所有的ImageButton为灰色
151     private void resetImg() {
152         mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
153         mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
154         mAddressImg.setImageResource(R.drawable.tab_address_normal);
155         mSettingImg.setImageResource(R.drawable.tab_settings_normal);
156     }
157     /**
158      * 用来设置ImageButton点击的时候切换到对应的Tab中，
159      * 
160      */
161     @Override
162     public void onClick(View v) {
163         // TODO Auto-generated method stub
164         //1 先重置所有ImageButton的背景为灰色
165         resetImg();
166         //2 
167         switch (v.getId()) {
168         //注意，case R.id.id_tab_weixin，这个id不是imageButton的id，而是imageButton的父控件LinearLayout的id
169         case R.id.id_tab_weixin2:
170             Toast.makeText(this, "weixin", 0).show();
171             //设置电机的ImageButton为亮色
172             mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
173             //设置当前所在的tab
174             vp.setCurrentItem(0);
175             break;
176         case R.id.id_tab_frd2:
177             mWeixinImg.setImageResource(R.drawable.tab_find_frd_pressed);
178             vp.setCurrentItem(1);
179             break;
180         case R.id.id_tab_address2:
181             mWeixinImg.setImageResource(R.drawable.tab_address_pressed);
182             vp.setCurrentItem(2);
183             break;
184         case R.id.id_tab_settings2:
185             mWeixinImg.setImageResource(R.drawable.tab_settings_pressed);
186             vp.setCurrentItem(3);
187             break;
188         default:
189             break;
190         }
191     }
192 }

ViewPager对应的xml,main2.xml:

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <include layout="@layout/top2" />
 8 
 9     <android.support.v4.view.ViewPager
10         android:id="@+id/id_viewpager2"
11         android:layout_width="fill_parent"
12         android:layout_height="0dp"
13         android:layout_weight="1" >
14     </android.support.v4.view.ViewPager>
15 
16     <include layout="@layout/bottom2" />
17 
18 </LinearLayout>

效果图如：