源码: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>
效果图如: