ViewPager作为Tap的应用 ViewPager作为Tap的应用

文章图片
布局文件
布局文件中需要注意的地方：
1.主activity布局文件中，善用weight属性使ViewPager填充满屏幕

2.底部由4个LinearLayout占据，ImageButton的background属性要制定白色，两个控件要指定为wrap_content，clickabale属性设置为flase是为了不让button阻扰LinearLayout的监听事件，因为控件的优先级比其父容器高。

3.主代码：
initView方法：
1.find出4个tab的实例，4个tab中ImageButton的实例，
2.动态加载4个布局add进View集合，
3.new一个ViewAdapter（4个方法格式基本通用，功能就是对View集合的各种设置，加载，销毁，选择，数量），
4.给ViewPager适配ViewAdapter
【ViewPager作为Tap的应用】initEvent方法：
1.给4个tab（LinearLayout）设置监听事件（功能：翻页，变色）
2.给ViewPager添加监听器，注意代码中标注的细节（功能：变色）

public class MainActivity extends Activity implements OnClickListener{private ViewPager mViewPager; private PagerAdapter mAdapter; private List mViews = new ArrayList(); //底部4个TAB private LinearLayout mTab1; private LinearLayout mTab2; private LinearLayout mTab3; private LinearLayout mTab4; private ImageButton mTab1Img; private ImageButton mTab2Img; private ImageButton mTab3Img; private ImageButton mTab4Img; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initView(); initEvent(); setSelect(1); }private void initView() { mViewPager = (ViewPager) findViewById(R.id.viewpager); //底部的4个tab区域，需要设置监听事件的 mTab1 = (LinearLayout) findViewById(R.id.tab_1); mTab2 = (LinearLayout) findViewById(R.id.tab_2); mTab3 = (LinearLayout) findViewById(R.id.tab_3); mTab4 = (LinearLayout) findViewById(R.id.tab_4); //底部的4个ImageButton，需要改变其背景图片 mTab1Img = (ImageButton) findViewById(R.id.tab_1_btn); mTab2Img = (ImageButton) findViewById(R.id.tab_2_btn); mTab3Img = (ImageButton) findViewById(R.id.tab_3_btn); mTab4Img = (ImageButton) findViewById(R.id.tab_4_btn); //装载View进集合，为ViewAdapter准备 LayoutInflater inflater = LayoutInflater.from(this); View tab1 = inflater.inflate(R.layout.tab1, null); View tab2 = inflater.inflate(R.layout.tab2, null); View tab3 = inflater.inflate(R.layout.tab3, null); View tab4 = inflater.inflate(R.layout.tab4, null); mViews.add(tab1); mViews.add(tab2); mViews.add(tab3); mViews.add(tab4); //创建ViewAdapter，此处我直接new一个 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 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(); } }; //创建好了PagerAdapter就可以适配给ViewPager了 mViewPager.setAdapter(mAdapter); }private void initEvent() { //给4个Tab设置监听事件 //注意此处要给layout添加监听事件，而不是ImageButton。但如果点击了IamageButton的话，点击事件只传给ImageButton，不会外传给LinearLayout，所以再布局里要给ImageButton加上点击无效属性 mTab1.setOnClickListener(this); mTab2.setOnClickListener(this); mTab3.setOnClickListener(this); mTab4.setOnClickListener(this); //给ViewPager加载监听器，改变ImageButon颜色 mViewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { int currentItem = mViewPager.getCurrentItem(); initImg(); switch (currentItem) { case 0: mTab1Img.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: mTab2Img.setImageResource(R.drawable.tab_find_frd_pressed); break; case 2: mTab3Img.setImageResource(R.drawable.tab_address_pressed); break; case 3: mTab4Img.setImageResource(R.drawable.tab_settings_pressed); break; } }@Override public void onPageScrolled(int arg0, float arg1, int arg2) {}@Override public void onPageScrollStateChanged(int arg0) {} }); }//重写Tab的监听事件 @Override public void onClick(View v) { switch (v.getId()) { case R.id.tab_1: setSelect(1); break; case R.id.tab_2: setSelect(2); break; case R.id.tab_3: setSelect(3); break; case R.id.tab_4: setSelect(4); break; default: break; } }//将方法抽取出来（根据点击翻页，以及变换TabImage颜色） private void setSelect(int i) { initImg(); switch (i) { case 1: mViewPager.setCurrentItem(0); mTab1Img.setImageResource(R.drawable.tab_weixin_pressed); break; case 2: mViewPager.setCurrentItem(1); mTab2Img.setImageResource(R.drawable.tab_find_frd_pressed); break; case 3: mViewPager.setCurrentItem(2); mTab3Img.setImageResource(R.drawable.tab_address_pressed); break; case 4: mViewPager.setCurrentItem(3); mTab4Img.setImageResource(R.drawable.tab_settings_pressed); break; } }//将所有ImageButton的源图片切换为暗色，主意不是backgroundResource private void initImg() { mTab1Img.setImageResource(R.drawable.tab_weixin_normal); mTab2Img.setImageResource(R.drawable.tab_find_frd_normal); mTab3Img.setImageResource(R.drawable.tab_address_normal); mTab4Img.setImageResource(R.drawable.tab_settings_normal); }}